[2.x] Ext.ux.Andrie.pPageSize (dynamic page sizer)

[andrei.neculau]

* This plugin is the new-comer after Ext.ux.grid.PageSizer (http://extjs.com/forum/showthread.php?t=16811) (not developed by me)

To summarize, this plugin adds a ComboBox (actually it will use Ext.ux.Andrie.Select (http://extjs.com/forum/showthread.php?t=16841) if available) to a PagingToolbar that will change its pageSize used for the controlled component (grid).

What is different about this implementation is that it changes the store (the items shown in the list) according to the last selected value. Variations of this value (+ or -) can be adjusted.

Live Demo available here (http://www.andrei.neculau.home.ro/extjs2/ux.Andrie.pPageSize/pPageSize_test.htm). Testcase is included in the ZIP file (please note that the example uses the Ext forum API).

-
[GMT 10:31 Nov. 6] - Updated to v0.1.1 (important fix regarding the start of the cursor when changing pageSize)
[GMT 10:10 Nov. 10] - Updated to v0.2 (smarter changePageSize function)
[GMT 21:27 Dec. 24] - Updated to v0.3 (incorporated suggestions from mjoksa and kieren.johnson - thanks!)
Thanks to all the 160+ downloaders/supporters!
[GMT 20:27 Dec. 27] - Updated to v0.4 (added comboCfg config object and erased prioritization of Ext.ux.Andrie.Select)
[GMT 9:20 Dec. 31] - Updated to v0.5 (improved selection)
[GMT 17:07 Jan. 3] - Updated to v.06 (fixed setPageSize bug)

[anjelika]

Salut ;)
Nice addon but it does not seem to work when you select more than 50 items per page? (even if you select 50+ it only displays 50, at least that's what is says "Displaying topics 1 - 50 of 16317").
I am talking about your demo page, didn't tried this on my own yet, but nice addon, indeed.
=D>

[galdaka]

Same problem. View Image.

But Excellent widget!!

[anjelika]

Sorry, my bad...I just saw in your demo "IMPORTANT ! The Ext Forum API used by the grid will always return no more than 50 items."
Is there a work-around for this?

[Animal]

Very nice work.

Just a suggestion...

If you set the page size less that its current value, it should not reload the page, just change the limit value for the next paging call to Store, and remove the excess records from the Store.

First suspendEvents, then remove the excess records from the Store, then resumeEvents, then fire datachanged.

[andrei.neculau]

@anjelika & galdaka - anjelika's second post speaks the truth. It's an API thing, nothing related to the plugin. Workaround - ExtJS team would need to change the limit, but I think it has a good purpose - safety measure against server overload.

@animal - nice suggestion, though I will have to do some tricks probably. The situation that I'm thinking of is this: if you have set 20 items per page, and you are on page 2... then you select 5 items per page.. then I will need to recalculate the current page also.. it would be page 5, and not 2.. but that's piece of cake. I will see about it tomorrow. Thanks for the suggestion

[andrei.neculau]

Actually - why wait for tomorrow, when you can do it today? :) Please upgrade to v0.2

@animal - thanks not only for the suggestion, but also for the suspend-resume events. It wouldn't have crossed my mind from the first shot.

[mjoksa]

I love your pageSize extension.
10x

[mjoksa]

As I said once, this extension made my day.
I made only one change - i added option to control if I want dynamic page sizes or just one fixed in code. So, here is my changes (I hope you would implement them in new version):

---- Changes in config options ------------------------------
/**
* @cfg {String} dynamicVariations
* True to use dynamic variations for page size
*/
dynamicVariations: false,
/**
* @cfg {Array} variations
* Variations used for determining pageSize options
*/
variations: [[5], [10], [20], [50], [100], [200], [500], [1000]],
-----------------------------------------------------------
---- Changed updateStore function -------------------------
//private
updateStore: function(){
var middleValue = this.pagingToolbar.pageSize,
start;
middleValue = (middleValue>0)?middleValue:1;
this.sizes = [];
var v = this.variations;
for (var i=0, len=v.length; i<len; i++){
this.addToStore(middleValue - v[v.length-1-i]);
}
this.addToStore(middleValue);
for (var i=0, len=v.length; i<len; i++){
this.addToStore(middleValue + v[i]);
}

if(this.dynamicVariations)
{
this.combo.store.loadData(this.sizes);
}
else
{
this.combo.store.loadData(this.variations);
}
this.combo.setValue(this.pagingToolbar.pageSize);
},

10x again for this extension

[kieren.johnson]

Thank you for your work on this extension. It is a very handy tool for paging grids.

I have defaulted most of my grids to have 15 rows per page, so I added 15 as an option to the variations array in your extension:

variations: [5, 10, 15, 20, 50, 100],

However after this change when I look at the toolbar it shows:

5, 10, 15, 20, 25, 30, 35, 65, 115

Is there a way to stop this happening so that I only see the variations I have specified?

Many thanks,
Kieren

[mjoksa]

@ kieren.johnson
Just look at my post above...
;)

[sugen]

HI Frends:

what can i do ..?who can help me ?
3277

this is my code:

Ext.onReady(function(){
var ds = new Ext.data.JsonStore({
url: 'data/pro_approve.txt?',
root: 'objList',
fields: ['partid', 'supplier','remark','status', 'agent']
});


var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
header: "partid",
dataIndex: 'partid',
width: 420
},{
header: "supplier",
dataIndex: 'supplier',
width: 100
},{
header: "remark",
dataIndex: 'remark',
width: 70
},{
header: "agent",
dataIndex: 'agent',
width: 150
}]);

// by default columns are sortable
cm.defaultSortable = true;

var grid = new Ext.grid.GridPanel({
el:'grid-ct',
width:900,
height:200,
store: ds,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
loadMask: true,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:false
},
bbar: new Ext.PagingToolbar({
plugins:new Ext.ux.Andrie.pPageSize(),
pageSize: 25,
store: ds,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
grid.render();
ds.load({params:{start:0, limit:8, forumId: 4}});
});

[dima]

HI Frends:

what can i do ..?who can help me ?
3277

this is my code:

Ext.onReady(function(){
var ds = new Ext.data.JsonStore({
url: 'data/pro_approve.txt?',
root: 'objList',
fields: ['partid', 'supplier','remark','status', 'agent']
});


var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
header: "partid",
dataIndex: 'partid',
width: 420
},{
header: "supplier",
dataIndex: 'supplier',
width: 100
},{
header: "remark",
dataIndex: 'remark',
width: 70
},{
header: "agent",
dataIndex: 'agent',
width: 150
}]);

// by default columns are sortable
cm.defaultSortable = true;

var grid = new Ext.grid.GridPanel({
el:'grid-ct',
width:900,
height:200,
store: ds,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
loadMask: true,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:false
},
bbar: new Ext.PagingToolbar({
plugins:new Ext.ux.Andrie.pPageSize(),
pageSize: 25,
store: ds,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
grid.render();
ds.load({params:{start:0, limit:8, forumId: 4}});
});

How you control page count? if need update ds after grid init? in this sample when you click next page ds.load dont't contain params and server side code no get params [start ,limit,...]

[sugen]

How you control page count? if need update ds after grid init? in this sample when you click next page ds.load dont't contain params and server side code no get params [start ,limit,...]

oh~..you are right ...but i don't know how to change it ..can you say nicety about it ?
thank you..~~;)

[dima]

oh~..you are right ...but i don't know how to change it ..can you say nicety about it ?
thank you..~~;)
I'm looking solution for this promblem if you find solution please to write my please:-? Animal say

I think he means that the params he passed in the load() call do not get passed by the PagingToolbar.
http://extjs.com/deploy/dev/docs/?cl...ber=baseParams

[dima]

function setupDataSource(){ //start setup ds
if(!ds)
{
var startData = Ext.get('fData').dom.value;
var endData = Ext.get('tData').dom.value;
var type = Ext.get('typeRep').dom.value;


ds = new Ext.data.Store({
url: 'genxml.php',
// autoLoad:true,
reader: new Ext.data.XmlReader({
record: 'Item',
totalRecords: "results",
id: 'ID'
},[{name:'a1'},{name:'a2'},{name:'a3'},{name:'a4'}])
});
ds.on('loadexception', function(){alert("load exception")});
ds.on('load',reloadBaseParam,this);
ds.load({params:{start:0, limit:23,from:startData,to:endData,type:type}});
}
else
{
var startData = Ext.get('fData').dom.value;
var endData = Ext.get('tData').dom.value;
var type = Ext.get('typeRep').dom.value;

ds.reader = new Ext.data.XmlReader({record: 'Item',id: 'ID',totalRecords: "results"},[{name:'a1'},{name:'a2'},{name:'a3'},{name:'a4'}]);
ds.proxy = new Ext.data.HttpProxy({url: 'genxml.php'});
ds.reload({params:{start:0, limit:23,from:startData,to:endData,type:type}});
}
return ds;
} // end setup ds
function reloadBaseParam(obj)
{
// alert(ds.getTotalCount());
grid.getView().refresh();

var startData = Ext.get('fData').dom.value;
var endData = Ext.get('tData').dom.value;
var type = Ext.get('typeRep').dom.value;


ds.baseParams.from = startData;
ds.baseParams.to = endData;
ds.baseParams.type = type;
// ds.reload({params:{start:0, limit:23,from:startData,to:endData,type:type}});// if you create avto update grid
}

[sugen]

I'm looking solution for this promblem if you find solution please to write my please:-? Animal say

thank you Dima,i think i have looked for the solution.but your .....i don't know how to use .becuase me leaning for java.no php.so i can't catch you meaning.so i'm so so sorry for this..

[andrei.neculau]

bump - plugin updated to 0.3

@dima&sugen - I suggest you do a better job at reading about Ext. You "control" what values PHP, or JAVA, or any other server-side language will return by reading the parameter START and LIMIT. You do not need any extra FROM and TO.

[aparajita]

Fantastic plugin! I would like to humbly propose one enhancement: the ability to specify the combo box class, something like this:

new Ext.ux.Andrie.pPageSize({ comboClass: Ext.ux.form.SelectBox })

Then you add this as a default value after variations, above the init method:

comboClass: Ext.ux.Andrie.Select||Ext.form.ComboBox,

Finally, the first line of onRender goes away and the second line becomes:

this.combo = new this.comboClass({

This change gives us ultimate flexibility in what to use for the combo. Thanks again for all of your hard work!

[andrei.neculau]

@aparajita: I see where this is going. I updated to v0.4 and added comboCfg config object.

You can use it to modify the default xtype property (combo) to another registered component, thus changing the combo component which is used. I think this way it is closer to Ext2.0 concept

[aparajita]

@aparajita: I see where this is going. I updated to v0.4 and added comboCfg config object.

You can use it to modify the default xtype property (combo) to another registered component, thus changing the combo component which is used. I think this way it is closer to Ext2.0 concept

Is the complete comboCfg passed to the combo constructor? That would be ideal, since there are lots of combo properties one might want to change.

[aparajita]

Hi,

I have noticed that when I used pPageSize, the parent toolbar and list headers draw before they are supposed to. I only see it on FireFox Windows, but it's pretty distracting. Maybe you could take a look at it.

[andrei.neculau]

@aparajita - You must know that you are free to TAKE SOME TIME and look in the source code (line 146).

this.combo = Ext.ComponentMgr.create(Ext.applyIf(this.comboCfg||{}, {... default combo config properties....}));For your second request.. I have no idea what you're talking about concerning their rendering "before they are supposed to". I am using FF2 and see no problem when checking out the demo page

[galdaka]

One suggestion:

If the grid have 20 items and you choose 20 in the combo, you should no refresh the grid.

Thanks in advance,

[andrei.neculau]

touche, galdaka!... will happen with next version

[EDIT] which is now

[aparajita]

Hi,

Thanks for incorporating my suggestion for a comboCfg, that helps a lot. There is a bug in setPageSize() when reducing the page size.

Here is the scenario that produces the bug:

- Load a store with a total of 54 records
- page size is 50
- go to page 2
- change page size to 20
- no records display, paging toolbar says "Page 4 of 3"

It seems to me that in this situation the least surprising thing to do is to set the cursor to 0 and load page 1 with the new page size. Here is my version of setPageSize() with the changes in red:

setPageSize:function(value, forced){
var pt = this.pagingToolbar;
this.combo.collapse();
value = parseInt(value) || parseInt(this.combo.getValue());
value = (value>0)?value:1;
if (value == pt.pageSize){
return;
}else if (value < pt.pageSize){
pt.pageSize = value;
var ap = Math.round(pt.cursor/value)+1;
var cursor = (ap-1)*value;
var store = pt.store;
if (cursor > store.getTotalCount()){
pt.cursor = 0;
this.pagingToolbar.doLoad(0);
}else{
store.suspendEvents();
for (var i=0, len=cursor-pt.cursor; i<len; i++){
store.remove(store.getAt(0));
}
while (store.getCount() > value){
store.remove(store.getAt(store.getCount()-1));
}
store.resumeEvents();
store.fireEvent('datachanged', store);
pt.cursor = cursor;
var d = pt.getPageData();
pt.afterTextEl.el.innerHTML = String.format(pt.afterPageText, d.pages);
pt.field.dom.value = ap;
pt.first.setDisabled(ap == 1);
pt.prev.setDisabled(ap == 1);
pt.next.setDisabled(ap == d.pages);
pt.last.setDisabled(ap == d.pages);
pt.updateInfo();
}
}else{
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(Math.floor(this.pagingToolbar.cursor/this.pagingToolbar.pageSize) * this.pagingToolbar.pageSize);
}
this.updateStore();
},


Hope this can make it into v6. :D

[meteorbites]

as usual... plug and play. :)

thanks for the plugin.

[andrei.neculau]

@aparajita - I think the normal thing to do is to show the last records available in the store. Updated to v0.6. Please test and thanks for the bug post

@meteorbites - Thank YOU

[galdaka]

Hi,

Excellent job!!

Why don

[andrei.neculau]

@galdaka

1. small slipup - I erased editable:false when I switched to comboCfg property. Will go back to non-editable as default in the next version

2. I think pageSizing is one thing autoRefreshing another. This is a plugin, not a component!

[aparajita]

@aparajita - I think the normal thing to do is to show the last records available in the store. Updated to v0.6. Please test and thanks for the bug post

I agree with showing the last records available, I was just too lazy to do that logic. :D

v0.6 works perfectly, thanks for the fix.

[aparajita]

Andrie,

I just ran the latest pPageSize.js through JavaScript Lint and came up with a few warnings, most of which would only be a problem if we tried to minify the source. The lint output is attached.

[mjlecomte]

1. Thanks for this plugin, I like it.
2. In v0.6 if I change to dynamic: true I get an error reported in firebug:

PpageSize.js (line 87)
this.addToStore is not a function

I'm not sure I understand what dynamic vs. static changes here, that's why I was playing with it. Looking through v0.6 I don't see an addToStore function defined. Should line 87 be the following?
this.addSize(middleValue);
3. What I was hoping to accomplish was to click in the combo field and type anything, maybe 1, maybe 8, hit enter and have it accept that for number of records per page.

[galdaka]

1. Thanks for this plugin, I like it.
2. In v0.6 if I change to dynamic: true I get an error reported in firebug:

PpageSize.js (line 87)
this.addToStore is not a function

I'm not sure I understand what dynamic vs. static changes here, that's why I was playing with it. Looking through v0.6 I don't see an addToStore function defined. Should line 87 be the following?
this.addSize(middleValue);
3. What I was hoping to accomplish was to click in the combo field and type anything, maybe 1, maybe 8, hit enter and have it accept that for number of records per page.


Same problem

[ka3S]

I don't understand :( these 2 functions:

// pluggable renders
function renderTopic(value, p, record){
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}

Someone to explane ?

[galdaka]

I don't understand :( these 2 functions:

// pluggable renders
function renderTopic(value, p, record){
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}

Someone to explane ?

I think that this extensi

[mjlecomte]

I don't understand :( these 2 functions:

// pluggable renders
function renderTopic(value, p, record){
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}

Someone to explane ?

Those appear to be custom renderer functions that are probably straight from the the example. I don't think they relate directly to this extension. Check out custom renderers elsewhere in the forum and in the examples provided. Many of the grid examples use custom renderers, I think the first one (array grid?) in fact.

[JasonOng]

Thanks Andrie for this useful plugin.

For those who wants the store to always reload if when the chosen pagesize value from the combobox changes, just comment out Andrie's code as per below.

setPageSize:function(value, forced){

var pt = this.pagingToolbar;

this.combo.collapse();

value = parseInt(value) || parseInt(this.combo.getValue());

value = (value>0)?value:1;

if (value == pt.pageSize){

return;

}/*else if (value < pt.pageSize){

pt.pageSize = value;

var ap = Math.round(pt.cursor/value)+1;

var cursor = (ap-1)*value;

var store = pt.store;

if (cursor > store.getTotalCount()) {

this.pagingToolbar.pageSize = value;

this.pagingToolbar.doLoad(cursor-value);

}else{

store.suspendEvents();

for (var i = 0, len = cursor - pt.cursor; i < len; i++) {

store.remove(store.getAt(0));

}

while (store.getCount() > value) {

store.remove(store.getAt(store.getCount() - 1));

}

store.resumeEvents();

store.fireEvent('datachanged', store);

pt.cursor = cursor;

var d = pt.getPageData();

pt.afterTextEl.el.innerHTML = String.format(pt.afterPageText, d.pages);

pt.field.dom.value = ap;

pt.first.setDisabled(ap == 1);

pt.prev.setDisabled(ap == 1);

pt.next.setDisabled(ap == d.pages);

pt.last.setDisabled(ap == d.pages);

pt.updateInfo();

}

}*/else{

this.pagingToolbar.pageSize = value;

this.pagingToolbar.doLoad(Math.floor(this.pagingToolbar.cursor/this.pagingToolbar.pageSize) * this.pagingToolbar.pageSize);

}

this.updateStore();

},

I had to post the 'limit' parameter whenever users chose a different pagesize as I'm storing it as a session variable so the page 'remembers' user's last pagesize selection.

Cheers.

[ctirado]

It works 100%, thanks a lot.
Great work.

[donssmith]

@Andrie & @JasonOng

I added a new config called alwaysReload to control this behavior. It's false by default so it functions as it does today. I changed setPageSize to check alwaysReload to determine if the store should always be reloaded. Maybe Andrie can add the code to the next revision. Here's the JS code:


/**
* @cfg {Bool} alwaysReload
* True to always reload the store when the choosen pagesize value from the combobox changes
* False (default) to only reload the store when the choosen pagesize value from the combobox
* is greater than the current pagesize selected.
*/
alwaysReload: false,


setPageSize:function(value, forced){
var pt = this.pagingToolbar;
this.combo.collapse();
value = parseInt(value) || parseInt(this.combo.getValue());
value = (value>0)?value:1;
if (value == pt.pageSize){
return;
}else if (value < pt.pageSize && !this.alwaysReload){

[gPorterfield]

This is most impressive! works beautifully.
:)\:D/
~cheers

[bidyut]

I am still getting the error

this.addToStore is not a function.

Is there a solution for it?

Thanks

[gthe]

Hi!
How it is possible to change this bug with ext 2.1 and pPageSize v.06?

[wm003]

Hi!
How it is possible to change this bug with ext 2.1 and pPageSize v.06?

mmh, i don't have this issue and i'm also using ext 2.1 and ppagesize v.6. Which browser version are you using?

[gthe]

FF3 and IE6
May be this is because grid in tabpanel ?
Here is full screenshots. (left - FF3, right - IE6).

Sorry for my English.
Thanks.

[wm003]

FF3 and IE6
May be this is because grid in tabpanel ?
Here is full screenshots. (left - FF3, right - IE6).

Sorry for my English.
Thanks.

i guess it depends on the ppagesize toolbar that contains additional elements ("refresh every", "Show Preview") I haven't added such things and the pagebar works for me. Could you please provide the config code of you pagebar/ppagesize? That might help.;)

[gthe]

Could you please provide the config code of you pagebar/ppagesize? That might help.;)
bbar: new Ext.PagingToolbar({
plugins:[new Ext.ux.Andrie.pPageSize(), new Ext.ux.grid.AutoRefresher()],
pageSize: 50,
store: TrapsDataStore,
displayInfo: true,
displayMsg: 'Displaying traps {0} - {1} of {2}',
emptyMsg: "No SNMP traps to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details'
//toggleHandler: toggleDetails
}]
}),But if only pPageSize (in IE, for example):

[wm003]

But if only pPageSize (in IE, for example):

:s i have exactly the same config and this issue does not occur for me...
Please check the layout of the container where the gridpanel resides. I have set it to 'fit'. But i still guess it's some CSS problem. Have you tried Firebug to examine the settings at runtime?

[gthe]

OK, here is screen from firebug.
But I for the present have not enough experience for the independent decision of this problem.

[mjlecomte]

Have you changed any of the css from the default?

[gthe]

No, I did not change there is nothing

[wm003]

what else js/css files do you include? Could post your HTML Code aswell? The text lies in a TD-Tag and i guess TD got some CSS-Stlye overridden elsewhere (from another css)

[gthe]

Could post your HTML Code aswell?

<html>
<head>
<title>Introduction to Ext 2.0: Starter Page</title>

<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="/cacti/plugins/snmptt/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/cacti/plugins/snmptt/ext/ext-all-debug.js"></script>

<script type="text/javascript" src="/cacti/plugins/snmptt/tab_actions.js"></script>
<script type="text/javascript" src="/cacti/plugins/snmptt/ext/pPageSize.js"></script>
<script type="text/javascript" src="/cacti/plugins/snmptt/ext/cherryonext.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="/cacti/plugins/snmptt/ext/resources/css/ext-all.css" />


</head>
<body>


<div id="ext_main_snmptt-div"></div>
</body>
</html>

[wm003]

Have you tried disabling cherryonext.js and tab_actions?
CherryonExt does include stuff for the grid and overrides some functions afaik.

[gthe]

Try this:

<html>
<head>
<title>Introduction to Ext 2.0: Starter Page</title>

<!-- Include Ext and app-specific scripts: -->
<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="../../pPageSize.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />


</head>
<body>

<script type="text/javascript">


Ext.onReady(function(){

TrapsDataStore = new Ext.data.Store({
id: 'TrapsDataStore',
proxy: new Ext.data.HttpProxy({
//url: 'database.php', // File to connect to
url: 'snmptt_db.php', // File to connect to
method: 'GET'
}),
//baseParams:{}, // this parameter asks for listing
reader: new Ext.data.JsonReader({ // we tell the datastore where to get his data from
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'id', type: 'int', mapping: 'id'},
{name: 'description', type: 'string', mapping: 'description'}
]),
sortInfo:{field: 'id', direction: "ASC"}
}
);



trapsSM = new Ext.grid.CheckboxSelectionModel();
TrapsColumnModel = new Ext.grid.ColumnModel(
[trapsSM,{
id: 'Description',
header: 'Description',
readOnly: true,
dataIndex: 'description', // this is where the mapped name is important!
width: 210
}]
);
TrapsColumnModel.defaultSortable= true;


TrapsGrid = new Ext.grid.GridPanel({
id: 'TrapsGrid',
store: TrapsDataStore, // the datastore is defined here
cm: TrapsColumnModel, // the columnmodel is defined here
enableColLock:false,
clicksToEdit:1,
layout: 'fit',
selModel: trapsSM,

autoExpandColumn : 'Description',
loadMask: true,
footer: true,
width:700,
height:500,
bbar: new Ext.PagingToolbar({
plugins:[new Ext.ux.Andrie.pPageSize()],
pageSize: 50,
store: TrapsDataStore,
displayInfo: true,
displayMsg: 'Displaying traps {0} - {1} of {2}',
emptyMsg: "No SNMP traps to display"
})
});



var tabs = new Ext.TabPanel({
renderTo: 'starthere',
//xtype:"tabpanel",
deferredRender: false,
layoutOnTabChange:true,
id : 'tabs',
frame:false,
border:true,
width: 900,
height: 700,
resizeTabs : true, //resize each tab so that the tabs will completely fill the tab strip
region: 'center',
activeTab: 0,
defaults:{autoScroll:true},
items:[{
title: 'Traps',
items: TrapsGrid
}]
});






tabs.doLayout();




});


</script>

<div id="starthere">

</body>
</html>

[wm003]

Ok, the issue is somehow triggered because the grid is rendered to an existing div-container...

When i add your code into a window it works like it should:

...
var tabs = new Ext.TabPanel({
// renderTo: 'starthere', //commented out so its not rendered to the existing div
//xtype:"tabpanel",
deferredRender: false,
layoutOnTabChange:true,
id : 'tabs',
frame:false,
border:true,
width: 900,
height: 700,
resizeTabs : true,
region: 'center',
activeTab: 0,
defaults:{autoScroll:true},
items:[{
title: 'Traps',
items: TrapsGrid
}]
});


//tabs.doLayout(); //do not render the tabs themself, but let it be part of the window

var gWin = new Ext.Window({
title :"test",
closable: false,
layout : 'fit',
width : Ext.lib.Dom.getViewWidth()-100,
height : Ext.lib.Dom.getViewHeight()-100,
hideBorders : true,

items: tabs
});

gWin.show();

[gthe]

Ok, the issue is somehow triggered because the grid is rendered to an existing div-container...

So, in the div-container there is no opportunity to correct this issue ?

[PSB]

in 66 line skip ";" - jsminimer crush

[emredagli]

Hii,
I am using Ext.ux.Andrie.pPageSize extension.
I have two grids and I have to use card layout to show them.
But when I use card layout, page size combobox is disappear.
I set config option as:
hideMode: 'offsets'
But It is not fixed my problem.

Thanks for your advance.