PDA

View Full Version : the reconfigure method of the GridPanel.


m4eclipse
9 Oct 2010, 1:58 AM
In my application I want to make several GridPanel, and then put them to a TabPanel,however

Someone told me that if too many GridPanels are displayed in on web page, it will cause a Performance problem,the response of the page maybe go to slow.

So I tried to use just one GridPanel instance:


var store1=new Ext.data.JsonStore(.....);
var colM1=new Ext.grid.columnModel(....);


var store2=new Ext.data.JsonStore(.....);
var colM2=new Ext.grid.columnModel(....);


var commonGridPanel=new Ext.grid.GridPanel({store:store1,cl:colM1,viewConfig: {forceFit: true}});

var tabs2 = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
plain:true,
defaults:{autoScroll: true},
items:[{
id:1,
title: 'Tab01',
listeners: {activate: handleActivate}
},{
id:2,
title: 'Tab02',
listeners: {activate: handleActivate}
},
//Here I have tried this:items[commonGridPanel,commonGridPanel,commonGridPanel],but it doesnot work.
]
});

function handleActivate(tab){
tab.removeAll();
var id=tab.getid();
if(id==1){
commonGridPanel.reconfigure(store1,colM1);
} else if(id==2){
commonGridPanel.reconfigure(store2,colM2);
}
tab.add(commonGridPanel);
tab.doLayout();
}


So I wonder if this is a good manner?

Also I meet some problems when using this manner:

1)From the api I know "certain existing settings may become invalidated",so the view config:forceFit=true does not work when the first time I open the page.
That's to say how to reset the gridveiw after call the reconfigure method of the GridPanel?

2)When I click the tabs of the TabPanel,my page will scrolled to top automaticly,since I found that the link of the tab title is "http://host:port/path/#",so I wonder if this is the reason?

3)The size of the GridPanel and its parent---the TabPanel.

Right now, I set them with the same size,however what's going on is that there are two scroll bars at the sametime,one for the gridPanel, and one for the TabPanel,
so is there a good manner to set the size of each? I just want the gridpanel fit for the TabPanel.
I tried to set the "autoheight=true" for the gridPanel, if so,problem 2 will occur.

Any ideas ,guys?
Condor
9 Oct 2010, 2:22 AM
Put the tabpanel and the grid together into a container, e.g.

var store1 = new Ext.data.ArrayStore({
data: [
[1, 'One'],
[2, 'Two'],
[3, 'Three']
],
fields: ['value', 'text']
});
var colModel1 = new Ext.grid.ColumnModel({
columns: [
{header: 'Value', dataIndex: 'value'},
{header: 'Text', dataIndex: 'text'}
]
});
var store2 = new Ext.data.ArrayStore({
data: [
['Red', '#ff0000'],
['Green', '#00ff00'],
['Blue', '#0000ff']
],
fields: ['color', 'value']
});
var colModel2 = new Ext.grid.ColumnModel({
columns: [
{header: 'Color', dataIndex: 'color'},
{header: 'Value', dataIndex: 'value'}
]
});

var grid = new Ext.grid.GridPanel({
flex: 1,
store: [],
columns: [],
viewConfig: {forceFit: true}
});

var tabPanel = new Ext.TabPanel({
height: 25,
defaultType: 'box',
items: [{
title: 'Numbers',
store: store1,
colModel: colModel1
},{
title: 'Colors',
store: store2,
colModel: colModel2
}],
listeners: {
tabchange: function(tp, p) {
grid.reconfigure(p.store, p.colModel);
}
}
});

var container = new Ext.Container({
layout: 'vbox',
layoutConfig: {align: 'stretch'},
width: 800,
height: 200,
items: [tabPanel, grid]
}).render(Ext.getBody());
m4eclipse
10 Oct 2010, 2:13 AM
Thanks for yor suggestion.
Is there any problems in the codes you give me? I tried to run it ,however I got the errors. I have tried to check everything but can not make it work.
This is the test.html I used :


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TTT</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="test.js"></script>

</head>
<body>
</body>
</html>


BTW, from your codes, it seems that , the TabPanel does not put the grid panel in its tabs,here we just use its tab event to change the gridpanel's store and something else. Isn't it?
Also , in this coeds, three grdiPanel are created, two in the TabPanel,and one is created Explicitly,so go to my first question--- Using too many gird panel in one page will cause the preformence problem?
Condor
10 Oct 2010, 7:59 AM
1. Did you try my code inside Ext.onReady()?
2. Which Ext version are you using?
m4eclipse
10 Oct 2010, 10:08 PM
1. Did you try my code inside Ext.onReady()?
Oh, my fault, I do not add them to the onready method,now it works. Thanks

2. Which Ext version are you using?
I am using ext3.2.1,.

Well, I want to know how many gridpanel is created in the example? one or three?

For example:



var tabPanel = new Ext.TabPanel({
......
items: [{
title: 'Numbers',
store: store1,
colModel: colModel1 },{
title: 'Colors',
store: store2,
colModel: colModel2 }],});
Does each item is a new created gridpanel?

If not, how does this code work:


listeners: {
tabchange: function(tp, p) {
grid.reconfigure(p.store, p.colModel);
} }
If the p is not a grid, how to get its store and colModel.
Condor
10 Oct 2010, 10:19 PM
The tabs are just plain BoxComponents, so they don't really have 'store' and 'colModel' properties. I only put them there to know how to reconfigure the grid when a different tab is selected.

(in the example 'p' is the current tab item = the boxcomponent in which I specified a store and colModel to use for the grid)
m4eclipse
12 Oct 2010, 1:29 AM
Thanks, I got it . That's to say we can add extra configs to the components of ext, then use it .

BTW, any way to change the default activate model(mouse click) of the tabpanel to mouse over?
Condor
12 Oct 2010, 1:40 AM
BTW, any way to change the default activate model(mouse click) of the tabpanel to mouse over?

Only by extending TabPanel to add a mouseover event handler on the strip.
m4eclipse
12 Oct 2010, 2:05 AM
Maybe I mislead you. Not change the default model, just add the "mouse over" model, that's to say I can activate the tab by click or mouse over, so the only way is extending the tabpanel?
Since extending the ext component is so difficult for me , I found no dos about extending about ext 3.2