PDA

View Full Version : how to display >4 grids in page?



pclovec
9 Mar 2010, 8:55 PM
now i created one page want to show 4 gridpanel in this page. now i use this way
1. created a <div id="girds"></div> in jsp file
2. in js file i created a panel and use layout is column , and each item set columnWidth:0.25 then it can show 4 grids.


var panel = new Ext.Panel({
frame:true,
width:'100%',
autoHeight:true,
layout:'column',
title:'Character Details:',
items:
[{
columnWidth:0.25,
collapsible:true,
items:grid1
listeners: { collapse: mycollapse, expand : myexpand}
},
{
columnWidth:0.25,
collapsible:true,
items:grid2,
listeners: { collapse: mycollapse, expand : myexpand}
}
.....grid3..grid4
]

});

my question:\
1. there have another way to easy to display them . do i really need to created this panel.?

2 if i uses this way .but there is a problem when i click item collapse icon, when collapse is true the title still take (page width*0.25) width , in here i want to it only show collapse icon and take around 50px width.

i tired to handle collapse function and expand function by myself ,
in mycollapse function i call


pnl.setWidth(20);


in myexpand function


pnl.setWidth(div width*0.25) or pnl.setWidth(250);


mycollapse function works , but expand function doesn't work , panel can expand but grid width changed to 20 after myexpand.(when i debug this function i saw grid from normal width change to 20,i don't which function is set width,may be in extjs some js file)

do i miss something ? thanks for you adivce.

thanks
===============================================================
total i want to one page show 4 grid and each grid collapse = true the title or icon only take 20px width.
==================================================================

maquejp
9 Mar 2010, 11:37 PM
I suppose that the "collabise" is a misstyping... You should use the [CODE]

pclovec
10 Mar 2010, 7:37 AM
:">:">

pclovec
10 Mar 2010, 2:28 PM
any one can help me looking at. thanks very much


viewpanel = new Ext.Panel({
width:Ext.get("orgGrid").getComputedWidth(),
height: 580,
layout: "column",

split:true,
frame:true,
forceLayout: true,
id :"viewpanel",
items:
[{
collapsible:true,
columnWidth:.2,
items : splitgrid,
listeners: {
collapse: gridcollapsehandler,
expand: gridpandhandler
}
},
{
columnWidth:.2,
collapsible:true,
collapsed: false,
items : mastergrid

},
{
columnWidth:.3,
collapsible:true,
items : ref1grid

},
{
columnWidth:.3,
collapsible:true,
items : ref2grid
}

]
});

function gridcollapsehandler(pnl) {
pnl.remove(splitgrid,true);
pnl.setWidth(20);


}
function gridpandhandler(pnl) {
pnl.setWidth(Ext.get("orgGrid").getComputedWidth()*0.2)
pnl.add(splitgrid);
pnl.doLayout();
}

maquejp
10 Mar 2010, 11:18 PM
var grid1 = new Ext.grid.GridPanel({
id: 'grid1',
title:'grid1_title',
...
collapsible:true,
collapsed:true
});
var panel = new Ext.Panel({
frame:true,
width:'100%',
autoHeight:true,
layout:'column',
title:'Character Details:',
items:
[grid1,grid2,grid3,grid4]});

For the size of the grid title, you should looks at the style...