PDA

View Full Version : Grid Paging



GT_Travis
11 Sep 2009, 9:39 PM
Hi Guys, I am an newbie with Ext. I am tryin to use the grid to display my data from database. I am having problems with the paging. I can display the content but it seems that it would load the content when i clicked "next page". The following is my code.


Ext.namespace('Ext.exampledata');
Ext.exampledata.status = [
['WAITING'],
['PROCESSED'],
['DELIVERED']
];
var status = new Ext.data.ArrayStore({
fields: ['status_display'],
data : Ext.exampledata.status
});

Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
/*
* ================ Simple form =======================
*/
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'${appPath}/web/superadmin/report/main.do' (http://www.extjs.com/forum/'${appPath}/web/superadmin/report/main.do'),
frame:true,
title: 'User Log Search',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'MSISDN',
name: 'msisdn',
allowBlank:true
},{
fieldLabel: 'Source Address',
name: 'from_name',
allowBlank:true
},new Ext.form.ComboBox({
fieldLabel: 'Status',
displayField:'status_display',
store: status,
triggerAction: 'all',
emptyText:'Select a status',
typeAhead: false,
mode: 'local',
selectOnFocus:true,
allowBlank:true,
name: 'status'
}),{
fieldLabel: 'Start Date',
name: 'startDate',
id: 'startDate',
xtype: 'datefield',
vtype: 'daterange',
format: 'Y-m-d',
endDateField: 'endDate' // id of the end date field
},{
fieldLabel: 'End Date',
name: 'endDate',
id: 'endDate',
xtype: 'datefield',
vtype: 'daterange',
format: 'Y-m-d',
startDateField: 'startDate' // id of the start date field
},{
name: 'search',
hidden: true,
value: 'true'
}
],
buttons:[{
text:'Send',
formBind: true,
// Function that fires when user clicks the button
handler:function(){
simple.getForm().submit({
method:'POST',
waitTitle:'Connecting',
waitMsg:'Sending data...',
success: function (form, action) {

store.loadData(action.result.data);
},
// Failure function, see comment above re: success and failure.
// You can see here, if login fails, it throws a messagebox
// at the user telling him / her as much.
failure:function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Send Failed!', obj.errors.reason);
}else{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
}
//login.getForm().reset();
}
});
}
}]
});
simple.render(Ext.get('center1'));
/*=================================================*/


// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// sample static data for the store
/*var myData = [
<c:forEach items="${smsUserLogList}" var="List" varStatus="i">
[${smsUserLogList}.id,${smsUserLogList}.msisdn,${smsUserLogList}.im]<c:if test="${not i.last}">,</c:if>,
</c:forEach>
];*/
/* ===End Data Store=== */
/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// create the data store
var store = new Ext.data.JsonStore({
proxy: new Ext.data.ScriptTagProxy({
url: '${appPath}/web/superadmin/report/main.do?search=true&msisdn=${inputMsisdn}'
}),
autoLoad:true,
root:'log',
totalProperty: 'totalCount',
fields: [
{name: 'id', type: 'int'},
{name: 'msisdn', type: 'string'},
{name: 'incomingMessage', type: 'string'},
{name: 'fromName', type: 'string'},
{name: 'campaignId', type: 'string'},
{name: 'status', type: 'string'},
{name: 'scheduleLogId', type: 'string'},
{name: 'createDatetime', type: 'string'},
{name: 'sentOutDatetime', type: 'string'},
{name: 'messageRefId', type: 'string'},
{name: 'adminId',type: 'string'}
]
});
// manually load local data
//store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'messageLog', header: 'ID', width: 50, sortable: true, dataIndex: 'id'},
{header: 'MSISDN', width: 100, sortable: true, dataIndex: 'msisdn'},
{header: 'Incoming Message', width: 160, sortable: false, dataIndex: 'incomingMessage'},
{header: 'Source Address', width: 160, sortable: true, dataIndex: 'fromName'},
{header: 'Campaign ID', width: 75, sortable: true, dataIndex: 'campaignId'},
{header: 'Status', width: 75, sortable: true, dataIndex: 'status'},
{header: 'Schedule Log ID', width: 100, sortable: true, dataIndex: 'scheduleLogId'},
{header: 'Create Date', width: 135, sortable: true, dataIndex: 'createDatetime'},
{header: 'Sent Out Date', width: 135, sortable: true, dataIndex: 'sentOutDatetime'}
],
stripeRows: true,
height: 350,
width: 1000,
title: 'Message Log',
bbar: new Ext.PagingToolbar({
store: store,
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying categories {0} - {1} of {2}',
emptyMsg: "No categories to display"
})
});

// render the grid to the specified div in the page
grid.render(Ext.get('center1'));
store.load({params:{start:0, limit:25}});

});
-->
</script>

Here is the exampla of the print out:

{"success":true,"params":{"start":0,"limit":25},"data":{"totalCount":90,"log":[{"adminId":1,"campaignId":"Long SMS","createDatetime":"2009-09-03","fromName":"Travis Lai","id":191,"incomingMessage":"ABC","messageRefId":"1-5214956091","msisdn":"85266890165","scheduleLogId":"N/A","sentOutDatetime":"2009-09-03","status":"PROCESSED"},.....
I wondering what have i done wrong?

Please help!! I will be very appriciated.

Condor
11 Sep 2009, 10:30 PM
1. The data you posted is for a HttpProxy and not for a ScriptTagProxy.
2. You should not put autoLoad:true in the store config (now it loads the store twice).
3. If I read this correctly, you are submitting the form and putting the result in the grid? Instead, you should put the form values in the store baseParams and load the store (with start and limit).

GT_Travis
15 Sep 2009, 11:38 PM
Thanks Condor! It works. Really appriceated!

keithcortis
16 Sep 2009, 12:02 AM
i have a query regarding the totalProperty attribute - is this property still in use in extjs 3.0? I am using a jsonstore to load data from a databse to display them in a grid and i need this property since i am using paging, that is why i am asking. thanks!
http://www.extjs.com/forum/images/misc/progress.gif

keithcortis
16 Sep 2009, 12:04 AM
i have a query regarding the totalProperty attribute - is this property still in use in extjs 3.0?since i am researching about it and it seems that it is used in 2.0 and not in the new version. I am using a jsonstore to load data from a databse to display them in a grid and i need this property since i am using paging, that is why i am asking. thanks!
http://www.extjs.com/forum/images/misc/progress.gif

tubamanu
16 Sep 2009, 12:37 AM
i just used the totalProperty in EXTJS 3.0....also make sure, that the totalProperty is transfered from server....



initGridStore: function () {
this.theUserStoreIsInitialized = true;
this.theUserStore = new Ext.data.JsonStore({
totalProperty: 'total',
root: 'result',
url: '<?php echo build_dynamic_javascript_url('usermanagement/LoadAllUser')?>',
fields: [
{name: '#'},
{name: 'id'},
{name: 'firstname'},
{name: 'lastname'},
{name: 'email'},
{name: 'username'},
{name: 'role_description'},
{name: 'role_id'},
{name: 'action'}
]
});
},

keithcortis
16 Sep 2009, 1:22 AM
thanks a lot.. i have solved my issue but thanks the same! :)