PDA

View Full Version : [2.x] Ext.ux.Andrie.pPageSize (dynamic page sizer)



andrei.neculau
5 Nov 2007, 1:32 PM
* 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
10 Nov 2007, 4:30 AM
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
10 Nov 2007, 4:37 AM
Same problem. View Image.

But Excellent widget!!

anjelika
10 Nov 2007, 4:42 AM
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
10 Nov 2007, 8:27 AM
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
10 Nov 2007, 11:53 AM
@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
10 Nov 2007, 2:28 PM
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
28 Nov 2007, 3:21 AM
I love your pageSize extension.
10x

mjoksa
29 Nov 2007, 1:23 AM
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
30 Nov 2007, 2:27 AM
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
3 Dec 2007, 7:52 AM
@ kieren.johnson
Just look at my post above...
;)

sugen
13 Dec 2007, 12:59 AM
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
13 Dec 2007, 1:20 AM
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
13 Dec 2007, 1:37 AM
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
13 Dec 2007, 2:37 AM
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
13 Dec 2007, 5:01 AM
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
13 Dec 2007, 5:27 PM
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
24 Dec 2007, 1:33 PM
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
26 Dec 2007, 11:17 AM
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
27 Dec 2007, 12:30 PM
@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
27 Dec 2007, 8:04 PM
@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
28 Dec 2007, 9:44 PM
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
29 Dec 2007, 9:22 AM
@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
29 Dec 2007, 9:50 AM
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
30 Dec 2007, 2:44 PM
touche, galdaka!... will happen with next version

[EDIT] which is now

aparajita
1 Jan 2008, 1:29 PM
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
3 Jan 2008, 1:41 AM
as usual... plug and play. :)

thanks for the plugin.

andrei.neculau
3 Jan 2008, 9:10 AM
@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
3 Jan 2008, 9:37 AM
Hi,

Excellent job!!

Why don

andrei.neculau
4 Jan 2008, 3:20 AM
@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
9 Jan 2008, 9:26 PM
@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
10 Jan 2008, 11:42 AM
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
19 Jan 2008, 5:25 PM
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
28 Jan 2008, 1:45 AM
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
29 Jan 2008, 3:14 AM
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
4 Feb 2008, 11:53 PM
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
5 Feb 2008, 5:11 AM
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
27 Feb 2008, 2:51 AM
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
17 Mar 2008, 6:34 PM
It works 100%, thanks a lot.
Great work.

donssmith
17 Mar 2008, 10:05 PM
@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
24 Mar 2008, 1:07 PM
This is most impressive! works beautifully.
:)\:D/
~cheers

bidyut
14 Apr 2008, 11:05 AM
I am still getting the error

this.addToStore is not a function.

Is there a solution for it?

Thanks

gthe
29 May 2008, 9:43 PM
Hi!
How it is possible to change this bug with ext 2.1 and pPageSize v.06?

wm003
29 May 2008, 11:06 PM
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
29 May 2008, 11:17 PM
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
29 May 2008, 11:26 PM
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
29 May 2008, 11:31 PM
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
29 May 2008, 11:45 PM
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
29 May 2008, 11:58 PM
OK, here is screen from firebug.
But I for the present have not enough experience for the independent decision of this problem.

mjlecomte
30 May 2008, 9:21 AM
Have you changed any of the css from the default?

gthe
31 May 2008, 12:16 AM
No, I did not change there is nothing

wm003
31 May 2008, 1:52 AM
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
31 May 2008, 2:12 AM
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
31 May 2008, 2:23 AM
Have you tried disabling cherryonext.js and tab_actions?
CherryonExt does include stuff for the grid and overrides some functions afaik.

gthe
31 May 2008, 3:42 AM
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
1 Jun 2008, 1:37 AM
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
1 Jun 2008, 8:24 PM
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
10 Nov 2008, 10:37 AM
in 66 line skip ";" - jsminimer crush

emredagli
20 Nov 2008, 1:01 AM
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.

RabidFire
21 Mar 2010, 2:09 AM
Not sure if this has already been addressed or not (couldn't find it in the thread), but found a small bug, that might have been caused due to the latest release of ExtJS. Basically, the afterText " of {1}" pages was not getting updated. Seems like afterTextEl has been removed, cause Firebug console was giving me an error.

Here's a fix:

Old Code:


pt.afterTextEl.el.innerHTML = String.format(pt.afterPageText, d.pages);
pt.field.dom.value = ap;New Code:


pt.afterTextItem.setText(String.format(pt.afterPageText, d.pages));
pt.inputItem.setValue(ap);Cheers!