How to restrict fire call when store will create - extjs

My store getting created in render function that one call get fired, but my requirement call should fired conditionally but store instance should create always.
For this requirement I am using following code for create store in render function,
Ext.create('mypage.store.customTreeGridStore', {
storeId: 'myStore',
proxy: {
type: 'rest',
startParam: undefined,
filterParam: undefined,
sortParam: undefined,
paramsAsJson: true,
limitParam: 'pageSize',
pageParam: 'pageNo',
restService: 'rest',
restOperation: 'getOperation',
url: me.urlparams,
autoLoad: true,
actionMethods: {
read: 'POST'
}
}
});
and I have added listener in store
beforeload: function(store, operation, eOpts) {
return booleanFlag;
}
When page is loading I could get beforeLoad boolean flag false and while page refreshing call is not getting fired but Store instance created successfully,
but I have text box where I am searching grid records. When I am searching any text in textbox I could not getting any record in grid.
But once booleanFlag is true I can search result in grid successfully . So what is the best way to resolve this issue?

Your store has autoLoad set to true, and to force the store to not load automatically all the time, you use the beforeload event to stop the autoLoad. Is this assessment correct?
How about, instead of
Ext.create('mypage.store.customTreeGridStore', {
proxy:{
autoLoad: true,
},
listeners:{
beforeload: function(store, operation, eOpts) {
return booleanFlag;
}
}
})
removing autoLoad and loading the store after creation only if required?
var store = Ext.create('mypage.store.customTreeGridStore', {
proxy:{
autoLoad: false,
}
});
if(booleanFlag) store.load();

Related

how do we know which event fired load event in extjs 4.1 store

I am using extjs 4.1 store. Which looks like this:
Ext.define('myStore', {
extend: 'Ext.data.Store',
requires: ['myModel'],
autoLoad: false,
proxy: {
type: 'ajax',
url: '/aaa/bbb',
timeout: '90000',
reader: {
type: 'json',
root: 'data'
}
},
listeners: {
'beforeload': function (store, options) {
},
'load': function (store, options) {
}
},
sorters: [{
property: 'SortOrder',
direction: 'ASC'
}]
});
initially I am loading data through proxy. Later based on user interaction, I will extract the data from the store usign store.proxy.reader.rawData and store it in some variable.
Then at later stage, I will load into the store from the variable using loadRawData().
When loadRawData() is called, it also fires the load event.
What I want: I want to diffrentiate between load event fired due to proxy loading the data for the first time vs load event fired due to loadRawData().
Upgrading to ExtJS version 5.1 allows you access to store.loadCount which will let you to check whether this is the first load or a subsequent load. http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.data.Store-property-loadCount
If you don't want to upgrade, you could manually implement this feature (e.g. increment a custom variable on your store in the 'load' listener) and check it to see which behaviour you want to perform.

Store.load() does not execute after setting a new model

I want to reconfigure a GridPanel using myGridPanel.reconfigure(store,columns). I can't use metachange event for this because I need to make a separate call for metadata (back-end constraint).
I make the call for metadata, I receive the metadata that I need and then create a new model with a new set of fields and a new proxy (new url). I set the model to the existing store (which is bind to my gridPanel) and then I call store.loadPage(1) (because I use a bufferedStore) and myGridPanel.reconfigure(store,meta.columns).
My problem is that store.loadPage(1) is not happening. I don't know what I am missing...
My store looks like this:
Ext.define('Foo.store.Results', {
extend: 'Ext.data.BufferedStore',
requires: [
'Foo.model.ResultRecord'
],
config: {
remoteFilter: true
},
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
pageSize: 50,
storeId: 'Results',
autoLoad: false,
model: 'Foo.model.ResultRecord',
leadingBufferZone: 50,
trailingBufferZone: 10
}, cfg)]);
}
});
I create a new model like this:
createResultModel: function(url,fields) {
console.log('createResultsModel called');
return Ext.define('Foo.model.ResultsModel'+Ext.id(), {
extend: 'Ext.data.Model',
fields: fields,
proxy: {
type: 'ajax',
url: url,
useDefaultXhrHeader: false,
reader: {
type: 'json',
rootProperty: 'data'
}
}
});
}
And I change the model and reconfigure grid like this:
myStore.setModel(me.createResultModel('resources/data/results.json',meta.fields));
myStore.loadPage(1);
resultsGrid.reconfigure(myStore,meta.columns);
Thank you!
It seems that the store.load() was called but with the wrong url.... . I don't know if that is the desired functionality but it seems that the proxy from the old model was set to the store and when I set the new model, the proxy remained the old one.

Sencha Touch Load Mask

I have list and pull down to refresh plugin in it. When the refresh function fires i would like to show the load mask. But its not showing there. when i commented store.removeAll(); line i can see the loadmask working. I dont konw whats the problem with store.removeAll(). Please help me to solve this issue. Thanks in advance
{
xclass: 'Ext.ux.PullRefreshFn',
pullRefreshText: 'Pull down for refresh Contacts!',
refreshFn: function() {
console.log('pull refresh working');
Ext.Viewport.setMasked({
xtype: 'loadmask',
message: 'Please Wait...'
});
var store = Ext.getStore('Contactsstore');
store.removeAll();
var url = apiurl+'Contact.ashx?switch=GetContactList&api_id=4&getDataAgain=true';
store.getProxy().setUrl(url);
store.loadPage(1,{
callback: function (records, operation, success, response) {
if (success==1) {
Ext.Viewport.setMasked(false);
} else {
Ext.Viewport.setMasked(false);
}
}
});
Ext.getCmp('searchcontact').reset();
}
}
Here is my Store configuration
Ext.define('WinReo.store.Contactsstore', {
extend: 'Ext.data.TreeStore',
requires: [
'WinReo.model.Contactsmodel'
],
config: {
storeId: 'Contactsstore',
defaultRootProperty: 'items',
model: 'WinReo.model.Contactsmodel',
autoLoad: false,
pageSize: 20,
proxy: {
type: 'ajax',
method:'post',
id: 'Contactsstoreproxy',
url:apiurl+'Contact.ashx?switch=GetContactList&api_id=4&getDataAgain=false',
reader: {
type: 'json',
rootProperty: 'items'
}
},
listeners: {
load: function(store, records, successful, operation, eOpts) {
callback:{
succes:
if(store.getCount()!=0){
var RecordCount=store.getAt(0).get('RecordCount');
//console.log('RecordCount',RecordCount);
store.setTotalCount(RecordCount);
var storectscount = store.getTotalCount();
//Ext.Msg.alert('Store Total count',storectscount, Ext.emptyFn);
}
}
}
}
}
}
});
Loading masks won't get rendered until the browser has a chance to render them, and that won't happen until your Javascript code completes. I suspect that for some reason, the removeAll call isn't completing quickly (or at all), or an event listener on clear isn't completing like it needs to. Check your store's configuration for syncRemovedRecords: true and autoSync: true. You can also try removeAll(true) to keep the clear event from firing.
Update
Looking at your store definition, I can see at least one problem: Your load listener doesn't look like it's defined properly. You're defining a callback field inside of a function (which isn't going to compile), and 'succes' is misspelled. Is this what you had in mind?
load: function(store, records, successful, operation, eOpts) {
if(successful === true && store.getCount()!=0){
var RecordCount=store.getAt(0).get('RecordCount');
store.setTotalCount(RecordCount);
}
}
}

ExtJS 4.1 - Changing value of JsonStore

I use ExtJS 4.1. Here's my model and store:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['status', 'data', 'data1', 'data2']
});
var store1 = Ext.create('Ext.data.JsonStore', {
model: 'MyModel',
proxy: {
type: 'ajax',
url : 'actionJsonServlet'
},
autoLoad: true
});
After loading the store by Ajax, I want to change value of first "status" (just for first row) of the JsonStore.
I tried lines below but it doesn't work (record is undefined at line 2):
var record = store1.getAt(0);
record.set("status", "Waiting");
I have this error:
Cannot call method 'set' of undefined
Most likely your issue is due to asynchronous nature of store load. Depending on how your code is written you maybe attempting to do store operations too early, before the store is loaded even though you have autoLoad turned on.
The best approach is to set up a load event listener on the store and perform your operation then.
Her is an example:
Ext.define('MyApp.store.Drafters', {
extend:'Ext.data.Store',
model:'MyApp.model.User',
autoLoad:true,
proxy:{
type:'ajax',
url:'user/drafters.json',
reader:{
type:'json',
root:'data'
}
},
listeners:{
load:function (store, recs) {
store.insert(0, {uid:'', name:''}); //adding empty record to enable deselection of assignment
}
}
});

Extjs - grid shows loading mask continously

I am using extjs(4.1.0) MVC .
I have a custom grid set up with combo box filter, datepicker filters etc. I am attaching snippets from the controller, view, and store.
I response coming in is different from the model, hence, the response is intercepted by overriding a read() of the story proxy.
Also data needs to be sent as Json data in payload, so the buildRequest() of store proxy is also overridden to add json data to request. (all sort, paging params are also added here)
Adding to this - the view has infinite scrolling.
The view loads fine the first time. But on combobox change/date change, store is reloaded with passing these as json params in request.
I see the response in XHR in firebug/chrome, but the grid continously shows the loading mask, waiting for loading.. Kindly help on what could be going wrong.
Ext.define('Message.store.ListingStore', {
extend: 'Ext.data.Store',
model: 'Message.model.ListingModel',
autoLoad: true,
remoteSort: true,
purgePageCount:0,
buffered: true,....
.......
proxy: {
type: 'ajax',
actionMethods: {
read: 'POST'
},
url: 'http://localhost:8080
buildRequest: function(operation) {
Ext.apply(request, {
params: null,
jsonData: Ext.apply(request.params, {
page: operation.page,
start: operation.start,
limit: operation.limit,
catId:catValue,
sort:operation.sorters[0].property,
dir:operation.sorters[0].direction
})
});
........return request;
}
root: 'data',
totalProperty:'total',
successProperty :'success'
},
.....
});
//controller
Ext.define('Message.controller.Listing', {
extend:'Ext.app.Controller',
stores: ['ListingStore','SubscriptionStore','SubCategoryMasterStore','PriorityMasterStore'],
models: ['ListingModel'],
views: [
'MessageListing'
],
init:function () {
var controller = this;
'messagelisting combo' : {
select : this.handleComboSelect
},
'messagelisting datefield' : {
select : this.handleDateSelect
},
.....
handleComboSelect : function(gridview, el, rowIndex, colIndex, e, rec, rowEl) {
this.getStore('ListingStore').load();
},
handleDateSelect: function(gridview, el, rowIndex, colIndex, e, rec, rowEl) {
this.getStore('ListingStore').load({callback: function(response){
}});
This is a very complex case, so i am unable to post the entire code.
Thank You.
I think you have the issue described by me here:
http://www.sencha.com/forum/showthread.php?242445-Grid-filters-race-conditions-FiltersFeature
Regards,
Alek

Resources