PDA

View Full Version : Pagination not working for EXTJS 4.0.7



rgurijala
29 May 2012, 10:21 PM
Hi,

I am loading the data into EXTJS grid using JSON and using the paging toolbar to ensure that only 10 records are visible in the grid, even though i am fetching 12 records from the server. However, the grid is getting populated with all the 12 records in the first page and the subsequent page is also having the same data(12 records in 2nd page). I have tried the paging example from the sencha docs, without much success. Can anyone please help me resolve the pagination issue ? Please find below the extjs code. The technologies i am using are extjs4.0.7, struts2. The data to extjs is posted from the struts2 class.

Ext.Loader.setConfig( {
enabled : true
});


Ext.Loader.setPath('Ext.ux', '<%=contextRoot%>/ext-4.0.7-gpl/examples/ux/');


Ext.require( [ 'Ext.grid.*', 'Ext.data.*' ]);


Ext.define('customerName', {
extend : 'Ext.data.Model',
fields : [ 'customerName', 'customerID', 'customerFirstName',
'customerLastName' ]


});


Ext
.onReady(function() {


var store = Ext
.create(
'Ext.data.Store',
{
autoLoad : false,
autoSync : false,
model : 'customerName',
proxy : {
type : 'rest',


url : 'https://localhost:8443/CAP/secureApp/ajxAction.action?action=searchCustomer&cid='
+ customerID+ '&cnm='+ customerName+ '&cfnm='+ firstName+ '&clnm='+ lastName,
reader : {
type : 'json',
root : 'items',
method : 'post'
}


}
});


//paging Bar


var PagingBar = new Ext.PagingToolbar( {
pageSize : 10,
store : store,
displayInfo : true,
displayMsg : 'Displaying {0} - {1} of {2}',
emptyMsg : 'No Data to display'
});


var grid = Ext.create(
'Ext.grid.Panel',
{
// renderTo: 'reg-user-prof',


autoWidth : true,
autoHeight : true,
frame : true,
//title: 'Users',
store : store,


columns : [
{
id : 'customerName',
header : "Customer Name",
width : 150,
sortable : true,
dataIndex : 'customerName',
renderer : function(value,metaData, record,rowIndex, colIndex,store) {
var url = record.data.customerID;
if (url) {


return '<a href="https://localhost:8443/CAP/secureApp/viewCustomerProfile.action?cid='
+ url+ '"target="_parent">'+ value+ '</a>';
}
else {
return value
}
}//end renderer
}, {
header : 'Customer ID',
width : 100,
sortable : true,
dataIndex : 'customerID'
}, {
text : 'Customer First Name',
width : 170,
sortable : true,
dataIndex : 'customerFirstName'
}, {
text : 'Customer Last Name',
width : 170,
sortable : true,
dataIndex : 'customerLastName'
} ],


bbar : PagingBar


});
// var recs=store.count();
// alert(recs);


grid.render('search-customer-results');
store.load();
});

35736


Thanks,
Ram

Farish
30 May 2012, 12:18 AM
Paging has to be implemented on your server side. the store with paging will send a request and append some parameters to it such as start, end and limit. these parameters are changed when you go to some particular page. now you have to read these parameters on the server side and only send records corresponding to the start, end and limit. So you should send the first 10 records on the first page and 2 records on the 2nd page.

rgurijala
30 May 2012, 12:34 AM
Thanks Farish for the reply.

Is it possible that I can get a sample piece of code or an example which implements the below logic ?

Farish
30 May 2012, 12:45 AM
It depends on from where you read your data (file or database) and in which language you are working on for your server side code. I can just give you a hint. you have to get the values of the start and end parameters, loop through your data with these and send them back to the client side.

scottmartin
30 May 2012, 6:49 AM
Here is a quick example for how to implement paging.

Regards,
Scott.

35750

rgurijala
30 May 2012, 9:47 PM
Thanks Scott and Farish for your inputs...Ill try it out and will post the results, so that it will be helpful for someone else implementing the pagination logic in extjs using struts2

Regards,
Ram

SirishNukala
14 Jun 2012, 7:16 AM
Hi Scott,

I'm too facing the same problem and tried your code :((. No luck. Do you have a working code or a sample like the one you posted.

Appreciate your help.,!

Thanks,
Sirish.

scottmartin
14 Jun 2012, 7:24 AM
Can you be more specific as to what was not working?

Scott.

jailsonjan
18 Oct 2012, 10:13 AM
Hello everyone!
I made some changes to make it work, the connections of the database must be in the function "showData" that makes calls sql. See below the changes.
I tested it and it works.
Jailson Jan :D
--------------------------------------------------------------------------------

<?php

function get_json_value($json,$key)
{
$result = NULL;
if(function_exists('json_decode')) {
$jsonData = json_decode($json, TRUE);
$result = $jsonData[0][$key];
}
return $result;
}


$task = ($_POST['task']) ? ($_POST['task']) : 'read';

//switchboard for the CRUD task requested
switch($task){
case "read":
showData('states');
break;
default:
echo "{failure:true}";
break;
}

function showData($table)
{

$start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
if ($start == "" OR $start == NULL){
$start = 0;
}
$end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']);
if ($end == "" OR $end == NULL){
$end = 12;
}
$sort = (isset($_POST['sort']) ? $_POST['sort'] : $_GET['sort']);
if ($sort == "" OR $sort == NULL){
$sort = "name";
}

$ord = get_json_value($sort,'property');
if($ord == "" OR $ord == NULL){
$ord = "name";
}

$dir = get_json_value($sort,'direction');
if($dir == "" OR $dir == NULL){
$dir="ASC";
}

//database parameters
$server="your server";
$user="your user";
$pw="your password";
$db="sencha";
$table="states";

//make database connection
$link = mysql_connect("$server", "$user", "$pw");
mysql_select_db("$db", $link);


$result = mysql_query("SELECT * FROM " . $table . " ORDER BY " . $ord ." ". $dir . " LIMIT " . $start . ", ". $end ."", $link);


$sql_count = "SELECT * FROM " . $table . "";


$sql_count = mysql_query("SELECT * FROM states", $link);
$rows = mysql_num_rows($sql_count);


while($rec = mysql_fetch_array($result, MYSQL_ASSOC)){
$arr[] = $rec;
};

$data = json_encode($arr); //encode the data in json format

echo $cb . '({"total":"' . $rows . '","data":' . $data . '})';
}

?>

jailsonjan
18 Oct 2012, 10:22 AM
The archive that i modified (server.php) exist in the example of Scott Martin "t6775-remote.zip", you make a download, unzip and change.
Jailson Jan :D

santoshballary
24 Oct 2012, 9:17 PM
Hi

in my xhtml file on first load of grid, am getting proper pagination value then ill click next page it will give proper value but when i search the data it is not refreshing the start index value , i tried with overloading of pagination onload method it is not working ,
here is the code ,

<h:form id="searchHeadForm" >
<link class="user" href="#{request.contextPath}/extjs/css/ext-all-gray.css" rel="stylesheet" type="text/css" />
<script src="#{request.contextPath}/extjs/js/ext-all-debug.js" type="text/javascript"/>
<script type="text/javascript">
/* <![CDATA[ */
var userStore;
var grid;
Ext.require('Ext.data.Store');
Ext.require('Ext.grid.Panel');
Ext.require('Ext.toolbar.Paging');
Ext.require(['Ext.data.*', 'Ext.grid.*']);

Ext.define('Executives', {
extend: 'Ext.data.Model',
fields: ['id', 'firstName', 'lastName', 'active','deleted','lastUpdatedBy','lastUpdatedDt']
});

Ext.onReady(function(){

userStore = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
autoSave: true,
remoteSort:true, ////// HACK: stop buffered/remoteSort:false from marking columns unsortable
pageSize: 50,
model: 'Executives',
proxy: {
type: 'ajax',
// url:'#{request.contextPath}/seam/resource/restv1/sales/load',
api:{
read: '#{request.contextPath}/seam/resource/restv1/executives/load',
create: '#{request.contextPath}/seam/resource/restv1/executives/create',
update: '#{request.contextPath}/seam/resource/restv1/executives/update',
destroy: '#{request.contextPath}/seam/resource/restv1/executives/destroy'
},
actionMethods: {
read: 'POST',
create: 'POST',
update: 'POST',
destroy: 'POST'
},
reader: {
type: 'json',
root: 'salesPerson.data',
//record:'SalesPerson',
totalProperty: 'salesPerson.total',
successProperty: 'salesPerson.success',
messageProperty: 'salesPerson.message'
},
writer: {
type: 'json',
allowSingle: true,
root:'executives'
//record:'SalesPerson'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
onCreateRecords: function(records, operation, success) {
//console.log(records);
},


onUpdateRecords: function(records, operation, success) {
reset();
reloadGrid();

},


onDestroyRecords: function(records, operation, success) {
//console.log(records);
reset();
reloadGrid();
},

listeners: {
beforeload: function(store,records,options){


},
load: function(store,records,options){
if(null!=records){
if(records.length==0){
noresultDiv.show();
testDiv.show();

}
else{
testDiv.show();
noresultDiv.hide();
}
}
},
write: function(userStore, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
// Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
}
}
}); // userstore

function renderTopic(value, p, record) {
return Ext.String.format(
'<a href="/scheduling-db/views/admin/convention/AddEditConvention.seam" target="_blank">{0}</a>',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');


function renderStatus(value, p, record) {

if(record.data['active']) {
return Ext.String.format(
"Active",
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}else{
return Ext.String.format(
"Inactive",
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}

}

grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.Element.get('testDiv'),
plugins: [rowEditing],
store: userStore,
width: 960,
height: 350,
frame: true,
title: 'Executive',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id',
hidden:true
},{
text: 'First Name',
flex: 1,
name:'firstName',
sortable: true,
//renderer: renderTopic,
dataIndex: 'firstName',

field: {
xtype: 'textfield',
allowBlank: false

}

}
, {
text: 'Last Name',
flex: 1,
sortable: true,
dataIndex: 'lastName',
field: {
xtype: 'textfield',
allowBlank: false
}
},

{
//xtype: 'radiogroup',
header: 'Status',
flex: 1,
sortable: false,
//xtype: 'fieldcontainer',
defaultType: 'radiofield',
renderer: renderStatus,
dataIndex: 'active',
field: {
xtype: 'radiogroup',
cls: 'x-check-group-alt',
items: [
{boxLabel: 'Active', name: 'active', inputValue: true,checked:true},
{boxLabel: 'Inactive', name: 'active', inputValue: false}
],
// setValue:function(value) {
// var val = Ext.isObject(value) ? value : {type:value};
// console.log(this);
// Ext.form.RadioGroup.prototype.setValue.call(this, val);
// }
setValue: function (value) {
if (!Ext.isObject(value)) {
var obj = new Object();
obj[this.name] = value;
value = obj;
}
Ext.form.RadioGroup.prototype.setValue.call(this, value);
}

}

},
/* {
header: 'Status',
flex: 1,
sortable: true,
dataIndex: 'isActive',
},*/

{
text: 'Last Updated By',
flex: 1,
sortable: true,
dataIndex: 'lastUpdatedBy'
}, {
//xtype: 'datefield',
//sortable: false,
text: 'Last Updated',
flex: 1,
sortable: true,
renderer: Ext.util.Format.dateRenderer('d-M-Y'),
dataIndex: 'lastUpdatedDt'
},{
xtype: 'actioncolumn',
width:60,
sortable: false,
items: [{
icon: '#{request.contextPath}/images/edit-btn-2011.png',
tooltip: 'Edit Executive',
handler: function(grid, rowIndex, colIndex) {
rowEditing.startEdit(rowIndex, 0);
}
},{
icon:'#{request.contextPath}/images/trash-btn-2011.png',
tooltip: 'Delete Executive',
dataIndex: 'id',
handler: function(grid, rowIndex, colIndex) {
Ext.MessageBox.confirm('', "Would you like to delete this Executive?", function (btn) {
if (btn == 'yes')
userStore.removeAt(rowIndex);
});
}
}]
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: userStore,
layout: 'hbox', // same store GridPanel is using
dock:'bottom',
align:'center',
hideRefresh: true,
displayInfo: true,
displayMsg: 'Executives {0} - {1} of {2}',
emptyMsg: "No Executives to display"
},
{
xtype: 'pagingtoolbar',
store: userStore, // same store GridPanel is using
dock: 'top',
align:'center',
hideRefresh: true,
displayInfo: true,
displayMsg: 'Executives {0} - {1} of {2}',
emptyMsg: "No Executives to display"
},{
xtype: 'toolbar',
dock: 'bottom',
align:'center',
items: [{
text: 'Add Row',
iconCls: 'icon-add',
handler: function(){
// empty record
// edit = this.editing;
//edit.cancelEdit();
userStore.insert(0, new Executives());
rowEditing.startEdit(0, 0);
}
}] //items end
}] //docked items end
})//Grid End

});//Onready

function reloadGrid(){

//conventionStore.proxy.params = { email:'nat'};

var fName="";
var lName="";
var checkValue = "";
var sortValue="";
var page=1;

var start = 0;
if(null != document.getElementById("searchForm:firstName").value)
fName = document.getElementById("searchForm:firstName").value;
else
fName="";
if(null != document.getElementById("searchForm:lastName").value)
lName = document.getElementById("searchForm:lastName").value;
else
lName = "";

if(document.getElementById("searchForm:active").checked && !document.getElementById("searchForm:inactive").checked ){
checkValue="active";
}
else if(document.getElementById("searchForm:inactive").checked && !document.getElementById("searchForm:active").checked){
checkValue="inactive";
}
else if(document.getElementById("searchForm:active").checked && document.getElementById("searchForm:inactive").checked){
checkValue= "both";
}else {
checkValue= "both";
}

userStore.removeAll();


userStore.load({
params: {
firstName: fName,
lastName : lName,
checkValue:checkValue,
page:page,
start:start

}
});

//Ext.getCmp('testDiv').getView().refresh();
if(userStore.data.length== 0){
testDiv.hide();
}
}
function reset(){
testDiv.show();
document.getElementById("searchForm:firstName").value = "";
document.getElementById("searchForm:lastName").value="";
document.getElementById("searchForm:inactive").checked = true;
document.getElementById("searchForm:active").checked = true;


}
function resetGrid(){

document.all.testDiv.visibility = 'visible';
reset();
//conventionStore.proxy.params = { email:'nat'};
userStore.reload();
var fName="";
var lName="";
var checkValue = "both";
var sortValue="";
var page=1;
var maxRows=50;
//userStore.removeAll();
userStore.load({
params: {
firstName: fName,
lastName : lName,
checkValue:checkValue,
sort:sortValue,
page:page,
maxRows:maxRows,
start:0

}
});
//Ext.getCmp('testDiv').getView().refresh();
if(userStore.data.length== 0){
testDiv.hide();
}
}

Ext.toolbar.Paging.override({
onLoad : function(){
var me = this,
pageData,
currPage,
pageCount,
afterText,
count,
isEmpty;


count = me.store.getCount();
isEmpty = me.getPageData().pageCount === 0;
if (!isEmpty) {
pageData = me.getPageData();
currPage = pageData.currentPage;
pageCount = pageData.pageCount;
afterText = Ext.String.format(me.afterPageText, isNaN(pageCount) ? 1 : pageCount);
} else {
currPage = 0;
pageCount = 0;
afterText = Ext.String.format(me.afterPageText, 0);
}


Ext.suspendLayouts();
me.child('#afterTextItem').setText(afterText);
me.child('#inputItem').setDisabled(isEmpty).setValue(currPage);
me.child('#first').setDisabled(currPage === 1 || isEmpty);
me.child('#prev').setDisabled(currPage === 1 || isEmpty);
me.child('#next').setDisabled(currPage === pageCount || isEmpty);
me.child('#last').setDisabled(currPage === pageCount || isEmpty);
me.child('#refresh').enable();
me.updateInfo();
Ext.resumeLayouts(true);


if (me.rendered) {
me.fireEvent('change', me, pageData);
}
}
});



//Ext.Msg.alert(userStore);
/* ]]> */
</script>


please help me out in this one

Farish
24 Oct 2012, 10:46 PM
you should use the following for load:


store.currentPage = 1;
store.loadPage(1);

This will then load the first page.

santoshballary
25 Oct 2012, 1:10 AM
Thank you very much it works for me...:D:D:D

santoshballary
25 Oct 2012, 8:18 AM
userStore.loadPage(1);
userStore.removeAll();
userStore.load({
params: {
firstName: fName,
lastName : lName,
checkValue:checkValue,
page:page,
start:start,
maxRows:50

}
});
the value is not refreshing properly some time it works some time it wont ... thanks in advance

skirtle
25 Oct 2012, 8:30 AM
Please use [CODE] tags when posting code.

Pass the options to loadPage instead of load:


userStore.loadPage(1, {
params: {
firstName: fName,
lastName: lName,
checkValue: checkValue,
page:page,
start: start,
maxRows:50
}
});

That said, you shouldn't be passing paging options like page, start and maxRows, let the paging mechanism handle that for you. You'll also probably want to add those other parameters to the extraParams instead, otherwise they'll be dropped when you try to load other pages.

santoshballary
31 Oct 2012, 11:40 PM
Thanks , it is working fine for me

santoshballary
1 Nov 2012, 12:32 AM
I am having two check box(active and inactive) based on that i am searching.value is populating properly in grid.
issue scenario 1: ill search data through "active" it is populating all active data . when click sorting on column then i will get both active and inactive data.

issue scenario 2: on grid pagination i am having total 58 record , active is 55 and inactive is 3, and page size is 50
and ill search for active then ill get pagination desc as 1 of 50 - 55 and when i press 2nd page then ill get
51 of 55 - 58.
for total count am hitting DB when i hit 2nd page it is clearing form param values ...

here is the code


var userStore;
var grid;
Ext.require('Ext.data.Store');
Ext.require('Ext.grid.Panel');
Ext.require('Ext.toolbar.Paging');
Ext.require(['Ext.data.*', 'Ext.grid.*']);

Ext.define('Executives', {
extend: 'Ext.data.Model',
fields: ['id', 'firstName', 'lastName', 'active','deleted','lastUpdatedBy','lastUpdatedDt']
});

Ext.onReady(function(){

userStore = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
autoSave: true,
remoteSort:true, ////// HACK: stop buffered/remoteSort:false from marking columns unsortable
pageSize: 50,
model: 'Executives',
proxy: {
type: 'ajax',
// url:'#{request.contextPath}/seam/resource/restv1/sales/load',
api:{
read: '#{request.contextPath}/seam/resource/restv1/executives/load',
create: '#{request.contextPath}/seam/resource/restv1/executives/create',
update: '#{request.contextPath}/seam/resource/restv1/executives/update',
destroy: '#{request.contextPath}/seam/resource/restv1/executives/destroy'
},
actionMethods: {
read: 'POST',
create: 'POST',
update: 'POST',
destroy: 'POST'
},
reader: {
type: 'json',
root: 'salesPerson.data',
//record:'SalesPerson',
totalProperty: 'salesPerson.total',
successProperty: 'salesPerson.success',
messageProperty: 'salesPerson.message'
},
writer: {
type: 'json',
allowSingle: true,
root:'executives'
//record:'SalesPerson'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
onCreateRecords: function(records, operation, success) {
//console.log(records);
},


onUpdateRecords: function(records, operation, success) {
reset();
resetGrid();

},


onDestroyRecords: function(records, operation, success) {
//console.log(records);
reset();
reloadGrid();
},

listeners: {
beforeload: function(store,records,options){


},
load: function(store,records,options){
if(null!=records){

if(records.length==0){
noresultDiv.show();
testDiv.show();

}
else{
testDiv.show();
noresultDiv.hide();
}
}
},
write: function(userStore, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
// Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
}
}
}); // userstore

function renderTopic(value, p, record) {
return Ext.String.format(
'<a href="/scheduling-db/views/admin/convention/AddEditConvention.seam" target="_blank">{0}</a>',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');


function renderStatus(value, p, record) {

if(record.data['active']) {
return Ext.String.format(
"Active",
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}else{
return Ext.String.format(
"Inactive",
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}

}

grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.Element.get('testDiv'),
plugins: [rowEditing],
store: userStore,
width: 960,
height: 350,
frame: true,
title: 'Executive',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id',
hidden:true
},{
text: 'First Name',
flex: 1,
name:'firstName',
sortable: true,
//renderer: renderTopic,
dataIndex: 'firstName',

field: {
xtype: 'textfield',
allowBlank: false

}

}
, {
text: 'Last Name',
flex: 1,
sortable: true,
dataIndex: 'lastName',
field: {
xtype: 'textfield',
allowBlank: false
}
},

{
//xtype: 'radiogroup',
header: 'Status',
flex: 1,
sortable: true,
//xtype: 'fieldcontainer',
defaultType: 'radiofield',
renderer: renderStatus,
dataIndex: 'active',
field: {
xtype: 'radiogroup',
cls: 'x-check-group-alt',
items: [
{boxLabel: 'Active', name: 'active', inputValue: true,checked:true},
{boxLabel: 'Inactive', name: 'active', inputValue: false}
],
// setValue:function(value) {
// var val = Ext.isObject(value) ? value : {type:value};
// console.log(this);
// Ext.form.RadioGroup.prototype.setValue.call(this, val);
// }
setValue: function (value) {
if (!Ext.isObject(value)) {
var obj = new Object();
obj[this.name] = value;
value = obj;
}
Ext.form.RadioGroup.prototype.setValue.call(this, value);
}

}

},
/* {
header: 'Status',
flex: 1,
sortable: true,
dataIndex: 'isActive',
},*/

{
text: 'Last Updated By',
flex: 1,
sortable: true,
dataIndex: 'lastUpdatedBy'
}, {
//xtype: 'datefield',
//sortable: false,
text: 'Last Updated',
flex: 1,
sortable: true,
renderer: Ext.util.Format.dateRenderer('d-M-Y'),
dataIndex: 'lastUpdatedDt'
},{
xtype: 'actioncolumn',
width:60,
sortable: false,
items: [{
icon: '#{request.contextPath}/images/edit-btn-2011.png',
tooltip: 'Edit Executive',
handler: function(grid, rowIndex, colIndex) {
rowEditing.startEdit(rowIndex, 0);
}
},{
icon:'#{request.contextPath}/images/trash-btn-2011.png',
tooltip: 'Delete Executive',
dataIndex: 'id',
handler: function(grid, rowIndex, colIndex) {
Ext.MessageBox.confirm('', "Would you like to delete this Executive?", function (btn) {
if (btn == 'yes')
userStore.removeAt(rowIndex);
});
}
}]
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: userStore,
layout: 'hbox', // same store GridPanel is using
dock:'bottom',
align:'center',
hideRefresh: true,
displayInfo: true,
displayMsg: 'Executives {0} - {1} of {2}',
emptyMsg: "No Executives to display"
},
{
xtype: 'pagingtoolbar',
store: userStore, // same store GridPanel is using
dock: 'top',
align:'center',
hideRefresh: true,
displayInfo: true,
displayMsg: 'Executives {0} - {1} of {2}',
emptyMsg: "No Executives to display"
},{
xtype: 'toolbar',
dock: 'bottom',
align:'center',
items: [{
text: 'Add Row',
iconCls: 'icon-add',
handler: function(){
// empty record
// edit = this.editing;
//edit.cancelEdit();
userStore.insert(0, new Executives({'active':true}));
rowEditing.startEdit(0, 0);
}
}] //items end
}] //docked items end
})//Grid End

});//Onready

function reloadGrid(){

//conventionStore.proxy.params = { email:'nat'};

var fName="";
var lName="";
var checkValue = "";
var sortValue="";

if(null != document.getElementById("searchForm:firstName").value && ""!= document.getElementById("searchForm:firstName").value)
fName = document.getElementById("searchForm:firstName").value;
else
fName="";
if(null != document.getElementById("searchForm:lastName").value && ""!= document.getElementById("searchForm:lastName").value)
lName = document.getElementById("searchForm:lastName").value;
else
lName = "";

if(document.getElementById("searchForm:active").checked && !document.getElementById("searchForm:inactive").checked ){
checkValue="active";
}
else if(document.getElementById("searchForm:inactive").checked && !document.getElementById("searchForm:active").checked){
checkValue="inactive";
}
else if(document.getElementById("searchForm:active").checked && document.getElementById("searchForm:inactive").checked){
checkValue= "both";
}else {
checkValue= "both";
}



userStore.loadPage(1, {
params: {
firstName: fName,
lastName: lName,
checkValue: checkValue

}
});
//userStore.removeAll();
// userStore.load({
// params: {
// firstName: fName,
// lastName : lName,
// checkValue:checkValue,
// page:page,
// start:start,
// maxRows:50

// }
// });

//Ext.getCmp('testDiv').getView().refresh();
if(userStore.data.length== 0){
testDiv.hide();
}
}
function reset(){
testDiv.show();
document.getElementById("searchForm:firstName").value = "";
document.getElementById("searchForm:lastName").value="";
document.getElementById("searchForm:inactive").checked = true;
document.getElementById("searchForm:active").checked = true;


}
function resetGrid(){


reset();
//conventionStore.proxy.params = { email:'nat'};

var fName="";
var lName="";
var checkValue = "both";
var sortValue="";

//userStore.removeAll();

userStore.loadPage(1,{
params: {
firstName: fName,
lastName: lName,
checkValue: checkValue

}
});

//Ext.getCmp('testDiv').getView().refresh();
if(userStore.data.length== 0){
testDiv.hide();
}
}


Ext.override(Ext.grid.RowEditor, {
showToolTip: function(msg) {
}
});


server side is :


public Long getTotalCount(ProgramSearchForm form){
Long count = null;
if(null != form){
StringBuffer query = new StringBuffer("select count(*) from Executives executives where executives.deleted = 0 ");
if (form.getFirstName() != null && !form.getFirstName().isEmpty()
&& !form.getFirstName().equals("")) {
query.append("and lower(trim(executives.firstName)) like lower(trim(:firstName)) ");
}
if (form.getLastName() != null && !form.getLastName().isEmpty()
&& !form.getLastName().equals("")) {
query.append("and lower(trim(executives.lastName)) like lower(trim(:lastName)) ");
}
if (form.getCheckValue() != null
&& !form.getCheckValue().equals("both")) {
query.append("and executives.active = :active ");
}
Query q = this.entityManager.createQuery(query.toString());

if (form.getFirstName() != null && !form.getFirstName().isEmpty()
&& !form.getFirstName().equals("")) {
q.setParameter("firstName", "%" + form.getFirstName() + "%");
}
if (form.getLastName() != null && !form.getLastName().isEmpty()
&& !form.getLastName().equals("")) {
q.setParameter("lastName", "%" + form.getLastName() + "%");
}
if (form.getCheckValue() != null
&& form.getCheckValue().equals("active")) {
q.setParameter("active", true);
}
if (form.getCheckValue() != null
&& form.getCheckValue().equals("inactive")) {
q.setParameter("active", false);
}
count= (Long) q.getSingleResult();
}else{
StringBuffer query = new StringBuffer("select count(*) from Executives executives where executives.deleted = 0 ");
Query q = this.entityManager.createQuery(query.toString());
count= (Long) q.getSingleResult();
}
return count;

}

@SuppressWarnings("unchecked")
public ExecutivesWrapper load(@Form ProgramSearchForm form) throws ParseException, JSONException{

System.out.println("Calling load " + form.getCurrentPage());
String sortProperty = null;
String sortDirection = null;

if(null != form.getSort() && !form.getSort().equals("")){


JSONArray array = new JSONArray(form.getSort());
JSONObject obj = array.getJSONObject(0);
if(null != obj.get("property")){
sortProperty = (String) obj.get("property");
}
if(null != obj.get("direction")){
sortDirection = (String) obj.get("direction");
}

}
StringBuffer query = new StringBuffer(
" from Executives executives where 1 = 1 and executives.deleted = 0 ");
if (form.getFirstName() != null && !form.getFirstName().isEmpty()
&& !form.getFirstName().equals("")) {
query.append("and lower(trim(executives.firstName)) like lower(trim(:firstName)) ");
}
if (form.getLastName() != null && !form.getLastName().isEmpty()
&& !form.getLastName().equals("")) {
query.append("and lower(trim(executives.lastName)) like lower(trim(:lastName)) ");
}
if (form.getCheckValue() != null
&& !form.getCheckValue().equals("both")) {
query.append("and executives.active = :active ");
}
//for sorting
if(form.getSort()==null || form.getSort().equals("")){
query.append(" order by lower(trim(executives.firstName)) asc");
}
else{
if(sortProperty.equals("firstName") || sortProperty.equals("lastName") || sortProperty.equals("lastUpdatedBy")){
query.append(" order by lower(trim(executives."+ sortProperty +")) " + sortDirection);
}
else if(sortProperty.equals("lastUpdatedDt")){
if(sortDirection.equalsIgnoreCase("asc")){
query.append(" order by lower(trim(executives."+ sortProperty +")) desc" );
}else{
query.append(" order by lower(trim(executives."+ sortProperty +")) asc" );
}
}
else {
query.append(" order by executives."+ sortProperty +" " + sortDirection);
}
}
Query q = this.entityManager.createQuery(query.toString());


if (form.getFirstName() != null && !form.getFirstName().isEmpty()
&& !form.getFirstName().equals("")) {
q.setParameter("firstName", "%" + form.getFirstName() + "%");
}
if (form.getLastName() != null && !form.getLastName().isEmpty()
&& !form.getLastName().equals("")) {
q.setParameter("lastName", "%" + form.getLastName() + "%");
}
if (form.getCheckValue() != null
&& form.getCheckValue().equals("active")) {
q.setParameter("active", true);
}
if (form.getCheckValue() != null
&& form.getCheckValue().equals("inactive")) {
q.setParameter("active", false);
}


List<Executives> salesPersonList = null;
//(ArrayList<Executives>) q.getResultList();

salesPersonList = q.setFirstResult(form.getRowOffset())
.setMaxResults(form.getMaxRows()).getResultList();

return ExtJSReturn.mapOK(salesPersonList,getTotalCount(form));
}

please help me ....:(

skirtle
1 Nov 2012, 2:08 AM
@santoshballary. Please use [CODE] tags when posting code. I've edited your last post to add them in.

Could you please start your own threads for your problems rather than adding them onto someone else's question?

For what it's worth, the new problems you're having seem to be because you aren't adding these parameters to the extraParams (see my previous post). You'll need to use something like userStore.getProxy().setExtraParam rather than passing the parameters to the load call.

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.proxy.Server-method-setExtraParam