I have tried to refresh the Grid every 5 or 10 seconds which is using REST Proxy, but the grid is not getting refreshed more than once. Please find the code which we have tried.
Ext.define('App.Store.DeviceStore', {
extend: 'Ext.data.Store',
requires: [
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'app.store.DeviceStore',
model: 'App.model.DeviceModel',
activeRefreshTask:false,
pageSize: 5,
autoLoad: {
pageSize: 5
}
}, cfg)]);
},listeners:{
'load':function(store,records,successful,operation){
if(successful === true && store.activeRefreshTask === false){
var task = {
identifyId: 'deviceListStore',
run: function() {
if (App.app._currentPage == 'devicesform') {
store.reload();
} else {
Ext.TaskManager.stop(this);
}
},
interval: '10000'
}
Ext.TaskManager.start(task);
store.activeRefreshTask = true;
}
}
}
});
The model for the above store is
Ext.define('App.model.DeviceModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.String'
],
proxy:{
type:'rest',
reader: {
type: 'json',
rootProperty: 'data',
totalProperty:'total'
},
useDefaultXhrHeader: false,
headers:{'Content-Type':'application/json'},
api: {
read: 'url given gere'
}
},
fields: [
{
type: 'string',
name: 'id'
},
{
type: 'string',
name: 'name'
},
{
type: 'string',
name: 'desc'
},
{
type: 'string',
name: 'ipAddr'
}
]
});
I have found the issue , You have passed the interval as string in place lo number.
just change to interval: '10000' to inteval: 10000 and your taskrunner will runs fine.
var runner = new Ext.util.TaskRunner(),
updateStore , task;
updateStore = function() {
if (App.app._currentPage == 'devicesform') {
store.load();
} else {
Ext.TaskManager.stop(this);
}
};
task = runner.start({
run: updateStore ,
interval: 1000
});
probably your store.reload is sending again the same params on the request, so with a request that not change nothing changes.
Related
Using Ext JS 7.1 Modern, I have prepared an example to show the problem.
When I have remote filters on my main store, binding the dataview.List to a ChainedStore correctly handles my local filtering. However, when I also add a PullRefresh plugin to the list, I get an error during pull refresh. I see from the source code that the plugin doesn't consider the possibility that a list's store can be a ChainedStore.
I have tried to explain the problem with a Sencha Fiddle and also attached the code below.
I have temporarily solved the problem by overriding the fetchLatest and onLatestFetched methods of Ext.dataview.pullrefresh.PullRefresh plugin, to use the source store if the list's store is a ChainedStore. But I believe the source code must be updated to handle this case.
app.js
Ext.define('App.model.Test', {
extend: 'Ext.data.Model',
fields: ['id', 'firstName', 'lastName']
});
Ext.define('App.store.Test', {
extend: 'Ext.data.Store',
alias: 'store.teststore',
model: 'App.model.Test'
});
Ext.define('App.viewmodel.Test', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test',
data: {
query: ''
},
stores: {
test: {
type: 'teststore',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'names.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
remoteFilter: true,
filters: {
property: 'id',
value: 1
}
},
chained: {
type: 'chained',
autoLoad: true,
source: '{test}'
}
}
});
Ext.define('App.controller.TestController', {
extend: 'Ext.app.ViewController',
alias: 'controller.testcontroller',
doSearch: function (field) {
var list = this.lookup('list'),
store = list.getStore(),
value = field.getValue();
if (Ext.isEmpty(value)) {
store.removeFilter('firstName')
} else {
store.filter([{
property: 'firstName',
value: value,
operator: 'like'
}])
}
}
});
Ext.define('App.dataview.TestList', {
extend: 'Ext.dataview.List',
xtype: 'testlist',
viewModel: {
type: 'test'
},
plugins: [{
type: 'pullrefresh',
mergeData: false
}],
emptyText: 'Name not found',
bind: {
store: '{chained}'
},
itemTpl: '<div class="contact">{id} <b>{firstName} {lastName}</b></div>'
});
Ext.define('App.MainView', {
extend: 'Ext.Panel',
controller: 'testcontroller',
fullscreen: true,
viewModel: {
type: 'test'
},
items: [{
xtype: 'searchfield',
ui: 'solo',
placeholder: 'Search names',
listeners: {
buffer: 500,
change: 'doSearch'
},
bind: {
value: '{query}'
}
}, {
reference: 'list',
xtype: 'testlist'
}]
})
Ext.application({
name: 'App',
mainView: 'App.MainView'
});
names.json
var data = [{
id: 1,
firstName: 'Peter',
lastName: 'Venkman'
}, {
id: 2,
firstName: 'Raymond',
lastName: 'Stantz'
}, {
id: 3,
firstName: 'Egon',
lastName: 'Spengler'
}, {
id: 4,
firstName: 'Winston',
lastName: 'Zeddemore'
}]
var results = data.filter(function(record) {
if (params.filter) {
return record.id > params.filter[0].value
}
})
return {
"success": true,
"data": results
}
App.override.dataview.pullrefresh.PullRefresh:
Ext.define('App.override.dataview.pullrefresh.PullRefresh', {
override: 'Ext.dataview.pullrefresh.PullRefresh',
privates: {
fetchLatest: function() {
const store = this.getStore().isChainedStore ? this.getStore().getSource() : this.getStore()
store.fetch({
page: 1,
start: 0,
callback: this.onLatestFetched,
scope: this
});
},
onLatestFetched: function(newRecords, operation, success) {
var me = this,
list = me.getList(),
store = list.getStore().isChainedStore ? list.getStore().getSource() : list.getStore(),
length, toInsert,
oldRecords, newRecord, oldRecord, i;
if (success) {
if (me.getMergeData()) {
oldRecords = store.getData();
toInsert = [];
length = newRecords.length;
for (i = 0; i < length; i++) {
newRecord = newRecords[i];
oldRecord = oldRecords.getByKey(newRecord.getId());
if (oldRecord) {
oldRecord.set(newRecord.getData());
}
else {
toInsert.push(newRecord);
}
}
store.insert(0, toInsert);
}
else {
store.loadRecords(newRecords);
}
me.setLastUpdated(new Date());
}
me.setState('loaded');
list.fireEvent('latestfetched', me, toInsert || newRecords);
if (me.getAutoSnapBack()) {
me.snapBack(true);
}
}
}
})
Thanks in advance
Since this post, instead of being a question, was a bug report with a possible solution, it has been posted to Ext JS 7.x Community Forums\Ext JS 7.x Bugs.
The above solution, that overwrites the plugin where source store is needed, works if anyone comes across the same issue.
I have a problem when adding a newRecord, the console always outputs [].
Please help me.
_storePR2.add(_key.data);
_storePR2.commitChanges();
var newRecord = _storePR2.getNewRecords();
console.log('newRecord',newRecord);
Output: newRecord []
enter image description here
this my store code and model :
Ext.define('Sasmita.store.vending.purchase.Purchasegoodrec', {
extend: 'Ext.data.Store',
requires: [
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json',
'Ext.data.Field'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
storeId: 'vending.purchase.Purchasegoodrec',
proxy: {
type: 'ajax',
url: 'jsonresult/Sasmita_Vending_Purchase/getPurchaseGoodrec',
reader: {
type: 'json',
root: 'data',
idProperty: 'sitecode2'
}
},
fields: [
{
name: 'purchase_id_tr'
},
{
name: 'parent_id'
},
{
name: 'file_ext'
},
{
name: 'file_name'
},
{
name: 'file_size'
},
{
name: 'description'
},
{
name: 'id'
},
{
name: 'id_file'
},
{
name: 'id_po'
},
{
name: 'qty_hasil'
},
{
name: 'no_pr'
},
{
dateFormat: 'Ymd',
name: 'date_pr',
type: 'date'
},
{
name: 'warehouse'
},
{
name: 'warehouse_name'
},
{
name: 'row_created_by'
},
{
name: 'row_created_datetime'
},
{
name: 'row_changed_by'
},
{
name: 'row_changed_datetime'
},
{
name: 'title'
},
{
name: 'notes'
},
{
name: 'qty_order'
},
{
name: 'no_po'
},
{
name: 'date_po'
},
{
name: 'supplier'
},
{
name: 'package'
},
{
name: 'qty_approve'
},
{
name: 'purchase_product_name'
},
{
name: 'unit'
},
{
name: 'unit_price'
},
{
name: 'total_price'
},
{
name: 'total_price_head'
},
{
name: 'vat'
},
{
name: 'net_price'
},
{
name: 'sum_total'
}
]
}, cfg)]);
}
});
and this my controller action button choose :
var me = this;
var _panel = me.getMainPanel();
var _tabpanel = _panel.down('#tabmaintain');
var _activetab = _tabpanel.getActiveTab();
var _window = button.up('window');
var _grid = _window.down('grid');
//var _girdd = this.getPanelSearch();
//var _grids = _girdd.down('grid');
var _gridSelected = _grid.getSelectionModel().getSelection();
//var row = _grid.store.indexOf(_gridSelected);
//console.log(row);
console.log(_gridSelected);
console.log(_grid);
//console.log(_girdd.down('grid'));
//selected=[];
//Check selected product
if(_gridSelected.length===0){
Ext.Msg.alert('Warning','Please select product');
return;
}
//Submit Product
var _gridPR = _activetab.down('#detailProduct');
var _storePR2 = _gridPR.getStore();
//console.log(_storePR2.data);
Ext.Array.each(_gridSelected,function(_key,_value,item){
//console.log(selected.push(item));
_validate = true;
_storePR2.each(function(_storeData,_storeIndex){
console.log(_key.data);
if(_storeData.data.no_po === _key.data.no_po){
_validate = false;
Ext.Msg.alert('Warning','The Product had been picked');
return;
}
});
if(_validate){
// Add record to the store by data
_storePR2.add(_key.data);
// Get array of new records from the store
var newRecords = _storePR2.getNewRecords();
console.log('newRecord',newRecords);
// Commit changes after getting new records
_storePR2.commitChanges();
_window.close();
}
});
That is because you committed the changes, so there are no longer any 'new records'.
Try to get the new records before committing the changes:
// Add record to the store by data
_storePR2.add(_key.data);
// Get array of new records from the store
var newRecords = _storePR2.getNewRecords();
console.log('newRecord',newRecords);
// Commit changes after getting new records
_storePR2.commitChanges();
Here is a fiddle.
First you need to add records to store and commit changes,then get new records.
grid_store.add({'Name':"ab",'dob':"099"})
grid_store.commitChanges();
var newRecord = grid_store.getNewRecords()
console.log('newRecord',newRecord);
});
Here is a fiddle: http://jsfiddle.net/2p78md5t/3/
Ext.define('myApp.model.SensorStation', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'name',
type: 'string',
mapping: '#name'
//convert: function (value, record) {
// Ext.Msg.alert(value,record.raw);
// //var nodes = rec.raw.querySelectorAll('');
//}
},
{
name: 'lat',
mapping: '#latitude',
type: 'float'
},
{
name: 'lng',
mapping: '#longitude',
type: 'float'
},
{
name: 'locid',
mapping:'#locid',
type: 'string'
}
]
},
proxy: {
type: 'ajax',
url: 'http://webtrak.bksv.com/mel/configuration',
reader: {
type: 'xml',
record:'locations',
rootProperty: 'nmts'
}
}
});
Ext.define('myApp.store.SensorStationStore', {
extend: 'Ext.data.Store',
requires: ['myApp.model.SensorStation'],
config:{
model: 'myApp.model.SensorStation',
storeId: 'SensorStore'
},
autoLoad: true
});
Ext.define('myApp.controller.SensorStations', {
extend: 'Ext.app.Controller',
requires: ['Ext.MessageBox'],
config: {
refs: {
mapComponent: 'main map'
},
control: {
mapComponent: {
maprender: 'onMaprender'
}
}
},
onMaprender: function (mapComponent, googleMap) {
var store, latlng, marker;
// Use Store name when testing on devices
// Use Store ID when testing in browsers
var sensorStore = Ext.data.StoreManager.get('SensorStore');
if (!sensorStore) {
console.log("Store not found");
Ext.Msg.alert('error', "store not found");
return;
}
//else {
// console.log("Store found");
// Ext.Msg.alert('great', "store found");
// //return;
//}
sensorStore.load({
callback: function (records, operation, success) {
mapComponent.setMapOptions({
center: new google.maps.LatLng(-37.899328, 144.843333)
});
if (success) {
Ext.Msg.alert('success', records);
}
else {
Ext.Msg.alert('error', operation);
}
Ext.Msg.alert('records.count = ' + records.length, 'haha');
}
});
}
});
The records.length is always 0.
Could you please point out where I get wrong?
Also I'd like to know the data structure of the records.
Many thanks
In your model put the proxy: {} inside config:{} and in store put autoload: trueinside config:{}
I have a request which, on success, loops through each attribute of a JSON response and adds it to my store:
var request = Ext.Ajax.request({
url: 'MCApp',
jsonData: searchquery,
params: {
start: 0,
limit: itemsPerPage
},
success: function(response) {
mainresponse = response.responseText;
if (mainresponse.length == 0) {
alert('No results returned');
return;
}
var decoded = Ext.decode(mainresponse);
for (var i = 0; i < decoded.elements.length; i++) { // loop over decoded data
var element = decoded.elements[i].element;
var model = {};
for (var x = 0; x < element.attributes.length; x++) { // loop over attributes
var attribute = element.attributes[x];
model[attribute.attrname] = attribute.attrvalue; // mapping element names & attributes
}
newstore.add(model); // implicitly cast data as Model
models[i] = model;
}
newstore.loadRawData(models);
},
failure: function() {
alert('Search Failed: Could not reach the server')
}
});
I have now recreated the requestabove within my store. What I need to do is add these same success and failure functions.
var store = Ext.create('Ext.data.Store', {
storeId: 'resultsetstore',
autoLoad: false,
pageSize: itemsPerPage,
fields: [
{ name: 'id', type: 'auto' },
{ name: 'name', type: 'auto' },
{ name: 'description', type: 'auto' }
],
proxy: {
type: 'ajaxwithpayload', //customized proxy to read "jsonData"
url: 'MCApp',
jsonData: searchquery,
reader: {
type: 'json',
root: 'elements'
}
success: { /* success functions */ },
failure: { /* failure functions */ }
}
});
Here's what my response looks like:
{
"elements":[
{
"element":{
"name":"Element Name",
"id":"Element ID",
"attributes":[
{
"attrname":"id",
"attrvalue":"This is the ID"
},
{
"attrname":"name",
"attrvalue":"This is the name"
},
//etc.
1) Is there any way to recreate these functions on my store?
2) Is decoding my response this way the best way to load my response into my store?
EDIT
I'm using the callback function when I load the store:
store.load({
params: { start: 0, limit: itemsPerPage },
callback: function(options, success, response, records) {
if (success) {
alert(response.responseText);
}
}
});
However, I'm getting an undefined in my alert, and it's telling me there are 0 records loaded. But when I look at my response in Firebug I see my JSON string returned just fine.
Error handling in stores
You can listen for the exception-event on the proxy to capture all the store errors.
And for success on the store load-event
var store = Ext.create('Ext.data.Store', {
storeId: 'resultsetstore',
autoLoad: false,
pageSize: itemsPerPage,
fields: [
{ name: 'id', type: 'auto' },
{ name: 'name', type: 'auto' },
{ name: 'description', type: 'auto' }
],
listeners: {
load: function(store, records, successful, eOpts) {
if (successfull) {
alert('success');
}
}
},
proxy: {
type: 'ajaxwithpayload', //customized proxy to read "jsonData"
url: 'MCApp',
jsonData: searchquery,
reader: {
type: 'json',
root: 'elements'
},
listeners: {
exception: function(proxy, response, operation, eOpts) {
alert('exception');
}
}
}
});
or in the load call itself:
store.load({
callback: function(records, operation, success) {
// ...
}
});
or if you use sync (for saving removed, modified,...)
store.sync({
callback: function(batch, options) {
// ...
},
success: function(batch, options) {
// ...
},
failure: function(batch, options) {
// ...
}
});
I'm defining a store and I want to dynamically assign a Model for it at creation. So if I create my DropDownStore and I don't pass a model config with it it needs to rely on the default model(DropDownModel).
Here is my DropDownModel + DropDownStore:
Ext.define('DropDownModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' }
]
});
Ext.define('DropDownStore', {
extend: Ext.data.Store,
proxy: {
type: 'ajax',
actionMethods: { read: 'POST' },
reader: {
type: 'json',
root: 'data'
}
},
constructor: function(config) {
var me = this;
if (config.listUrl) {
me.proxy.url = config.listUrl;
}
me.model = (config.model) ? config.model : 'DropDownModel'; //This line creates some weird behaviour
me.callParent();
//If the URL is present, load() the store.
if (me.proxy.url) {
me.load();
}
}
});
This is a creation of the DropDownStore with a dynamic model:
Ext.define('RelationModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'RelationName', type: 'string' },
{ name: 'RelationOppositeName', type: 'string' }
]
});
...//a random combobox
store: Ext.create('DropDownStore', {
listUrl: 'someprivateurl',
model: 'RelationModel'
})
...
When I edit the line in the constructor method to
me.model = (config.model) ? config.model : undefined
It works like expected for the dynamic model but not anymore for the default models.
If I let it be
me.model = (config.model) ? config.model : 'DropDownModel';
It works for the default models and not for the dynamic model.
How can I assign a model to a store at creation?
constructor: function(config) {
var me = this;
if (config.listUrl) {
me.proxy.url = config.listUrl;
}
me.callParent();
if (config.extraFields) {
me.model.setFields(config.extraFields);
}
//If the URL is present, load() the store.
if (me.proxy.url) {
me.load();
}
}
store: Ext.create('DropDownStore', {
listUrl: 'someprivateurl',
extraFields: [
{ name: 'Id', type: 'int' },
{ name: 'RelationName', type: 'string' },
{ name: 'RelationOppositeName', type: 'string' }
]
}),