PDA

View Full Version : trying to add grid to layout example



shankar8rajah1
21 Oct 2013, 1:16 PM
I have the following layout which I took from the following example: http://dev.sencha.com/deploy/ext-4.0.0/examples/window/layout.html

Trying to replace the tabpanel with a grid I created, but nothing shows up.

The code I have for the grid is the following:

var grid = Ext.create('Ext.ux.LiveFilterGridPanel', { border: false,
indexes:['name','service_group','azul_zvm_version','azul_zst_version', 'host_tech','ait_num','app_nme','data_center','instances'],
store: store,
columns: createHeaders(9),
loadMask: true,
features: [filters],
bbar: Ext.create('Ext.Toolbar')
});


// add some buttons to bottom toolbar just for demonstration purposes
grid.child('[dock=bottom]').add([
'->',
{
text: 'Clear Filter Data',
handler: function () {
grid.filters.clearFilters();
}
}
]);

And I am trying to replace the tab panel in the following I got from the above example website:

var win = Ext.create('widget.window', {
title: 'Layout Window',
closable: true,
closeAction: 'hide',
//animateTarget: this,
width: 600,
height: 350,
layout: 'border',
bodyStyle: 'padding: 5px;',
items: [{
region: 'west',
title: 'Navigation',
width: 200,
split: true,
collapsible: true,
floatable: false
}, {
region: 'center',
xtype: 'grid',
items: grid,
width: 400,
title: 'Capacity',
collapsible: true,
floatable: false,
split: true
}]
}).show();

I get the following error: TypeError: c is undefined. Is the way I am adding it wrong?

Farish
22 Oct 2013, 12:25 AM
please use the CODE tags for your code.

I would like to refer you to the documentation of border layout (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Border). The center region shouldn't be assigned any fixed height or width; it takes up the remaining space left over by the other regions.

Remove as much of the code as you think isnt essential and then see if the error still occurs. The columns (what is their structure) and some other details aren't visible in the code you posted.

shankar8rajah1
22 Oct 2013, 9:05 AM
var createHeaders = function (finish, start) {
var columns = [{
dataIndex: 'name',
text: 'Name',

}, {
dataIndex: 'service_group',
text: 'Service Group',

}, {
dataIndex: 'azul_zvm_version',
text: 'Azul ZVM Version',

}, {
dataIndex: 'azul_zst_version',
text: 'Azul ZST Version',

}, {
dataIndex: 'host_tech',
text: 'Host Tech',

}, {
dataIndex: 'ait_num',
text: 'AIT Num',

}, {
dataIndex: 'app_name',
text: 'App Name',

},{
dataIndex: 'data_center',
text: 'Data Center',

},{
dataIndex: 'instances',
text: 'Instances',

}];
return columns.slice(start || 0, finish);
};


I have pasted the column structure. I should mention that I added the grid to a window like below which works fine:

var win = Ext.create('Ext.Window', {
title: 'Capacity',
height: 400,
width: 700,
maximizable: true,
layout: 'fit',
items: grid
}).show();

I took out the width, but still get the same error. Is my format for adding the grid correct?

Farish
22 Oct 2013, 9:15 AM
you have not specified a store for your grid. If you want to use the grid which you create at the top, you should specify region in it too and just add grid (as a variable) in the items for your border layout panel. (without adding a new item with grid as xtype).

shankar8rajah1
22 Oct 2013, 10:45 AM
I have a store for my grid, I just didn't paste it in.



var grid = Ext.create('Ext.ux.LiveFilterGridPanel', { border: false, region: 'center', indexes:['name','service_group','azul_zvm_version','azul_zst_version', 'host_tech','ait_num','app_nme','data_center','instances'], store: store, columns: createHeaders(9), loadMask: true, features: [filters], bbar: Ext.create('Ext.Toolbar') });

I added the region in the grid.

And then added the grid as a variable:


var win = Ext.create('widget.window', { title: 'Layout Window', closable: true, closeAction: 'hide', //animateTarget: this, width: 600, height: 350, layout: 'border', bodyStyle: 'padding: 5px;', items: [{ region: 'west', title: 'Navigation', width: 200, split: true, collapsible: true, floatable: false }, { grid }] }).show();

But I got an error:

SyntaxError: invalid object initializer





}, {




How do I add the grid as a varaible?

shankar8rajah1
24 Oct 2013, 5:32 AM
got it to work, thanks!