I have a paging grid with a store. I have to change the proxy of the store, but when i do this and try to reload the grid, it gives a loading mask and do nothing else. Can you help me?
This is the original store:
var store = new Ext.data.JsonStore({
autoDestroy: true,
proxy: {
type: 'direct',
directFn: Ext.d.Class.Function,
extraParams: {
param: param
},
paramOrder: ['param', 'filter', 'start', 'limit', 'sort'],
reader: {
type: 'json',
root: "rows",
idProperty: 'id',
totalProperty: "all"
}
},
fields: fields,
remoteSort: true,
autoLoad: false,
sorters: sorters
});
The original grid:
var grid = Ext.create('Ext.grid.Panel', {
selModel: selmodel,
title: title,
flex: 1,
store: store,
columns: columns,
bbar: pager = Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '{1} / {2}',
emptyMsg: ""
})
//...
The new proxy:
var newProxy = Ext.create('Ext.data.Proxy', {
type: 'ajax',
paramsAsHash: false,
url: 'tasks.php',
actionMethods: {
read: 'POST'
},
extraParams: {
task: 'getItems',
id: id
},
reader: {
type: 'json',
root: "rows",
idProperty: 'id',
totalProperty: "all"
}
});
And I tried to set proxy and load the store, but it doesn't do anything.
grid.getStore().removeAll();
grid.getStore().setProxy(newProxy);
grid.getDockedItems()[2].store.setProxy(newProxy);
grid.getStore().load(); // fails, loading mask but no ajax
Any idea?
That's because you're not actually creating an Ajax proxy, but its parent class Ext.data.Proxy. The type is not interpreted in these lines:
var newProxy = Ext.create('Ext.data.Proxy', {
type: 'ajax',
You have to specify the actual class name:
var newProxy = Ext.create('Ext.data.proxy.Ajax', {
(And, IMHO, you'd better create it with the new keyword new Ext.data.proxy.Ajax, so that you discover your missing requires early...)
Related
I have a grid with store, and I want to load on render or click a button, but when I try to load the grid, got an url is undefined error. I need to use Ext direct, so no url. What should I do?
Ext.define('My.view.Grid' ,{
extend: 'Ext.grid.Panel',
//...
store: 'MyStore',
//...
}
Store:
Ext.define('My.store.MyStore', {
extend: 'Ext.data.JsonStore',
//...
model: 'My.model.MyModel',
proxy: {
type: 'direct',
directFn: Ext.direct.Class.function,
paramOrder: ['start', 'limit', 'sort', 'active'],
reader: {
type: 'json',
root: "data",
idProperty: 'id',
totalProperty: "all"
},
extraParams: {
active: 1
}
},
remoteSort: true,
sorters: ['name']
//...
Extend your store from Ext.data.Store:
Ext.define('My.store.MyStore', {
extend: 'Ext.data.Store',
// ...
});
If you see the source code of Ext.data.JsonStore, you will see that there is predefined an ajax proxy:
constructor: function(config) {
config = Ext.apply({
proxy: {
type : 'ajax',
reader: 'json',
writer: 'json'
}
}, config);
this.callParent([config]);
}
I have a fully working liveSearchGridPanel in ExtJs. Error occurs when I edit any row. What Happens is that if the the updated row has to be resorted like in my case when I change the age of user (I am sorting on basis of age) row goes up or down in the grid, but the previous record remain there as well until I refresh the entire webpage manually. Screenshot is below
My proxy model is:
Ext.define('proxymodel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int',
persist: false
}, {
name: 'gender',
type: 'auto'
}, {
name: 'name',
type: 'auto'
}, {
name: 'age',
type: 'int'
}],
identifier: 'sequential', // to generate -1, -2 etc on the client
proxy: {
type: 'rest',
//format: 'json',
//appendId: false,
idParam: "id",
//limitParam:"",
//filterParam: "",
//startParam:'',
//pageParam:'',
url: 'http://localhost:3000/posts',
api: {
read: 'http://localhost:3000/db',
create: 'http://localhost:3000/posts',
update: 'http://localhost:3000/posts',
destroy: 'http://localhost:3000/posts'
},
headers: {
'Content-Type': "application/json"
},
reader: {
type: 'json',
rootProperty: 'posts',
totalProperty: 'total'
},
writer: {
type: 'json'
}
}
});
In Application.js, I have defined row editing plugin as:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
},
edit: function(editor, e) {
// commit the changes right after editing finished
e.record.commit();
}
}
});
And my store looks like:
Ext.define('Store', {
extend: 'Ext.data.Store',
storeId: 'peopleStore',
pageSize: 500,
//buffered: true,
//leadingBufferZone: 300,
pageSize: 5,
autoLoad: {
start: 0,
limit: 5
},
autoSync: true,
sorters: [{
property: 'age',
direction: 'ASC'
}],
groupField: 'gender'
});
Can anyone point out my mistake?
I have tried to reload my store after editing in 'edit' function of rowEditing but it didn't work.
Thanks for your time.
As full answer by request:
Have you tried Ext.data.StoreManager.lookup('peopleStore').reload() ?
How can I access custom root property from the store like built in properties such as idProperty, totalProperty, messageProperty etc. Please check the code for ref.
Ext.define('app.store.Reviews', {
extend: 'Ext.data.Store',
model: 'app.model.Review',
pageSize: 200,
remoteSort: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
proxy: {
type: 'ajax',
url: 'review/list',
reader: {
type: 'array',
root: 'list',
totalProperty: 'count',
myCustomproperty: 'fieldInJson' // Somewhat like this
},
filterParam: 'query'
}
});
update: also I could be able to access the property via store
The jsonData object is available from the proxy.reader. You could access this data in the store load event by adding listener:
Ext.define('app.store.Reviews', {
extend: 'Ext.data.Store',
model: 'app.model.Review',
pageSize: 200,
remoteSort: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
proxy: {
type: 'ajax',
url: 'review/list',
reader: {
type: 'array',
root: 'list',
totalProperty: 'count'
},
filterParam: 'query'
},
listeners: {
load: function (store,records,successful,eOpts) {
//older
console.log(store.proxy.reader.jsonData);
//4.2
console.log(store.getProxy().getReader().jsonData);
}
}
});
Ext js TreeStore is not loading
Ext.ns('App');
Ext.onReady(function() {
Ext.QuickTips.init();
App.PPPExplorer.init();
});
App.PPPExplorer = {
// Initialize application
init : function(serverCfg) {
this.PPP = this.createPPP();
},
createPPP : function() {
// Set up a model to use in our Store
Ext.define('Summary', {
extend: 'Ext.data.Model',
fields: [
{name: 'pid', type: 'string'}
]
});
var myStore = Ext.create('Ext.data.TreeStore', {
model: 'Summary',
storeId:'myStore',
proxy: {
type : 'ajax',
method: 'GET',
url: '/Explorer.do?method=getPPP&search=true',
reader: {
type: 'json'
},
root: {
pid: 'src',
text:'test',
expanded: true
},
},
autoLoad: true
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: myStore,
// rootVisible: true,
renderTo: 'Explorer',
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Reference',
flex: 2,
sortable: true,
dataIndex: 'pid',
locked: true
}]
});
}
}
I am using Ext js 4.2 Version
I have used treeStore, treePanel in the above code, somehow Proxy call is not sent to Server. There was no error message in the console
Thanks in advance
Root definition should be inside TreeStore definition as follows (it's on the proxy declaration now):
var myStore = Ext.create('Ext.data.TreeStore', {
model: 'Summary',
storeId: 'myStore',
proxy: {
type: 'ajax',
method: 'GET',
url: '/Explorer.do?method=getPPP&search=true',
reader: {
type: 'json'
}
},
autoLoad: true,
root: {
pid: 'src',
text: 'test',
expanded: true
}
});
That way your code works, you can see it here
Given the following javascript:
var fo = Ext.create('Ext.form.Panel', {
layout:'box',
...
items: [{
xtype: 'combobox',
valueField: 'id',
displayField: 'organizationtype',
store: {
storeId: 'zaza',
fields: [{name: 'id'}, {name: 'organizationtype'}],
root: 'data',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/apps/crm_organizations/orgtype/',
reader: {
type: 'json'
}
}
},
fieldLabel: 'Type relation',
name: 'organizationtype',
queryMode: 'local',
},
...
This panel contains - among other fields - also this combobox. I can see with wireshark that the url '/apps/crm_organizations/orgtype/' is actually queried. However the combobox doesn't show any values. Has this anything to do with the fact that I'm lazy loading the combobox?
This is the response on the JSON request:
{data: [ {id:"1" ,organizationtype:"Customer"}
,{id:"2" ,organizationtype:"Relation"}
,{id:"3" ,organizationtype:"Supplier"}
,{id:"4" ,organizationtype:"Unknown"} ]}
You have to set the root to the json reader you are using, Default is "", your's should be :
reader: {
type: 'json',
root: 'data'
}
Also you might consider replacing the fields configuration with a model object.(from docs)fields: In general this configuration option should be avoided, it exists for the purposes of backwards compatibility
Change combobox mode from local to remote mode: 'remote' and use json store:
store: {
xtype: 'jsonstore',
url: '/apps/crm_organizations/orgtype/',
autoLoad: true,
idProperty: 'id',
root: 'data',
fields: ['id','organizationtype'],
},
mode: 'remote'
In your store ,you missing the root property
store: {
storeId: 'zaza',
fields: [{name: 'id'}, {name: 'organizationtype'}],
root: 'data',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/apps/crm_organizations/orgtype/',
reader: {
type: 'json',
root:'data'
}
}
}
and if your combo is query information across domains,then use jsonp configuration and use remote query for better performance