Thanks in advance for your help. I'm new to AngularJs and I'm trying to build a single page website. My goal is to have a sidebar(menu) on the left and a page content on the right. Whenever I click on a given button into this sidebar, I would like to see the corresponding content on the page content.
+-------------------------------------------------+
| Navbar |
+------------+------------------------------------+
| Sidebar | |
| | |
| Menu 1 | Content |
| Menu 2 | => Display 1 if menu1 clicked |
| Menu 3 | => Display 2 if menu2 clicked |
| | => Display 3 if menu3 clicked |
| | |
| | |
| | |
+------------+------------------------------------+
I already implemented several components such as navbar, sidebar, user (to implement permissions etc) and pagecontent (which is a basically a white container) but I can't figure out how to proceed? Should I create one component for each button in the sidebar ? Can I choose which component to display in an already existing component (here, pagecontent) and how?
Related
I am writing an app where I have to show some structure like family tree. Is it possible to set all children in horizontal position in this example: http://try.sencha.com/extjs/4.1.1/docs/Ext.tree.Panel.1/viewer.html
Something likle:
Root
|
child1 ---- child2
|
|
child1.1
You can use Bread Crumbs to make this tree panel work. You are going to need to use Ext JS5 to use bread crumbs.
Here's a working example: https://fiddle.sencha.com/#fiddle/bja
I'm using AngularJS with ui-router for my website.
I have a multi-level menu (when you select one item, you can see next menu's level)
home | about | contact us
NY | LA | SF
Street1 | Street2 | Street3
So, at this example we looking at Street3 details, in LA in Contact us page. All selected items is active.
I can't make it with ui-router's ui-sref-active="active" because it's highlight only last item (Street3) Other items are not active, but should be.
Are there any ideas to fix it?
Thanks
You can always use $state.includes(stateName) to check if the current active state is equal to or is the child of the state stateName. Combine it with ng-class, you will get to highlight the correct tabs.
Here is a working example.
I am definitely sure doing something wrong which I didn't resolve. I have a form component which are includes several textfield, radio button as well as windows. If I used the following code :
console.log(Discounts.getForm().getValues());
// Discount is form name which is defined like below
var Discounts = Ext.create('Ext.form.Panel', {
...
}
I can see all values except grid panel which is included window component ( to tell the truth I can't see all other window values!).
The component tree like below :
+-- FORM PANEL ( layout card )
|
+-- CARD LAYOUT - 1
| |
| +- COMBOBOX
| +- TEXTFIELD
|
+-- CARD LAYOUT - 2
| |
| +- WINDOW
| |
| +- GRID PANEL
|
+-- CARD LAYOUT - 3
| |
| +- RADIO GROUP
Do you have any idea what I am doing wrong?
For instance, I would like to get winArticle window field values as well as Discount forms together.
PS : The code is very large so that I putted JSFiddle.
Source
You have a formpanel in a formpanel, by giving the child formpanel an itemId and using component queries like Discounts.down('#yourchildformpanelitemid').getValues() you could probably get its values...
However, since your code in no way maintainable, my advice, refactor/restructure your code and use MVC structure. From Sencha:
Large client side applications have always been hard to write, hard to
organize and hard to maintain. They tend to quickly grow out of
control as you add more functionality and developers to a project. Ext
JS 4 comes with a new application architecture that not only organizes
your code but reduces the amount you have to write.
You will need to restructure your code and define your components separately. this will make your app maintainable. In your case the formpanel you create would be a separate component and have its own controller, thus enabling you to use the same formpanel elsewhere.
Also, read the following article from Sencha, ExtJS practices to avoid:
http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/
Most of these tips (if not all) are applicable to your code.
For example, you are nesting components like crazy. Most of the nesting is unnecessary. For example:
...
items: [
{
xtype: 'form',
items: new Ext.Panel({
items: [
{
xtype: 'fieldset',
...
xtype: 'form' creates a form panel, why on earth create a panel inside?
More on ExtJS MVC Architecture:
http://docs.sencha.com/extjs/4.2.0/#!/guide/application_architecture
I am trying to develop a simple directive which can take a option of layout configuration.
Lets say i want to render something like this on the page
I want to render this 4 co-ordinates in one directive, which can then render directive1, in 1 and directive 2 in 2, directive 3 in 3 and directive 4 in 4
1 | 3
|
------------|----------------
| 4
2 |
|
Any ideas?
Note, i can statically render, the page without any issues, question is how do we render this dynamically, like..how an example directive would look like?
Thank you.
I don't have too much experience with Backbone.js, so please excuse my ignorance if I've completely missed something here.
I have an app that has a sidebar which is linked to a Router object, when the user clicks one of the links I send a navigate event. But that's not useful on its own.
What I have is a static sidebar on the left, then a .pane element on the right. The .pane is just a wrapper for what will be dynamically loaded content. I've made this its own view, but what I need to do is add a sub view into it when the user clicks on a link in the sidebar.
|--------------------------------------- |
| Link | |-----------------------------| |
| Link | |.pane | |
| Link | | | |
| Link | | | |
| Link | | | |
| Link | |-----------------------------| |
|--------------------------------------- |
Any ideas?
I think you should load a view with the nav bar on the index state.
Then, each link wil change the url. For each url, set a router state, wich calls another view for each menu item.
If you still don't get the idea, you should watch some backbone tutorials mate.
You can find some on:
http://www.tutsplus.com
http://www.backbonetutorials.com
Hope it helps