PDA

View Full Version : Subordinate Grids Help



mikosiko
8 Mar 2011, 11:37 AM
Hi y'all

First I must say that I'm totally new to JS and OOP knowledge very limited also, just starting learning a couple weeks ago... so please forgive my errors.

I've been reading examples and the docs for what I'm trying to do... but I reach the point where I don't know how to solve this... I'm totally lost.. that is why I'm asking for a little help.

this is what I'm doing following the "portal" example:
- Display in the portal 2 Grids... one of them is subordinate (or should be.. here is where I need help) of the other.

this is the code that I have so far (very simplified):
- Grid1: defined in grid1.js final line is Ext.extend(SummaryGrid, Ext.grid.GridPanel);
- Grid2: defined in grid2.js final line is Ext.extend(DetailGrid, Ext.grid.GridPanel);
- the code for the portal is (I'm using almost the same as the example)

both grid are displayed correctly in the portal and with the proper data (the first one... I'm hard-coding the second just to display some data... passing some know parameter to the reader)


/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/

Ext.ns('Crew');
Ext.BLANK_IMAGE_URL = '../../../../SENCHA331/resources/images/default/s.gif';

Ext.onReady(function(){

Ext.QuickTips.init();

// create some portlet tools using built in Ext tool ids
var tools = [{
id:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];

/*
* Header Panel
*/
var headerPanel = {
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 50
};

// HERE I USE the 2 DEFINED GRIDS
var Csg = new SummaryGrid();
var Cdg = new DetailGrid();

// AND HERE IS MY PROBLEM.... I've tried a lot of things to load (reload) the second grid depending on parameter but my syntax is incorrect
Csg.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
Ext.Msg.alert('Click', r.data.CrId);

// HOW I NEED TO DO THIS?
Crew.Cdg.DetailDataStore.load({params:{CrId:r.data.CrId}});
}
);

var viewport = new Ext.Viewport({
layout:'border',
items:[
headerPanel
,{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings'
}]
},

{
xtype:'portal',
region:'center',
margins:'35 5 5 0',
items:[{
columnWidth:.42,
style:'padding:5px 0 5px 5px',
items:[{
title: 'Hours Summary'
,layout:'fit'
,tools: tools
,items: Csg // Master Grid
},{
title: 'Another Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.55,
style:'padding:5px 0 5px 5px',
items:[{
title: 'Flight Detail',
layout:'fit',
tools: tools,
items: Cdg // Detail Grid
}]
},{
columnWidth:.33,
style:'padding:10px',
items:[{
title: 'Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
}]

}]
});
});

Could anyone one give me some help/pointer please ... I'll appreciate

walldorff
11 Mar 2011, 8:31 PM
See this (http://www.sencha.com/forum/showthread.php?62827) and this (http://www.sencha.com/forum/showthread.php?57240).

mikosiko
12 Mar 2011, 4:26 PM
thank you for the answer walldorff.... after I posted and searching/studding the documentation I was able to solve the issues that I had... appreciate your answer anyway.

walldorff
12 Mar 2011, 4:48 PM
You're welcome :) Glad you solved it.