PDA

View Full Version : Loading simple Grid in a nested Layout



goremo
9 Apr 2010, 10:59 AM
Can anyone assist on why this simple grid is not loading on to the tab nested in a tab?

Below is the script inside the Ext.onReady...


/////START SIMPLE TABLE////////////////////////////////////
//simple static table (based on this tutorial: http://www.java2s.com/Code/JavaScript/Ext-JS/Staticdatagrid.htm)

var arrayData = [
['J', 'MD'],
['A', 'VA'],
['S', 'DC'],
['M', 'DE'],
['B', 'NJ'],
['N', 'CA']
];

var store = new Ext.data.ArrayStore({
data : arrayData,
autoLoad : true,
fields : ['fullName', 'state']
});

var cm = new Ext.grid.ColumnModel([
{
header : 'Full Name',
sortable : true,
dataIndex : 'fullName'
},
{
header : 'State',
dataIndex : 'state'
}
]);

var gridView = new Ext.grid.GridView();
var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
})

var grid_01 = new Ext.grid.GridPanel({
title : 'My Grid',
store : store,
view : gridView,
colModel : cm,
selModel : selModel,
//contentEl : 'grid_div'
});

//store.load();

/////END SIMPLE TABLE////////////////////////////////////////////////




var item1 = new Ext.Panel({
title: 'VerticalMenu_01',
contentEl: 'dummytreediv',

});

var item2 = new Ext.Panel({
title: 'VerticalMenu_02',
contentEl: 'searchdiv'
});

/////////////CREATE A PANEL TO LOAD GRID WITHIN A TAB PANEL/////////
var item3 = new Ext.Panel({
title: 'Load Grid'
//contentEl: 'centerdiv'
,items:[{
xtype:'tabpanel'
,defaults:{layout:'fit'}
,activeItem:0
,enableTabScroll:true
,items: [{
title:'Tab_01'
,id:'firsttab'
,iconCls:'icon-info'
,bodyStyle:'font-family:sans-serif;font-size:12px;padding:10px'
,items: [grid_01] //Nest Grid
//,html: '<div id=grid_div></div>'
}]
}]
});



//////////////CREATE LAYOUT FOR THE WHOLE PAGE//////////////////
var viewport = new Ext.Viewport({
layout: 'border',
items: [
new Ext.Panel({
region: 'west',
width: 210,
margins: '5 0 5 5',
split: true,
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [item1, item2],
onResize: function() {
Ext.Panel.prototype.onResize.apply(this, arguments);
this.items.each(function(i) {
if (i.rendered) {
var height = this.body.getHeight(true);
i.setHeight(height);
var treediv = Ext.getCmp('actualtreediv');
if(treediv)
treediv.setHeight(height);
}
}, this);
}

}),
new Ext.Panel({
margins: '5 5 5 0',
region: 'center',
layout: 'fit',
items: [item3]
})
]
});



//////////SAMPLE TREE ON THE VERTICAL MENU/////////////////////
var tree = new Ext.tree.TreePanel({
el: 'actualtreediv',
autoScroll: true,


root: new Ext.tree.TreeNode({
text: 'Root'
})
});
tree.render();
tree.getRootNode().expand();
//EO onRead()



Below is part of screen shot showing how the grid is loading withot data and a text file containing the source code of the whole html page

jay@moduscreate.com
9 Apr 2010, 11:11 AM
that developer has no clue what he's doing if he's setting a fit layout on a gridpanel

jay@moduscreate.com
9 Apr 2010, 11:13 AM
"that developer" = whomever is posting those examples on that site.

goremo
9 Apr 2010, 11:41 AM
jgarcia@tdg-i.com, I notice you have a book on Ext js. I am new to Ext and I believe this is a forum for Ext help. Kindly assist if you have an answere to the question. I removed the fit layout on a gridpanel and the grid still wont load.

jay@moduscreate.com
9 Apr 2010, 11:43 AM
item3 needs a fit layout

don't mix content_el and items in a panel.

jay@moduscreate.com
9 Apr 2010, 11:43 AM
new Ext.Panel({
margins: '5 5 5 0',
region: 'center',
layout: 'fit',
contentEl: 'centerdiv',
items: [item3]
})

should look like


new Ext.Panel({
margins: '5 5 5 0',
region: 'center',
layout: 'fit',
items: [item3]
})


That said, please post properly formatted code in the future.

goremo
9 Apr 2010, 11:56 AM
I have implemented the amendments you suggested by removing the line contentEl: 'centerdiv'. The grid is still not loading.
Code formating advice noted.

jay@moduscreate.com
9 Apr 2010, 12:00 PM
////START SIMPLE TABLE//////////////////////////////////////////////////////////////
//Start simple static table (based on this tutorial: http://www.java2s.com/Code/JavaScrip...icdatagrid.htm)
var arrayData = [
['J', 'MD'],
['A', 'VA'],
['S', 'DC'],
['M', 'DE'],
['B', 'NJ'],
['N', 'CA']
];

var store = new Ext.data.ArrayStore({
data: arrayData,
fields: ['fullName', 'state']
});

var cm = new Ext.grid.ColumnModel([{
header: 'Full Name',
sortable: true,
dataIndex: 'fullName'
},
{
header: 'State',
dataIndex: 'state'
}]);

var gridView = new Ext.grid.GridView();
var selModel = new Ext.grid.RowSelectionModel({
singleSelect: true
})

var grid_01 = new Ext.grid.GridPanel({
title: 'My Grid',
// layout: 'fit',
store: store,
view: gridView,
colModel: cm,
selModel: selModel
});

/////END SIMPLE TABLE///////////////////////////////////////////


var item1 = new Ext.Panel({
title: 'VerticalPanel_01',
contentEl: 'dummytreediv',

});

var item2 = new Ext.Panel({
title: 'VerticalPanel_02',
contentEl: 'searchdiv'
});

/////////////CREATE A PANEL TO LOAD GRID WITHIN A TAB PANEL//////////
var item3 = new Ext.Panel({
title: 'Load Grid'
//contentEl: 'centerdiv'
,
items: [{
xtype: 'tabpanel',
defaults: {
layout: 'fit'
},
activeItem: 0,
enableTabScroll: true,
items: [{
title: 'Tab_01',
id: 'firsttab',
iconCls: 'icon-info',
bodyStyle: 'font-family:sans-serif;font-size:12px;padding:10px',
items: [grid_01] //Nest Grid
}]
}]
});

//////////////CREATE LAYOUT FOR THE WHOLE PAGE/////////////////
var viewport = new Ext.Viewport({
layout: 'border',
items: [
new Ext.Panel({
region: 'west',
width: 210,
margins: '5 0 5 5',
split: true,
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [item1, item2],
onResize: function () {
Ext.Panel.prototype.onResize.apply(this, arguments);
this.items.each(function (i) {
if (i.rendered) {
var height = this.body.getHeight(true);
i.setHeight(height);
var treediv = Ext.getCmp('actualtreediv');
if (treediv) treediv.setHeight(height);
}
}, this);
}

}), new Ext.Panel({
margins: '5 5 5 0',
region: 'center',
layout: 'fit',
//contentEl: 'centerdiv',
items: [item3]
})]
});

//////////SAMPLE TREE ON THE VERTICAL MENU////////////////////
var tree = new Ext.tree.TreePanel({
el: 'actualtreediv',
autoScroll: true,


root: new Ext.tree.TreeNode({
text: 'Root'
})
});
tree.render();
tree.getRootNode().expand();
//EOF

jay@moduscreate.com
9 Apr 2010, 12:00 PM
add autoLoad : true to the array store

goremo
9 Apr 2010, 12:19 PM
Even after adding the autoLoad : true to the array store, the grid still won't load.

jay@moduscreate.com
9 Apr 2010, 5:59 PM
Pop it out to a window - does it still "not" load?

goremo
9 Apr 2010, 9:53 PM
Pop it out to a window - does it still "not" load?

I tested the the grid on a window before trying it inside a viewport. As a matter of fact grids based on several tutorials could not load this way (plus other options I tried.).

I have an ERP system I built on vb.net/MSSQL and I have looked at ExtJs is currently testing how to use it for the GUI.

Even though I am experienced developer, I am new to Ext Js. I notice you are an expert... I am even currently studying some of your work on Ext Js. I am convinced you can pin point what is wrong with the script.

goremo
10 Apr 2010, 6:59 AM
The table had been loading all along but was masked out by the tab panel. In the item3 configuration (shown below), when the height(highlighted in red) is set to say 200, the data shows.

The question is now what configuration can be used for it to fit the tab panel. layout: 'fit' is not working here. Kindly guide.

Jay, your screen cast on Data Stores and GridPanels is very enlightening.



var item3 = new Ext.Panel({
title: 'Load Grid'
//contentEl: 'centerdiv'
,items:[{
xtype:'tabpanel'
//,defaults:{layout:'fit'}
,activeItem:0
,enableTabScroll:true
,items: [{
title:'Tab_01'
,id:'firsttab'
,height: 200
//,layout: 'fit'
,iconCls:'icon-info'
,bodyStyle:'font-family:sans-serif;font-size:12px;padding:10px'
,items: [grid_01] //Nest Grid
//,html: '<div id=grid_div></div>'
}]
}]
});

jay@moduscreate.com
10 Apr 2010, 7:04 AM
Glad you were able to take something away. You should not have to set the height of the grid panel.

Please repost your current code.

goremo
10 Apr 2010, 7:46 AM
Below is the working script that goes to Ext.onReady - but the height setting does't seem right. Under the config for item3, I have highlighted the height : 200 in red. When the setting is removed, the tab panel seem to retain minimum height and there by masking the grid out.

There must be a way of fitting it in the tab panel. layout: 'fit' does not seem to work.



/////START SIMPLE TABLE////////////////////////////////////

var arrayData = [
['J', 'MD'],
['A', 'VA'],
['S', 'DC'],
['M', 'DE'],
['B', 'NJ'],
['N', 'CA']
];

var store = new Ext.data.ArrayStore({
data : arrayData,
autoLoad : true,
fields : ['fullName', 'state']
});

var cm = new Ext.grid.ColumnModel([
{
header : 'Full Name',
sortable : true,
dataIndex : 'fullName'
},
{
header : 'State',
dataIndex : 'state'
}
]);

var gridView = new Ext.grid.GridView();
var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
})

var grid_01 = new Ext.grid.GridPanel({
//title : 'My Grid',
store : store,
height : 200,
view : gridView,
colModel : cm,
selModel : selModel,
//contentEl : 'grid_div',
loadmask : true,
viewConfig : {
forcefit : true
}
});

//store.load();

/////END SIMPLE TABLE////////////////////////////////////////////////




var item1 = new Ext.Panel({
title: 'VerticalMenu_01',
contentEl: 'dummytreediv',

});

var item2 = new Ext.Panel({
title: 'VerticalMenu_02',
contentEl: 'searchdiv'
});

/////////////CREATE A PANEL TO LOAD GRID WITHIN A TAB PANEL/////////
var item3 = new Ext.Panel({
title: 'Load Grid'
//contentEl: 'centerdiv'
,items:[{
xtype:'tabpanel'
//,defaults:{layout:'fit'}
,activeItem:0
,enableTabScroll:true
,items: [{
title:'Tab_01'
,id:'firsttab'
,height: 200
//,layout: 'fit'
,iconCls:'icon-info'
,bodyStyle:'font-family:sans-serif;font-size:12px;padding:10px'
,items: [grid_01] //Nest Grid
//,html: '<div id=grid_div></div>'
}]
}]
});



//////////////CREATE LAYOUT FOR THE WHOLE PAGE//////////////////
var viewport = new Ext.Viewport({
layout: 'border',
items: [
new Ext.Panel({
region: 'west',
width: 210,
margins: '5 0 5 5',
split: true,
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [item1, item2],
onResize: function() {
Ext.Panel.prototype.onResize.apply(this, arguments);
this.items.each(function(i) {
if (i.rendered) {
var height = this.body.getHeight(true);
i.setHeight(height);
var treediv = Ext.getCmp('actualtreediv');
if(treediv)
treediv.setHeight(height);
}
}, this);
}

}),
new Ext.Panel({
margins: '5 5 5 0',
region: 'center',
layout: 'fit',
items: [item3]
})
]
});



//////////SAMPLE TREE ON THE VERTICAL MENU/////////////////////
var tree = new Ext.tree.TreePanel({
el: 'actualtreediv',
autoScroll: true,


root: new Ext.tree.TreeNode({
text: 'Root'
})
});
tree.render();
tree.getRootNode().expand();

jay@moduscreate.com
10 Apr 2010, 7:50 AM
item3 should use a fit layout, that would fix the height problem.

Please use http://jsbeautifier.org and normalize your javascript before posting in the future. It's so hard to read that :(

goremo
10 Apr 2010, 8:08 AM
Thanks a lot Jay. The script is now OK. You've been a great help. There is also a lot to learn from your site.