I am using datefields and comboboxes to make a selection to load a store. When the store is loaded into a grid i have a paging toolbar. So far so good.
When the user clicks on the next page the pagingtoolbar is not sending the data from the datefields with it. I read something about baseparams but this aint working.
I use EXTJS 4.1
This is my store:
NL.commListDetails = new Ext.data.Store({
model: 'stepDetails',
pageSize: 20,
loadMask: false,
sortOnLoad: true,
proxy: {
type: 'ajax',
url: detailURL,
startParam: '',
limitParam: '',
pageParam: '',
reader: {
type: 'json',
root: 'slaevents',
totalProperty: 'slaevents[0].totalCount'
}
},
baseParams: {fromDate:NL.startDate},
autoLoad: false
});
And here is the paging toolbar
bbar: Ext.create('Ext.PagingToolbar', {
store: NL.commListDetails,
displayInfo: true,
displayMsg: 'Displaying record {0} - {1} of {2}',
emptyMsg: "No records to display",
}),
I need to send fromDate, endDate with the paging. Both available in NL.startDate and NL.endDate. How can i send this when i click on next page?
There is no configuration of baseParams for the store. To send extra params you should use the extraParams configuration for the ajax proxy.
proxy: {
type: 'ajax',
....
extraParams: {fromDate:NL.startDate},
..
},
Also defining the params when creating the store will mean they are static, so they won;t change if you modify the datefields or comboboxes...
So a fix will be to listen to the change event on the combobox or datefield and reset the extra params:
change: function(this,value){
NL.commListDetails.getProxy().getExtraParams().comboName = value;
}
Edit
I stand corrected. There is a baseParams but it's on elementloader and that is called only when load is directly invoked, which i think is not the case for the paging toolbar which uses loadPage. I might be wrong on this one, but i'm using extraparams and it works ok.
Related
I am following the code in the link below to page data on a Ext.grid.Panel without success. Data is rendered altogether in the panel without paging. Apparently, the paging toolbar has no data to display but it is correctly configured to the store that has the data and it is hanging as an item of the grid.
I have copied the exact configurations of store and grid from the example below but nothing happened. Why is the data not being paged?
http://jsfiddle.net/jardalu/TE4ah/
This is my store which is linked to the grid and the paging toolbar:
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
pageSize: 50,
remoteSort: true,
storeId: 'Users',
autoLoad: false,
model: 'AICWeb.model.User',
sortOnLoad: false,
proxy: {
type: 'ajax',
type: 'localstorage',
simpleSortMode: true,
reader: {
type: 'xml'
}
},
sorters: {
property: 'email'
}
}, cfg)]);
}
If you are using localstorage you need to implement the PagingMemoryProxy. This should be the only type on the proxy config, and enable the paging config:
proxy: {
type: 'pagingmemory'
enablePaging: true,
...
}
Hello i'm trying to do search in combobox.It's working but search only in current page i'm using pagination with search too i need to search in all pages not current page only
Any suggestion
{
xtype: 'combo',
fieldLabel: 'Organization Id',
name: 'company_id',
displayField:'name_en',
valueField:'id',
store: Ext.create('UserApp.store.PicklistList', {
autoLoad: true,
fields: ['id', 'name_en', 'name_se'],
proxy:{
type:'ajax',
api: {
read:'picklist/listitems'
},
reader: {
type: 'json',
root: 'root',
successProperty: 'success'
},
extraParams:{
table :'table_name'
}
}
}),
editable: true,
autoSelect: false,
selectOnFocus:true,
typeAhead:true,
minChars:2,
queryMode: 'local',
mode: 'local',
pageSize: 25,
width:370,
allowOnlyWhitespace: false,
regex: /[a-zA-Z0-9]+/, // avoid to empty data only
})
I'm using combobox with queryMode : 'remote' and doing a search withing combobox for matches. I'm doing a 'contains' search - meaning it looks for matches anywhere in the result string not just beginning and also it searches for values not only in current page but in the entire resultset. I'm using extjs 4.0.7 and i achived it by overriding doQuery method.
`doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if(this.queryMode == 'remote') {
this.store.load({
params: this.getParams(queryString)
});
}
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}`
your store needs to be setup for pagination
your server needs to handle pagination correctly based on the parameters received from the store's proxy. The proxy will send up querystring parameters like ?page=1&start=0&limit=25, and your server needs to return only 25 (for example) records and a total parameter.
{"total":101,"data":[{model data}, {model data}, ...]}
despite the documentation, the pageSize property in combobox is actually a boolean, turning pagination on if 1 or greater.
I init store variable in 'initComponent' of gridpanel like
initComponent: function() {
var store = Ext.create('Ext.data.Store', {
model: 'MyDataObject',
pageSize:_end,
proxy: {
type: 'ajax',
url: myurl,
reader: {
type: 'json',
totalProperty: 'total', // total data, see json output
root: 'results' // see json output
}
}
});
this.store = store;
this.callParent(arguments);
this.store.load({params:{start:_star, limit:_end}
});
I call store in pagingtoolbar like
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: this.store,
pageSize: _end,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: 'No results'
}
]
In my gridpanel still have data but my bottom show "no results" like
I think problem is store: this.store,. How can i make it work thanks.
You can define a store like this
Ext.define('MyApp.store.MyDataStore', {
extend: 'Ext.data.Store',
model: 'MyDataObject',
storeId: 'myStoreId',
pageSize:_end,
proxy: {
type: 'ajax',
url: myurl,
reader: {
type: 'json',
totalProperty: 'total', // total data, see json output
root: 'results' // see json output
}
}
});
and then assign the myStoreId to the store-config of both the grid panel and the pagingtoolbar and the framework (the StoreManager) should create a single store which is assigned to both.
You can then either set autoload=true on your store or create a new store in initComponent of your grid and there do the loading manually.
I met this stranger problem yesterday,before I fixed this problem ,I guess the status were not synchronization of stores in both grid and pagingbar ,I spent a long to debug this problem with Firebug ,in other words the stores are not the same one ,they just the same instance of a store ,so you can fix this problem in two ways,the first is create a global variable of store,both them could share it the second is use bindStore method.for example support you have grid extension likes below
this.on('afterrender',function(){//this is grid itself
this.getBottomToolbar().bindStore(this.store)//set store of paggingtoolbar
},this);
I found the solution in here Remote paging grid in extjs
and the code must like:
this.store = store;
this.dockedItems = [{
xtype: 'pagingtoolbar',
store: this.store,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: 'No results',
dock: 'bottom',
displayInfo: true,
pageSize: 22
}];
this.callParent(arguments);
this.store.load({params:{start:0, limit:22}});
I am using PagingToolbar to filter my result search, I want do display 20 result per page, but in my grid still display all records.
The bbar in my grid
bbar: Ext.create('Ext.PagingToolbar',
store: store,
pageSize: 20,
displayInfo : true,
plugins: Ext.create('Ext.ux.ProgressBarPager', {})
}),
My Store
Ext.define('Mystore', {
extend: 'Ext.data.Store',
model: 'Mymodel',
pageSize: 20,
autoLoad: true,
remoteSort: true,
proxy: {
type: 'rest',
url: 'search',
reader: {
type: 'json',
root: 'root',
idProperty: 'id'
},
writer: {
type: 'json',
writeAllFields: true
}
}
});
Anybody could help me ??
Thanks.
Your /search REST service that provides the data for the store needs to support the start, limit, and/or page parameters so that the store can request a single page of results at a time.
To support the limit parameter, your service must limit the number of returned results to no more than the count specified in that parameter. You'd typically implement that by passing the limit value through to the database query you're using to provide the results.
Your Store must contain this parameter with start and limit and your backend need to use these parameters.
baseParams : {
start:0, limit:20
}
In java backend,
String startPage = request.getParameter("start");
String limits = request.getParameter("limit");
It's kind of filter for your grid.
I am having combobox with in window->form->combo, iam binding data from grid to combo using form.loadRecord(record).
My issue is:
After binding the data, i am trigger the combo to change the combo data ,For the first time combo expand little and hide automatically after second click only combo items loads correctly.
{
xtype: 'combobox',
editable: false,
id: 'USERTYPECmbo',
queryMode: 'remote',
displayField: 'USERTYPE',
store: Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['USERTYPE'],
proxy: {
type: 'ajax',
extraParams: {
typeName: 'USERTYPE'
},
url: 'USERTYPE.htm',
reader: {
type: 'json',
root: 'res'
}
},
listeners: {
load: function (store, options) {
var combo = Ext.getCmp('USERTYPECmbo');
combo.setValue(combo.getValue()); //Set the remote combo after the store loads.
}
}
}),
name: 'USERTYPE',
fieldLabel: 'USER TYPE'
}
point me where iam going wrong or any property need to be added for component.
Try to add
queryMode: 'local'
to your combobox properties
It's because valueField is not defined in your config object(while displayField is set). When extjs tries to load your combo he needs both value and display fields to display your combo correctly but in render time,your valueField is not yet set and he`s waiting for the ajax request sent to server and response is sent back.
In your listener you are setting the combo value while its not rendered yet.So when you click on your combo for the second time,exactly after remote JSON is loaded then combo fields are set.
{
xtype : 'combobox',
editable : false,
id:'USERTYPECmbo',
queryMode: 'remote',
displayField: 'USERTYPE',
valueField: 'USERTYPE',//set whatever field you like in your json
store :new Ext.data.Store({
autoLoad: true,
fields: [ 'USERTYPE' ],
proxy: {
type: 'ajax',
extraParams: {typeName : 'USERTYPE'},
url : 'USERTYPE.htm',
reader: {
type: 'json',
root : 'res'
}
}
}),
name : 'USERTYPE',
fieldLabel: 'USER TYPE'
}
Update:
One issue i didn't notice was that you created the store using Ext.create and because of that,extjs would try to Get your JSON twice(just check it using firebug) while one request would be enough.Just use new instead of Ext.create.I tested your code in my local server and its working correctly.if you still have the same issue please provide a download link to your form js + html + Store so i could review ur code.You may download my test files built on your code and working from here.tested on FF 6 and opera 10 and IE9