Below is my Store. I'm using "remoteFilter:true" on store and when I'm search data in extjs grid column then that data doesn't set on that field for search remote.
Ext.define('ProjMgmtApp.store.Risk', {
extend: 'Ext.data.Store',
model: 'ProjMgmtApp.model.Risk',
autoLoad: true,
pageSize: utilsObj.scrollValue,
remoteFilter:true,
remoteSort:true,
proxy: {
type: 'ajax',
url: utilsObj.wrapPKID('RiskList'),
reader: {
type: 'json',
rootProperty: 'results',
totalProperty: 'totalCount',
successProperty: 'success'
}
}
});
My grid column which I want to filter, and it's only work on local filter not remote filter but I want remote filter, please advice me,thanks all of you.
{
header: "Description",
dataIndex: 'riskDescription',
width: 50,
sortable: true,
filter:{
type: 'string'
}
}
Related
I have a JSON response like this
"{"total":1,"userBeanId":300,"list":[{"errors":[],"success":true,"liferayUserId":31503,"companyId":null,"groupId":null,"locale":null,"status":null,"liferayUserGroupId":null,"idProvider":null,"idClient":null,"userType":4,"userId":200,"email":"xpto#gmail.com","telefone":"999999999","nome":"MYNAME","role":"MY_ROLE","perfil":"Administrator","lastName":null}],"success":true}"
and what I have is a store that reads the list content, like this
"Ext.define('
MYPROJECT.store.Profiles', {
extend: 'Ext.data.Store',
model: 'MYPROJECT.model.Profile',
autoLoad: true,
pageSize: 10,
remoteSort: true,
remoteFilter: true,
proxy: {
type: 'ajax',
api: {
read: '/delegate/rlapi-common/profile/list'
},
enablePaging: true,
reader: {
type: 'json',
root: 'list',
successProperty: 'success'
}
}
});"
and the store "reads" the list successfully. However, I'd like to be able to access the "userBeanId" field as well. Is there any way I can access it by this store (by changing the root to something on an upper-level)? It confuses me as the store "maps" to a model and the userBeanId doesn't fit in the model.
Model:
Ext.define('MYPROJECT.model.Profile', {
extend: 'Ext.data.Model',
fields: [
'userId',
'nome',
'telefone',
'email',
'role',
'perfil'
],
});
You can access store.proxy.reader.rawData to get the most recently loaded JSON. As you suggested, it doesn't make sense being part of the model, but you can read extra meta info via the reader.
I receive an array of strings from the server.
How can I populate my grid panel if the data is not in key-value format?
Here is the response:
{"result":true,"data":["dep1","dep2","dep3"],"totalCount":3}
Here is my grid panel
xtype: 'gridpanel',
flex: 1,
itemId: 'departmentsGridPanel',
title: '',
store: new Ext.data.ArrayStore({
autoLoad: true,
fields: [
'department'
],
proxy: {
type: 'ajax',
url: 'FilteringDataServlet?filterColumn=avdeling',
reader: {
type: 'json',
root: 'data'
}
}
}),
columns: [{
text: 'Avdeling',
flex: 1,
dataIndex: 'department'
}],
Then you should use Ext.data.reader.Array with mapping parameter.
Employee = Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping: 0}, // "mapping" only needed if an "id" field is present which
{name: 'occupation', mapping: 1} // precludes using the ordinal position as the index.
]
});
I have solved this by adding load listener to my store and modifying the data there
listeners: {
load: function(store, records, success, opts) {
store.each(function(record) {
record.set('department', record.raw);
});
}
}
Here is my model:
Ext.define('DynTabBar.model.Menu',{
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'Title', type: 'string'
}, {
name: 'Level', type: 'int'
}, {
name: 'Parent', type: 'string'
}]
}
});
Store:
Ext.define('DynTabBar.store.MenuItems', {
extend: 'Ext.data.Store',
xtype: 'menustore',
config: {
storeId: 'menuStore',
model: 'DynTabBar.model.Menu',
autoLoad: false,
proxy: {
type: 'ajax',
id: 'menuproxy',
url: 'http://localhost:50567/api/Menu',
reader: {
type: 'json'
}
}
}
});
In controller I have smth like that:
var mainStore = Ext.getStore('menuStore');
mainStore.load();
My json respone from server is:
[{"Title":"home","Level":1,"Parent":""},{"Title":"home1","Level":2,"Parent":"home"},{"Title":"home2","Level":2,"Parent":"home"},{"Title":"info","Level":1,"Parent":""},{"Title":"info1","Level":2,"Parent":"info"},{"Title":"info2","Level":2,"Parent":"info"},{"Title":"info3","Level":2,"Parent":"info"}]
But store data is empty. What I'm missing or doing wrong?
I fixed the problem, the problem is that I'm not waiting while store data is loaded and do something while store isn't loaded. I fix that doing what I need in store loaded callback.
mainStore.load(callback);
I have following sample application, where i am trying to implement paging functionality for sencha touch , but i am facing issues in setting the page size and when i hit load more same old data is being repeated in the list, please can i know where i am going wrong ?
Ext.define("WEB.view.SearchView", {
extend: 'Ext.dataview.List',
xtype: 'SearchView',
requires: [
'Ext.dataview.List',
'Ext.data.Store',
'Ext.List'
],
config: {
title: 'Search Results',
plugins: [
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: false,
loadMoreText: 'Loading...',
noMoreRecordsText: 'No More Records'
},
{ xclass: 'Ext.plugin.PullRefresh' }
],
//onItemDisclosure: false,
store: {
id: 'MySearchStore',
autoLoad:false,
pageSize: 15,
clearOnPageLoad: false,
fields: [
{ name: "ShortDescription", type: "string" },
{ name: "MatchId", type: "bool" }
],
proxy: {
type: 'jsonp',
url: 'http://Example.com',
reader: {
type: 'json',
rootProperty: 'd'
}
}
},
itemTpl: new Ext.XTemplate('<tpl if="MatchId == 1">', '<p style="color: #ff9900">{BlockNo}</p><p>{ShortDescription}</p>', '</tpl>',
'<tpl if="MatchId == 0">', '<p >{BlockNo}</p><p>{ShortDescription}</p>', '</tpl>'
)
}
});
This is a simple issue but can be a bottleneck when you are starting out...
Set the pageParam in the store to what you use for pagination on the server side... Then everything should work fine...
Note: Your actual pagination logic should be on the server side... Sencha only provides a means to display the content a few at a time...
Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
config: {
storeId: 'MyJsonStore',
proxy: {
type: 'ajax',
pageParam: 'page',//This parameter needs to be modified
reader: {
type: 'json'
}
}
}
});
I'm using ExtJS v4 for making some rich interfaces, the problem is that i encounter difficulties from time to time (something quite normal for a beginner in Extjs: p), the problem i encounter now, concern the pagination, in fact on my page i have all the records that are displayed, even after specifying the item by nbr of pages if possible to help me thanks
Ext.onReady(onReady);
function onReady() {
var itemsPerPage = 10;
var store = new Ext.data.JsonStore({
autoLoad: false,
pageSize: itemsPerPage,
proxy: new Ext.data.HttpProxy({
type: 'ajax',
url: '../Service.asmx/GetMyDvpt',
reader: {
type: 'json',
root: 'd',
//totalProperty: 'total',
idProperty: 'Id'
},
headers: {
'Content-type': 'application/json'
}
}),
fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD']
});
store.load({
params: {
start: 0,
limit: itemsPerPage
}
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ dataIndex: 'NOM_EXP', header: 'NOM_EXP' },
{ dataIndex: 'NOM_ESP', header: 'NOM_ESP' },
{ dataIndex: 'NOM_VAR', header: 'NOM_VAR' },
{ dataIndex: 'SURF_PG', header: 'SURF_PG' },
{ dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 }
],
renderTo: 'panel',
title: 'Dvpt Grid',
width: 570,
height: 350,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}]
});
}
You must create new instances of Ext JS objects with Ext.create, because objects instantiated with the new keyword won't take care of the Ext JS class system.
When you look at the load() method source code, you'll see how the configuration options get applied, and so would you:
store.load({
start: 0,
limit: itemsPerPage
});
Since the store has already been configured with pageSize, there's no need for the limit options, since it gets the pageSize as default.
store.load({
start: 0
});
I'd also recommend to have a look at the loadPage() method, that handles setting all the paging relevant parameters correctly:
store.loadPage(1);
Another enhancement is to set autoLoad to true, then you could omit the store load completely.
There is also no need to create a Ext.data.HttpProxy manually, since the configuration object specifies the ajax type and will take care of instantiating the correct proxy type for you.
Since you specified a JSON reader, there should be no need to set the HTTP accept header. Content-Type is anyway a response header and the corresponding request header would be Accept.
So your code should look like this:
Ext.onReady(onReady);
function onReady() {
var store = Ext.create('Ext.data.JsonStore', {
autoLoad: true,
pageSize: 10,
proxy: {
type: 'ajax',
url: '../Service.asmx/GetMyDvpt',
reader: {
type: 'json',
root: 'd',
totalProperty: 'total',
idProperty: 'Id'
}
},
fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD']
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ dataIndex: 'NOM_EXP', header: 'NOM_EXP' },
{ dataIndex: 'NOM_ESP', header: 'NOM_ESP' },
{ dataIndex: 'NOM_VAR', header: 'NOM_VAR' },
{ dataIndex: 'SURF_PG', header: 'SURF_PG' },
{ dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 }
],
renderTo: 'panel',
title: 'Dvpt Grid',
width: 570,
height: 350,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}]
});
}
When dealing with problems like this, I usually test the backend service with a REST client. There are many addons for different browsers available, for example RESTClient for Firefox or Advanced REST clinet for Chrome. Make sure that your service behaves correct without any UI, just by sending plain HTTP request with manually defined parameters. Only move to the GUI part when when everything works as expected.
For the GUI part I encourage you to study the source code of Ext JS within the API Documentation, it's well structured and documented and you'll learn a lot.
Since version 4 Ext JS comes with a MVC application framework, which simplifies the creation of large RIA apps a lot. Read more at the Application Architecure Guide.
Paging Toolbar supports remote paging by default. If local paging is required paging then reload store on 'datachange' and 'refresh' event fired.