PDA

View Full Version : Sencha(Extjs4)- how to add menu items in an accordion menu



roykrish
17 Jan 2012, 2:23 AM
Hi,
I started with Sencha couple of days back. I have put an accordion menu in one of the panels of a border layout. Currently the menu items are blank panels. Could someone please guide me that how could I add menu items in my accordion menu.

Code looks like this -
xtype : 'panel',
title: '',
region:'center',
height: '50%',
width: '100%',
layout:'accordion',
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layoutConfig: {
// layout-specific configs go here
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: 'Main',
html: 'Panel content!',
width: '10%'
},
{
title: 'Main2',
html: 'Panel content!'
},
]

Currently both the panels, 'Main' and 'Main2' are blank. How can I add menu items there? One more question is that currently size(height) of both the panels, "Main" and "Main2" are same. Can I control them?

Thanks, -Krishnendu

mitchellsimoens
17 Jan 2012, 8:57 AM
Where do you want menu items? On a button when you click it a menu opens?

roykrish
17 Jan 2012, 8:31 PM
Thank you very much for responding.

Yes, currently I have only two blank stacked panels in my accordion layout. These panels are Main and Main2. When I hit Main, it expands and Main2 collapses. Similarly when I hit Main2, it expands and Main collapses.

What I want is, when I hit Main and it opens I want some menu items there. Similarly with Main2. Could you please guide me that how to proceed with this?

Moreover, after expanding sizes of the different stacked panels(Main and Main2) are same. Can I change the sizes(height) and make them as per my requirement, or is it so that in an Accordion menu all the stacked panels will always be of same height. In my case, Main will have only one menu item and Main2 will have 5 menu items. So, if they are of same size then Main will have a lot of blank space.

Thank You !!

roykrish
18 Jan 2012, 2:57 AM
Hi,

I got a way to do that. Inside the stacked panels of accordion I added a 'vbox' layout and added one menu item as one panel into it.

Now, I have a border layout with two regions, 'west' and 'center'. At present I have loaded an accordion layout in the 'west' region and a plain html in the 'center' region.
What I want is whenever I hit any menu Item in the 'west' region, it should load a new view(a separate view.js) in the 'center' region. Could you please guide me, how should I approach this.

For example, I have a view called "MyGrid.js". That contains a Grid. What I want is that when I hit the menu item 'my-grid' in the 'west' region, the view 'MyGrid.js' should be loaded into the center region.

Thank You !!
-Krishnendu

friend
18 Jan 2012, 5:50 AM
A Menu component is typically used in a Toolbar or dockedItems collection, so this isn't really a good fit for use with an Accordion layout.

Instead, consider using an Ext.tree.Panel in the west region of your layout, where user clickable options can be grouped in unique branches of the tree. The tree panel can be dynamically populated from the server-side via JSON, where this will allow you to filter the options (based on user privileges) prior to rendering in the tree.

If you're dead-set on using an Accordion layout, then consider using a collection of Button components in each panel of the Accordion layout. You can set all of the button widths to match the width of your west panel, for a cleaner look.

roykrish
18 Jan 2012, 5:54 AM
Thank You !!

Could you guide me up to some code sample, which will tell me how to add the button components and how could I add event listeners to the buttons, so that with every button click, the content in the "center" region should change.

friend
18 Jan 2012, 6:32 AM
Below is a functional code sample which illustrates what you're after.

DISCLAIMER: I structured this code for clarity/simplicity, by declaring everything in-line. In general, this is a bad practice and I strongly recommend you study the proper MVC techniques for event handling (a Controller and init() method). Also, I still think a Tree Panel is a much better solution for your app's menu, but you wanted buttons, so I coded buttons... :]

Also, note that I only coded a button handler for the first panel in the accordion layout.



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu Test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
Ext.Loader.setConfig({enabled:true});
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'west',
layout: 'accordion',
title: 'Menu',
width: 150,
items: [{
xtype: 'panel',
defaults: {
handler: function(button, eventObject) {
// get a reference to the viewport's center region panel.
var centerRegion = Ext.ComponentQuery.query('viewport panel[region="center"]')[0];

// get a reference to any existing content.
var existingContent = centerRegion.getComponent(0);

// if found, remove it.
if (existingContent != null) {
centerRegion.remove(existingContent);
}

// now add new content, based on clicked button.
if (button.text == 'Users') {
centerRegion.add({
xtype: 'panel',
title: 'Admin User Maintenance',
items: [{
xtype: 'panel',
html: 'User maintenance components shown here.'
}]
});
}
else if (button.text == 'Groups') {
centerRegion.add({
xtype: 'panel',
title: 'Admin Group Maintenance',
items: [{
xtype: 'panel',
html: 'Group maintenance components shown here.'
}]
});
}
},
textAlign: 'left',
width: 150
},
defaultType: 'button',
title: 'Administrative',
items: [{
text: 'Users'
},{
text: 'Groups'
},{
text: 'Scheduling'
}]
},{
xtype: 'panel',
defaults: {
textAlign: 'left',
width: 150
},
defaultType: 'button',
title: 'User Options',
items: [{
text: 'Profile'
},{
text: 'Settings'
}]
}]
},{
xtype: 'panel',
region: 'center',
layout: 'fit',
title: 'Content Area'
}]
});

});
</script>
</head>

<body>
</body>
</html>

roykrish
19 Jan 2012, 9:44 AM
Thank You Friend !!

Your answer did help me immensely. Now, I have started getting things. Thanks again !!

My new problem :-)

I got a little bit of MVC in ExtJs and now the scenario in hand is that - I have a model, view and controller and a json file which is working for me as a data storage.

I am using a Grid in the "center" region of border layout. The Grid is tied up with a model and a store and the store is reading data from a json file.

Now, the problem is that data present in the Grid is huge. I am trying to apply 'pagination' in that Grid. I went through the 'The Grid Component' present in geting started guide at sencha web site.. and I did this..

[1] Put the 'pageSize' and 'totalProperty' in store,
pageSize: 4,
proxy: {
type: 'ajax',
url: 'data/projectList.json',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
}

[2] Modified the static json file like this,
{
"success": true,
"total": 16,
data : [
{1234: 'ccsp', abcd: 'ccspwsfi*1', efgh: 'FI', ijkl: 'FIMT', mnop: 'Web Service' },
{1234: 'cdsp', abcd: 'cdspwsei*1', efgh: 'EIT', ijkl: 'FIMT', mnop: 'Web Service' }
..................
..................

[3] Configure the 'pagingToolbar' in the view file something like this..
................
................
this.columns = [
{header: 'Platform Name', dataIndex: 'platformName', flex: 1},
{header: '1234', dataIndex: '1234', flex: 1},
{header: 'abcd', dataIndex: 'abcd', flex: 1},
{header: 'efgh', dataIndex: 'efgh', flex: 1},
{header: 'ijkl', dataIndex: 'ijkl', flex: 1}
];

this.callParent(arguments);
}

dockedItems: [{
xtype: 'pagingtoolbar',
store: 'com.fimt.asts.paas.projectListStore', // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}]
});


Now, in the 'center' region I am getting the Pagination toolbar but pagination is not working actually. All the 16 rows are showing up. What I want is that as per the pageSize only 4 items should come at once.

Could you guide me here, that what I am doing wrong..

Thank you...

friend
20 Jan 2012, 5:18 AM
Paging doesn't work with a static JSON file. You'll note that the store passes request parameters start and limit. These parameters are meant to be used on the server-side to filter the dataset accordingly.

roykrish
20 Jan 2012, 5:22 AM
Thanks for replying. Now, I see why pagination was not working !!

Btw, this is how my store looks.
---------------------------------------------------------
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
pageSize: 4,
proxy: {
type: 'ajax',
url: 'data/gridData.json',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
}
}

});



I will write a service to return the data. Could you please tell me that how to configure "start" and "limit" params in my Store class.

Thanks again !!

friend
20 Jan 2012, 7:21 AM
No configuration is necessary. When you load your store, it will auto-magically pass parameters start, limit and page.


http://www.sencha.com/forum/image/png;base64,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