PDA

View Full Version : Metagrid inside a Tab panel



toole1
3 Aug 2010, 9:14 AM
Is there someone who would be able to share how you got the metagrid to work inside a tab panel? I have the metagrid working in Ext 3.1, but I can't get it to work inside a tab panel. I found a post back from back on Jan 20th 2009. http://www.sencha.com/forum/showthre...erver&p=275575 (http://www.sencha.com/forum/showthread.php?57694-Retrieve-columns-and-fields-for-grid-from-server&p=275575) that talks about doing this, but does not have any coding details.

I'd appreciate any help anyone can give me.

Condor
4 Aug 2010, 12:48 AM
What exactly doesn't work?

Could it be that you need to configure you TabPanel with deferredRender:false?

toole1
4 Aug 2010, 3:11 AM
Thanks for the reply. I tried setting deferredRender to false, but there was no change in the tab panel. Here is the code I used to create the Metagrid and put it into a tab panel.


Ext.ns('mainGROUP1FGrid');
mainGROUP1FGrid.getMetaGrid = function(config){
return new Ext.ux.grid.MetaGrid(Ext.apply({
clicksToEdit:1,
stripeRows:true,
viewConfig: new Ext.ux.grid.LockingGridView ({ emptyText:"No data to display."}),
url: "vvcall.pgm",
baseParams: {
pgm: "MLPTEST",
action: "display",
selectedName: "GROUP1"
}
}, config));
};
var win = new Ext.Window({
layout: 'fit',
closable: false,
plain: true,
maximized: true,
items: [mainGROUP1FGrid.getMetaGrid({
border: false
})]
});




xtype:"tabpanel",
enableTabScroll:true,
id:"flockTabPanel",
closeable:false,
deferredRender:false,
items:[{
title:"DATA GROUP 1",
id:"GROUP1F",
items:[win]
},{
title:"TEST GROUP 3",
id:"TEST3F",
items:[mainTEST3FGrid]
},{
title:"TEST GROUP 1",
id:"TEST1F",
items:[mainTEST1FGrid]
}]


Originally I did not have the window and just tried to put the Metagrid directly into the tabpanel, but that did not work. I have a simple source that does work for Metagrid with just a window. The error I get "store loadexception: [object Object]. I have checked the data passing back to the Metagrid and it is the same as the simple Metagrid that works. I tried to just put the relevant code in here, since my main program is fairly large.

Condor
4 Aug 2010, 3:15 AM
1. You can't use a window inside a layout. Use a normal Panel (optionally with baseCls:'x-window').
2. Your layout is overnested. The grids should BE the tabpanel items. Those extra panels aren't needed.
3. 'loadexception' means your server is sending back an error or your data can't be read by the reader. Did you check what your server returned (e.g. using the Firebug Net tab)?

toole1
4 Aug 2010, 4:29 AM
I pulled the window out and changed it to a panel. I'm not sure I understand the overnesting. I have multiple tab panels displaying, each with a different grid. The first one is the only one that is a Metagrid at this time. Once I get that one working I plan to change the others to Metagrids also. I checked both the console and net tabs of Firebug and don't see any errors. The response tab in the console shows the correct data being returned, but the Net tab shows nothing in that response tab. The Net tab shows nothing in any of the other response tabs for other data being returned from the server either, but they work just fine. I included what Firebug sees being returned from the server for the Metagrid, sorry about the length. The wierd thing is that this same program on the server is returning the same data to simple Metagrid window and it works just fine. I have attached that code below also. Thanks for taking the time to help a begininning ExtJS programmer. I really appreciate it.



{ "success":true, "metaData":{ "defaultSortable":true, "fields":[ { "name":"co", "mapping":"co", "header":"Company", "align":"center", "hidden":true, "locked":true, "width":60 }, { "name":"loc", "mapping":"loc", "header":"Location", "align":"center", "hidden":true, "locked":true, "width":60 }, { "name":"farmNo", "mapping":"farmNo", "header":"Farm No.", "align":"center", "locked":true, "sortable":true, "width":65 }, { "name":"farmName", "mapping":"farmName", "header":"Farm Name", "align":"left", "sortable":true, "locked":true, "width":245 }, { "name":"barnID", "mapping":"barnID", "header":"Barn ID", "sortable":true, "align":"center", "locked":true, "width":65 }, { "name":"fYear", "mapping":"fYear", "header":"Year", "align":"center", "locked":true, "sortable":true, "width":36 }, { "name":"num", "mapping":"num", "header":"Number", "align":"center", "locked":true, "sortable":true, "width":54 }, { "name":"penID", "mapping":"penID", "header":"Pen ID", "align":"center", "locked":true, "sortable":true, "width":54 }, { "name":"f000000001", "editor":{ "xtype":"numberfield", "maxValue":99999, "allowDecimals":false }, "header":"A Grade Settable Eggs Laid", "mapping":"f000000001", "sortable":true, "align":"center", "tooltip":"Click to sort", "width":180 }, { "name":"f000000002", "editor":{ "xtype":"numberfield", "maxValue":99999, "allowDecimals":false }, "header":"B Grade Settable Eggs Laid", "mapping":"f000000002", "sortable":true, "align":"center", "tooltip":"Click to sort", "width":180 }, { "name":"f000000003", "editor":{ "xtype":"numberfield", "maxValue":99999, "allowDecimals":false }, "header":"Non Settable Eggs Laid", "mapping":"f000000003", "align":"center", "sortable":true, "tooltip":"Click to sort", "width":150 }, { "name":"f000000004", "editor":{ "xtype":"numberfield", "maxValue":99999, "allowDecimals":false }, "header":"A Grade Settable Eggs Received", "mapping":"f000000004", "align":"center", "sortable":true, "tooltip":"Click to sort", "width":200 }, { "name":"f000000005", "editor":{ "xtype":"numberfield", "maxValue":99999, "allowDecimals":false }, "header":"B Grade Settable Eggs Received", "mapping":"f000000005", "align":"center", "sortable":true, "tooltip":"Click to sort", "width":200 }, { "name":"f000000006", "editor":{ "xtype":"numberfield", "maxValue":99999, "allowDecimals":false }, "header":"Non Settable Eggs Received", "mapping":"f000000006", "align":"center", "sortable":true, "tooltip":"Click to sort", "width":160 }, { "name":"f000000007", "editor":{ "xtype":"numberfield", "maxValue":9999, "allowDecimals":false }, "header":"Female Reported Mortality", "mapping":"f000000007", "align":"center", "sortable":true, "tooltip":"Click to sort", "width":145 }, { "name":"f000000008", "editor":{ "xtype":"numberfield", "maxValue":9999, "allowDecimals":false }, "header":"Male Reported Mortality", "mapping":"f000000008", "align":"center", "sortable":true, "tooltip":"Click to sort", "width":130 }, { "name":"f000000009", "editor":{ "xtype":"numberfield", "maxValue":999, "allowDecimals":false }, "header":"High Barn Temp", "mapping":"f000000009", "align":"center", "sortable":true, "tooltip":"Click to sort", "width":110 }, { "name":"f000000010", "editor":{ "xtype":"numberfield", "maxValue":999, "allowDecimals":false }, "header":"Low Barn Temp", "mapping":"f000000010", "align":"center", "sortable":true, "tooltip":"Click to sort", "width":110 }, { "name":"f000000011", "editor":{ "xtype":"timefield" }, "header":"Feeder Open Time", "mapping":"f000000011", "align":"center", "sortable":true, "tooltip":"Click to sort", "width":110 }, { "name":"f000000012", "editor":{ "xtype":"timefield" }, "header":"Feeder Closed Time", "mapping":"f000000012", "align":"center", "sortable":true, "tooltip":"Click to sort", "width":110 }, { "name":"f000000013", "editor":{ "xtype":"numberfield", "maxValue":999.99, "allowDecimals":true, "decimalPrecision":2 }, "header":"Shavings Loads", "mapping":"f000000013", "align":"center", "sortable":true, "tooltip":"Click to sort", "width":100 }, { "name":"f000000014", "editor":{ "xtype":"numberfield", "maxValue":999.99, "allowDecimals":true, "decimalPrecision":2 }, "header":"Feed Inventory", "mapping":"f000000014", "sortable":true, "align":"center", "tooltip":"Click to sort", "width":100 }, { "name":"f000000015", "editor":{ "xtype":"numberfield", "maxValue":999.9, "allowDecimals":true, "decimalPrecision":1 }, "header":"Pounds Feed per Day", "mapping":"f000000015", "sortable":true, "align":"center", "tooltip":"Click to sort", "width":150 } ], "id":"id", "root":"results", "start":0, "limit":18, "successProperty":"success", "totalProperty":"total" },"total": 7,"results":[{"co":1,"loc":"BRIN","farmNo":25,"farmName":"JOE J. GIROD ","barnID":"1 ","fYear":2009,"num":21,"penID":" ","dDate":"2010-04-27","f000000001":2,"f000000002":13,"f000000003":15,"f000000004":15,"f000000005":16,"f000000006":5,"f000000007":0,"f000000008":0,"f000000009":0,"f000000010":0,"f000000011":"00.00.00","f000000012":"23.15.00","f000000013":2.56,"f000000014":0.00,"f000000015":0.0},{"co":1,"loc":"BRIN","farmNo":25,"farmName":"JOE J. GIROD ","barnID":"1 ","fYear":2009,"num":21,"penID":" ","dDate":"2010-04-30","f000000001":2,"f000000002":3,"f000000003":5,"f000000004":6,"f000000005":0,"f000000006":0,"f000000007":0,"f000000008":0,"f000000009":0,"f000000010":0,"f000000011":"00.00.00","f000000012":"00.00.00","f000000013":0.00,"f000000014":0.00,"f000000015":0.0},{"co":1,"loc":"BRIN","farmNo":25,"farmName":"JOE J. GIROD ","barnID":"1 ","fYear":2009,"num":21,"penID":" ","dDate":"2010-05-10","f000000001":2,"f000000002":2,"f000000003":3,"f000000004":3,"f000000005":4,"f000000006":5,"f000000007":0,"f000000008":0,"f000000009":0,"f000000010":0,"f000000011":"00.00.00","f000000012":"00.00.00","f000000013":0.00,"f000000014":0.00,"f000000015":0.0},{"co":1,"loc":"BRIN","farmNo":25,"farmName":"JOE J. GIROD ","barnID":"1 ","fYear":2009,"num":21,"penID":" ","dDate":"2010-05-12","f000000001":2,"f000000002":12,"f000000003":0,"f000000004":0,"f000000005":0,"f000000006":0,"f000000007":0,"f000000008":0,"f000000009":0,"f000000010":0,"f000000011":"00.00.00","f000000012":"00.00.00","f000000013":0.00,"f000000014":0.00,"f000000015":0.0},{"co":1,"loc":"BRIN","farmNo":26,"farmName":"Jerry Girod ","barnID":"1 ","fYear":2009,"num":25,"penID":" ","dDate":"2010-04-27","f000000001":1,"f000000002":1,"f000000003":2,"f000000004":3,"f000000005":0,"f000000006":0,"f000000007":0,"f000000008":0,"f000000009":0,"f000000010":0,"f000000011":"00.00.00","f000000012":"00.00.00","f000000013":0.00,"f000000014":0.00,"f000000015":0.0},{"co":1,"loc":"BRIN","farmNo":26,"farmName":"Jerry Girod ","barnID":"1 ","fYear":2009,"num":25,"penID":" ","dDate":"2010-05-12","f000000001":1,"f000000002":1,"f000000003":0,"f000000004":0,"f000000005":3333,"f000000006":0,"f000000007":0,"f000000008":0,"f000000009":0,"f000000010":0,"f000000011":"00.00.00","f000000012":"00.00.00","f000000013":0.00,"f000000014":0.00,"f000000015":0.0},{"co":1,"loc":"BRIN","farmNo":49,"farmName":"Truman Troyer ","barnID":"1 ","fYear":2009,"num":13,"penID":" ","dDate":"2010-07-16","f000000001":0,"f000000002":0,"f000000003":0,"f000000004":0,"f000000005":0,"f000000006":0,"f000000007":0,"f000000008":1,"f000000009":0,"f000000010":0,"f000000011":"00.00.00","f000000012":"00.00.00","f000000013":0.00,"f000000014":0.00,"f000000015":0.0}]}



<script type="text/javascript">
Ext.apply(Ext, {
isFirebug: (window.console && window.console.firebug)
});
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';
Ext.ns('app');
app.getMetaGrid = function(config){
return new Ext.ux.grid.MetaGrid(Ext.apply({
clicksToEdit:1,
stripeRows:true,
viewConfig: new Ext.ux.grid.LockingGridView ({ emptyText:"No data to display."}),
baseParams: null,

/**
* @cfg {String} url Specify the url to the data object (server side
* script) from which to load data through the HttpProxy.
*/
// url: '/html/mlpbarn.txt',
url: "vvcall.pgm",
baseParams: {
pgm: 'MLPTEST',
action: "display",
selectedName: "GROUP1"

}
}, config));
};

Ext.onReady(function(){
Ext.QuickTips.init();
var win = new Ext.Window({
layout: 'fit',
closable: false,
plain: true,
maximized: true,
items: [app.getMetaGrid({
title: 'Meta Grid Example',
border: false
})]
});
win.show();
});
</script>

Condor
4 Aug 2010, 4:56 AM
But you get a loadexception event! Try attaching a loadexception event handler to the store and see what the reason for the error is (it's probably an error on the client, so you want to examine the last 'arg' parameter).

toole1
4 Aug 2010, 6:03 AM
I checked the last argument and it is telling me that "this.view is null". I tried putting in a view, but I get another error that "this.view.hmenu is null". I don't see where hmenu is, but I did notice that the simple Metagrid did not have a view specified, only a viewConfig. I'm probably missing something obvious.

Condor
4 Aug 2010, 6:15 AM
OK, now we are getting somewhere.

'viewConfig' is supposed to hold a config object. Use the 'view' config option to specify an instantiated view.

toole1
4 Aug 2010, 7:07 AM
I'm really confused. I thought that "viewConfig: new Ext.ux.grid.LockingGridView ({ emptyText:"No data to display."})," set up the configuration so that I can have a locking view and that the view itself is setup when the Metagrid is created. I didn't have to specify a view when I used the window, why would I have to specify one when I use the tab panel instead? I guess I'm not understanding what is really going on with the Metagrid extension.

Condor
4 Aug 2010, 7:09 AM
I don't know the Metagrid extension very well, but I though it only updated the columns of the ColumnModel and did nothing with the view.

toole1
4 Aug 2010, 12:02 PM
That's what I thought too. The viewConfig only sets a message to display if there is no data. That's also why I thought the original test with a simple window worked without the view. Let me know if you might have any other ideas of what might be wrong. Thanks again for taking the time to respond as much as you have.

toole1
10 Aug 2010, 6:21 AM
I tried a simple version of the Metagrid inside a TabPanel instead of a Window. I can't get that to work. I can still get it to work in a Window, but not in a TabPanel.


Ext.ns('app');
app.getMetaGrid = function(config){
return new Ext.ux.grid.MetaGrid(Ext.apply({
clicksToEdit:1,
stripeRows:true,
viewConfig: new Ext.ux.grid.LockingGridView ({ emptyText:"No data to display."}),
baseParams: null,

/**
* @cfg {String} url Specify the url to the data object (server side
* script) from which to load data through the HttpProxy.
*/
// url: '/html/mlpbarn.txt',
url: "vvcall.pgm",
baseParams: {
pgm: 'MLPTEST',
action: "display",
selectedName: "GROUP1"

}
}, config));
};

Ext.onReady(function(){
Ext.QuickTips.init();
var win = new Ext.TabPanel({
renderTo: Ext.getBody(),
closeable:false,
activeTab:0,
maximized: true,
items: [app.getMetaGrid({
title: 'Meta Grid Example',
border: false
})]
});
win.show();
});


With this I get an error that "this.view is null" in the console. If I take out the renderTo, then it show the TabPanel, but no grid is displayed, I just get the bbar with it's controls and no error. Any suggestions for what I might be missing?

Condor
10 Aug 2010, 7:07 AM
1. Do not call win.show(). A TabPanel isn't a window and doesn't need to be shown.
2. You need to give the TabPanel a height and a width, otherwise the grid will be so tiny that you won't see it :)

toole1
10 Aug 2010, 7:17 AM
Sorry, I forgot to remove the win.show(). Setting the width and height did the trick.

toole1
10 Aug 2010, 7:25 AM
I just realized that the locking I was using is not working now. The lock still looks like it is there, but the scrolling does not keep the locked columns on the screen. The scroll bar is for the entire tab panel, instead of for the MetaGrid. Any ideas on what is going wrong?

toole1
26 Aug 2010, 10:57 AM
I think that I figured out that the MetaGrid only works with locking columns when displayed on a Window. I would like to be able to display multiple MetaGrids, just not all at the same time. I would like to have buttons to pick which one I would like to display. I got the this to work, except for some side effects. The buttons in the tbar disappear when I switch to the other window and I have two of the PagingToolbar's in the bbar on one window and none on the other. Any suggestions as to what I am doing wrong?


Ext.ns('app1');
app1.getMetaGrid = function(config){
return new Ext.ux.grid.MetaGrid(Ext.apply({
clicksToEdit:1,
stripeRows:true,
viewConfig: new Ext.ux.grid.LockingGridView ({ emptyText:"No data to display."}),
baseParams: null,
url: "vvcall.pgm",
baseParams: {
pgm: 'MLPTEST',
action: "display",
selectedName: "GROUP1"
}
}, config));
};
Ext.ns('app2');
app2.getMetaGrid = function(config){
return new Ext.ux.grid.MetaGrid(Ext.apply({
clicksToEdit:1,
stripeRows:true,
viewConfig: new Ext.ux.grid.LockingGridView ({ emptyText:"No data to display."}),
baseParams: null,
url: "vvcall.pgm",
baseParams: {
pgm: 'MLPTEST',
action: "display",
selectedName: "TEST1"
}
}, config));
};


var topBar = new Ext.Toolbar({
items: [{
xtype: 'button',
text: 'Data Group 1',
handler: function(){
win2.hide();
win1.show();
},
id:'btnDG1'
},{
xtype: 'tbseparator'
},{
xtype: 'button',
text: 'Data Group 2',
handler: function(){
win1.hide();
win2.show();
},
id:'btnDG2'
}]
});


// var winGroup = new Ext.WindowGroup();

var win1 = new Ext.Window({
title: 'Data Collection Program',
closable: false,
layout: 'fit',
plain: true,
maximized: true,
items: [app1.getMetaGrid({
title: 'Meta Grid Example 1',
border: false,
hidden: false,
})],
tbar:{items: [topBar]}
});

var win2 = new Ext.Window({
title: 'Data Collection Program',
closable: false,
layout: 'fit',
plain: true,
maximized: true,
items: [app2.getMetaGrid({
title: 'Meta Grid Example 2',
border: false,
hidden: false,
})],
tbar:{items: [topBar]},
bbar: PagingToolbar
});

Ext.onReady(function(){
Ext.QuickTips.init();
win1.show();
win2.show();
});