I created the following grid component:
MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, {
autoHeight: true,
iconCls: 'icon-grid',
title: 'Relationship Members',
frame: true,
viewConfig: { forceFit: true },
relationshipId: null,
documentId: null,
initComponent: function () {
if (this.verifyParameters()) {
// Initiate functionality
this.columns = this.buildColumns();
this.view = this.buildView();
this.store = this.buildStore();
this.store.load();
}
MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this);
},
verifyParameters: function () {
// Verification code
},
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10
}, {
header: 'Type',
dataIndex: 'ObjType',
sortable: true,
width: 10
}, {
header: 'Name',
dataIndex: 'Name',
sortable: true
}];
},
buildView: function () {
return new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})'
});
},
buildStore: function () {
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
root: 'data',
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
groupField: 'ObjType'
});
}
});
The grid renders correctly, and the URL that is mapped to MyAppUrls.ListRelationshipMembers is correct. The data is being retrieved, and the ListRelationshipMembers URL is returning the following JSON:
{"data":[{"Id":1,"ObjType":"topic","Name":"Test2"}]}
Yet, even though the grid is rendered (columns, borders, etc..) no data is showing in the actual grid though. Since this is my first time using a data store, I am unsure of what I am doing wrong. Any help would be appreciative.
Edit:
I tried updating the store to have a reader via the following code:
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
reader: new Ext.data.JsonReader({
root: 'data'
}),
groupField: 'ObjType'
});
No change, the datagrid is not being filled with the records
Evan is correct. Your biggest problem is a lack of a reader. That and the validation stub you left in there needed to return true. If you can't just drop this code in and have it work you have some other problem.
MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, {
autoHeight: true,
iconCls: 'icon-grid',
title: 'Relationship Members',
frame: true,
viewConfig: { forceFit: true },
relationshipId: null,
documentId: null,
initComponent: function () {
if (this.verifyParameters()) {
// Initiate functionality
this.columns = this.buildColumns();
this.view = this.buildView();
this.store = this.buildStore();
this.store.load();
}
MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this);
},
verifyParameters: function () {
// Verification code
return true;
},
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10
}, {
header: 'Type',
dataIndex: 'ObjType',
sortable: true,
width: 10
}, {
header: 'Name',
dataIndex: 'Name',
sortable: true
}];
},
buildView: function () {
return new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})'
});
},
buildStore: function () {
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
reader: new Ext.data.JsonReader({
root: 'data',
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
groupField: 'ObjType'
})
});
}
});
Think you need to do a couple of things here: firstly, as mentioned by Evan, you need to add a reader to your store, like this:
buildStore: function () {
return new Ext.data.Store({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
reader: new Ext.data.JsonReader({
root: 'data'
})
});
}
I've changed the store type here to something simpler - was there a particular reason you were using GroupingStore? Note that the root is specified in the reader, not the store itself.
Then, in your columns, I'd tend to add a renderer to explicitly determine what each column will display, such as:
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10,
renderer: function (value, metaData, record) {
return record.data.Id
}
} ... ];
}
I've got into the habit of using renderers, since I modify the content of my column cells quite heavily in my grids. Notice here the arguments being passed to the renderer function; there are a few more you can pass in - see the ExtJS API if you need more info on what you can actually access. On that note, the API documentation is pretty good - it can take some digging into but definitely worth your time if you're working with ExtJS a lot.
You haven't specified a reader on your store, you need to specify the root in the JsonReader.
Related
I just started to study extjs 6.
How it is possible to implement dependent grids when the main displays data from the table, when clicked on, in the second grid, the dependent entries from the second table are displayed.
What I realized at the moment:
I created a grid, I get the records from the "Operation" table, I call it using the CRUD. In the "Operation" table, all entries are associated with the second table (numoperation) in the code field.
It is required to me that at pressing on record of the main grid which is already created, to receive dependent records from the table numoperation in the second grid.
How can this be implemented in general?
I would be glad if you share useful links, tips or examples.
Thank you in advance.
Below is the code for the client part of the application:
Ext.onReady(function () {
Ext.define('Operation', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
'date_op',
'code',
'status',
'type'
]
});
var urlRoot = 'data?model=Operation&method=';
var registrStore = Ext.create('Ext.data.Store', {
model: 'Operation',
pageSize: 10,
proxy: {
type: 'jsonp',
noCache: false,
api: {
create: urlRoot + 'Create',
read: urlRoot + 'Read',
update: urlRoot + 'Update',
destroy: urlRoot + 'Destroy'
},
reader: {
type: 'json',
metaProperty: 'meta',
root: 'data',
idProperty: 'id',
totalProperty: 'meta.total',
successProperty: 'meta.success'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: false,
}
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
autoCancel: false,
listeners: {
edit: function (editor, context) {
var emp = registrStore.getProxy();
var con = context.record;
emp.setExtraParam("id", con.data['id']);
emp.setExtraParam("date_operation", con.data['date_operation']);
emp.setExtraParam("code", con.data['code']);
emp.setExtraParam("status", con.data['status']);
emp.setExtraParam("type", con.data['type']);
}
}
});
var textField = {
xtype: 'textfield'
};
// Определение столбцов
var columns = [
{
header: 'ID',
dataIndex: 'id',
sortable: true,
width: 35
},
{
header: 'Дата',
dataIndex: 'date_op',
sortable: true,
editor: textField
},
{
header: 'Код',
dataIndex: 'code',
sortable: true,
editor: textField
},
{
header: 'Статус',
dataIndex: 'status',
sortable: true,
editor: textField
},
{
header: 'Тип',
dataIndex: 'type',
sortable: true,
editor: textField
}
];
var pagingToolbar = {
xtype: 'pagingtoolbar',
store: registrStore,
displayInfo: true,
items: [
'-',
{
text: 'Save Changes',
handler: function () {
registrStore.sync();
}
},
'-',
{
text: 'Reject Changes',
handler: function () {
// Отмена изменений в stoe
registrStore.rejectChanges();
}
},
'-'
]
};
var onDelete = function () {
var selected = grid.selModel.getSelection();
Ext.MessageBox.confirm(
'Confirm delete',
'Are you sure?',
function (btn) {
if (btn == 'yes') {
var nn = selected[0].get('id')
var emp = registrStore.getProxy();
emp.setExtraParam("id", nn)
grid.store.remove(selected);
grid.store.sync();
}
}
);
};
var onInsertRecord = function () {
var selected = grid.selModel.getSelection();
rowEditing.cancelEdit();
var newEmployee = Ext.create("Operation");
registrStore.insert(selected[0].index, newEmployee);
rowEditing.startEdit(selected[0].index, 0);
};
var doRowCtxMenu = function (view, record, item, index, e) {
e.stopEvent();
if (!grid.rowCtxMenu) {
grid.rowCtxMenu = new Ext.menu.Menu({
items: [
{
text: 'Insert Operation',
handler: onInsertRecord
},
{
text: 'Delete Operation',
handler: onDelete
}
]
});
}
grid.selModel.select(record);
grid.rowCtxMenu.showAt(e.getXY());
};
var grid = Ext.create('Ext.grid.Panel', {
title: 'Таблица операций',
items: grid,
columns: columns,
store: registrStore,
loadMask: true,
bbar: pagingToolbar,
plugins: [rowEditing],
stripeRows: true,
selType: 'rowmodel',
viewConfig: {
forceFit: true
},
listeners: {
itemcontextmenu: doRowCtxMenu,
destroy: function (thisGrid) {
if (thisGrid.rowCtxMenu) {
thisGrid.rowCtxMenu.destroy();
}
}
},
renderTo: Ext.getBody()
});
registrStore.load();
});
What you probably want to do is to add a listener on the main grid that listens for the event: select.
https://docs.sencha.com/extjs/6.5.3/modern/Ext.grid.Grid.html#event-select
listeners: {
select: "onSelectMainGrid",
},
then you want to have a function called onSelectMainGrid or something similar
var onSelectMainGrid : function(grid, selectedItem) {
. . .
}
and in this function, you want to get the store from the dependent grids and you want to call the .load() function on them. For your dependent grid's store's proxy, use the config extraParams: {}
https://docs.sencha.com/extjs/6.5.3/modern/Ext.data.Connection.html#cfg-extraParams and bind the selection from the main grid to the extraParams of the dependent grids. Then call the method .load() on the dependent grid's store. The store of your dependent grid will look something like
var dependentGridStore = Ext.create('Ext.data.Store', {
model: 'OperationDependent',
pageSize: 10,
proxy: {
type: 'jsonp',
noCache: false,
extraParams: { // <==THIS IS NEW
valueFromMainGrid: '{selectedValueFromMainGrid}'
}
api: {
create: urlRoot + 'Create',
read: urlRoot + 'Read',
update: urlRoot + 'Update',
destroy: urlRoot + 'Destroy'
},
reader: {
type: 'json',
. . .
. . .
});
I noticed that you have all the code in the same file. It is strongly advised that you separate your code into views, viewModels, and viewControllers.
One last thing, If you don't make use of a viewModel for databinding, alternatively in the onSelectMainGrid function, since you are passing the selectedItem parameter, you can just get the dependent grid, then get its store, then get its proxy, and then set the extraParams to the selectedItem passed as parameter to the function.
Let me know if you need any clarification.
I did so (shortened the code for better perception):
Ext.define('Operation', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
'date_operation',
'code',
'status',
'type',
'mesto_hraneniya',
'contragent',
'sum_operation',
'rezerv',
'cnt_doc',
'stellag'
]
});
var urlRoot = 'data?model=Operation&method=';
// Хранилище для данных таблицы Registr
var registrStore = Ext.create('Ext.data.Store', {
model: 'Operation',
pageSize: 10,
proxy: {
type: 'jsonp',
noCache: false,
api: {
create: urlRoot + 'Create',
read: urlRoot + 'Read',
update: urlRoot + 'Update',
destroy: urlRoot + 'Destroy'
},
reader: {
type: 'json',
metaProperty: 'meta',
root: 'data',
idProperty: 'id',
totalProperty: 'meta.total',
successProperty: 'meta.success'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: false,
}
}
});
Ext.define('Tovary', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
'name',
'code',
'prise',
'unit'
]
});
var urlRootTv = 'data?model=Tovary&method=';
var TovaryGridStore = Ext.create('Ext.data.Store', {
model: 'Tovary',
pageSize: 10,
proxy: {
type: 'jsonp',
noCache: false,
extraParams: {
inclProps: '{code_tv}'
},
api: {
create: urlRootTv + 'Create',
read: urlRootTv + 'Read',
update: urlRootTv + 'Update',
destroy: urlRootTv + 'Destroy'
},
reader: {
type: 'json',
metaProperty: 'meta',
root: 'data',
idProperty: 'id',
totalProperty: 'meta.total',
successProperty: 'meta.success'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: false,
}
}
});
......
// Grid панель
var grid = Ext.create('Ext.grid.Panel', {
title: 'Таблица операций',
items: grid,
columns: columns,
store: registrStore,
loadMask: true,
bbar: pagingToolbar,
plugins: [rowEditing],
stripeRows: true,
selType: 'rowmodel',
viewConfig: {
forceFit: true
},
listeners: {
itemcontextmenu: doRowCtxMenu,
destroy: function (thisGrid) {
if (thisGrid.rowCtxMenu) {
thisGrid.rowCtxMenu.destroy();
}
},
select: function(grid, selectedItem) {
TovaryGridStore.proxy.extraParams = {'code_tv' : selectedItem.id.code};
TovaryGridStore.load();
}
},
renderTo: Ext.getBody()
});
registrStore.load();
When I click on a row in the grid, the browser console displays an error:
GET http://127.0.0.1:8000/hello_extjs/data?model=Tovary&method=Read&code_tv=&page=1&start=0&limit=10&callback=Ext.data.JsonP.callback2 500 (Internal Server Error)
What is the cause of this error? Whether correctly I understand that now I need to deduce the second Ext.grid.Panel what to display in it the data of model "Tovary"?
I'm trying to put a GridPanel powered by an ArrayStore in a Window, but no matter what I do, it just looks like this with no data rows inside:
Here's my code:
var ticketsStore = new Ext.data.ArrayStore
(
{
autoDestroy: false,
remoteSort: false,
data: result,
fields:
[
{ name: 'articleId', type: 'int' },
{ name: 'heatTicketRef', type: 'string' },
{ name: 'username', type: 'string' },
{ name: 'dateLinked', type: 'date' }
]
}
);
var ticketsGrid = new Ext.grid.GridPanel({
store: ticketsStore,
id: this.id + 'ticketsGrid',
viewConfig: {
emptyText: 'No data'
},
autoShow: true,
idProperty: 'heatTicketRef',
columns: [
{ id: 'heatTicketRef', header:"Ticket ID", width: 100, dataIndex: 'heatTicketRef', sortable: false },
{ header: "User", width: 100, dataIndex: 'username', sortable: false },
{ header: "Date Linked", width: 100, dataIndex: 'dateLinked', xtype: 'datecolumn', format: 'j M Y h:ia', sortable: false }
]
});
var window = new Ext.Window
(
{
renderTo: Ext.getBody(),
id: this.id + 'linkedHeatTickets',
closable: true,
modal: true,
autoHeight: true,
width: 500,
title:'Linked Heat Tickets',
resizable: false,
listeners:
{
close: function () { // do something }
},
items:
{
style: 'padding:5px;',
items: ticketsGrid
},
buttons:
{
text: 'Close',
handler: function () {
window.close();
}
}
}
);
window.show();
When I debug, I can see that my "result" object is healthy and the ArrayStore is of the right length:
But the GridPanel doesn't like the data because it's not in its items (although it's in the store) array:
What little thing have I done wrong?
Thanks!
Because I'm an idiot... I used an ArrayStore instead of a JsonStore!
I have a grid with a pagination. When I set a filter, the ajax request is successfully executed, the json return value looks fine and the filtered rows appear in my grid.
But the Loading... popup won't disappear and Firebug reports an error in ext-all-debug.js: TypeError: data is null (Line 134684). The code at that point is:
data = store.getData();
items = data.items; // error
I've checked my JS several times, but I can't find the problem.
Unfortunately I can't create a fiddle, since I use remote filtering. So here's the script:
Ext.onReady (function () {
Ext.define('FooModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'myId', type: 'int' },
{ name: 'myDate', type: 'date', dateFormat: 'Y-m-d H:i:s' },
{ name: 'myString', type: 'string' },
{ name: 'myFilename', type: 'string' },
{ name: 'myUser', type: 'string' }
]
});
Ext.define('FooStore', {
extend: 'Ext.data.Store',
model: 'FooModel',
autoLoad: true,
autoDestroy: true,
proxy: {
type: 'ajax',
url: 'test.php',
reader: {
type: 'json',
rootProperty: 'import_files',
messageProperty: 'error',
}
},
remoteFilter: true,
remoteSort: true,
sorters: [{
property: 'myId',
direction: 'ASC'
}],
pageSize: 5
});
var theFooStore = new FooStore();
theFooStore.load({
callback: function(records, operation, success) {
if(!success) {
Ext.Msg.alert('Error', operation.getError());
}
}
});
Ext.define('FooGrid', {
extend: 'Ext.grid.Panel',
xtype: 'grid-filtering',
requires: [ 'Ext.grid.filters.Filters' ],
width: 1000,
height: 700,
renderTo: 'content',
plugins: 'gridfilters',
emptyText: 'No Matching Records',
loadMask: true,
stateful: true,
store: theFooStore,
defaultListenerScope: true,
columns: [
{ dataIndex: 'myId', text: 'My Id', filter: 'number' },
{ xtype: 'datecolumn', dataIndex: 'myDate', text: 'My Date', renderer: Ext.util.Format.dateRenderer('d.m.Y'), filter: true },
{ dataIndex: 'myString', text: 'My String', filter: 'list' },
{ dataIndex: 'myFilename', text: 'My Filename',
renderer: function(value, meta, record) {
return Ext.String.format('{1}', record.data.myId, value);
},
filter: {
type: 'string',
itemDefaults: { emptyText: 'Search for...' }
}
},
{
dataIndex: 'myUser', text: 'My User',
filter: {
type: 'string',
itemDefaults: { emptyText: 'Search for...' }
}
},
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: theFooStore,
dock: 'bottom',
displayInfo: true
}]
});
new FooGrid();
});
And here's a sample json return value:
{
"success" : true,
"total" : 19,
"import_files" : [{
"myId" : "1",
"myFilename" : "foo bar.xlsx",
"myDate" : "2015-05-19 13:23:21",
"myUser" : "ABC",
"myString" : "Lorem ipsum"
},
...
]
}
Has someone experienced the same issue? What could it cause?
Just my luck. Found the answer shortly after posting the question.
Deleting the filter: 'list' option at my My String column is the solution.
I am using ExtJs to create a combobox.
Here is my code:
Ext.define('Form.FormTypeDialog', {
extend : 'Ext.Window',
id: 'formTypeDialog',
formId: null,
callbackFunction : null,
modal: true,
statics : {
show : function(formId, callback) {
Ext.create(Form.FormTypeDialog", {
formId : formId,
callbackFunction : callback
}).show();
}
},
constructor : function(config) {
var me = this;
Ext.apply(this, {
buttons : [
{
text:"#{msgs.form_create_dialog_button_cancel}",
cls : 'secondaryBtn',
handler: function() {
me.close();
}
},
{
text:"#{msgs.form_create_dialog_button_next}",
handler: function() {
// Get selected form type
}
}
]
});
this.callParent(arguments);
},
initComponent:function() {
this.setTitle("#{msgs.form_create_dialog_title}");
this.setHeight(175);
this.setWidth(327);
var formTypeStore = Mystore.Store.createRestStore({
url : getRelativeUrl('/rest/form/formTypes'),
root: 'objects',
fields: ['name','value']
});
this.form = new Ext.form.Panel({
style:'padding:15px;background-color:#fff' ,
border:false,
bodyBorder:false,
items:[
new Ext.form.Label({
text: "#{msgs.form_create_dialog_select_type_label}",
margin: "25 10 25 5"
}),
new Ext.form.ComboBox({
id: 'createformTypeCombo',
margin: "8 10 25 5",
allowBlank: false,
forceSelection: true,
editable:false,
store: formTypeStore,
valueField: 'value',
displayField: 'name',
width: 260,
emptyText: '#{msgs.form_create_dialog_select_type}'
})
]
});
this.items = [
this.form
];
this.callParent(arguments);
}
});
I am creating this window on a xhtml page on a button click using :
Form.FormTypeDialog.show(null, showFormWindowCallBack);
It works fine and combo box is displayed and I can select value.
But if I open and close it 4 times, then in next show it shows the values but It do not allow me to select the last two value. I can only select first value.
Please suggest.
Note: I have tried copying and executing this code in forms of other pages of my application. But behavior is same in all cases.
This combobox is on a Ext.Window.
EDIT:
JSON RESPONSE FROM Rest:
{"attributes":null,"complete":true,"count":3,"errors":null,"failure":false,"metaData":null,"objects":[{"name":"Application
Provisioning Policy Form","value":"Application"},{"name":"Role
Provisioning Policy Form","value":"Role"},{"name":"Workflow
Form","value":"Workflow"}],"requestID":null,"retry":false,"retryWait":0,"status":"success","success":true,"warnings":null}
I have re-created this code, I had some errors showing in Firefox using your code directly so I've changed some things.
Running the code below and calling Ext.create("Form.FormTypeDialog", {}).show(); in the console window, then closing the window and repeating does not replicate this issue. Could you try using the code I have and see if you still have the same problem.
Ext.application({
name: 'HelloExt',
launch: function () {
Ext.define('Form.FormTypeDialog', {
extend: 'Ext.Window',
id: 'formTypeDialog',
formId: null,
callbackFunction: null,
modal: true,
constructor: function (config) {
var me = this;
Ext.apply(this, {
buttons: [
{
text: "#{msgs.form_create_dialog_button_cancel}",
cls: 'secondaryBtn',
handler: function () {
me.close();
}
},
{
text: "#{msgs.form_create_dialog_button_next}",
handler: function () {
// Get selected form type
}
}
]
});
this.callParent(arguments);
},
initComponent: function () {
this.setTitle("#{msgs.form_create_dialog_title}");
this.setHeight(175);
this.setWidth(327);
var myData = [
["Application Provisioning Policy Form", "Application"],
["Role Provisioning Policy Form", "Role"],
["Workflow Form", "Workflow"],
];
var formTypeStore = Ext.create("Ext.data.ArrayStore", {
fields: [
'name',
'value'
],
data: myData,
storeId: "myStore"
});
this.form = Ext.create("Ext.form.Panel", {
style: 'padding:15px;background-color:#fff',
border: false,
bodyBorder: false,
items: [
Ext.create("Ext.form.Label", {
text: "#{msgs.form_create_dialog_select_type_label}",
margin: "25 10 25 5"
}),
Ext.create("Ext.form.ComboBox", {
id: 'createformTypeCombo',
margin: "8 10 25 5",
allowBlank: false,
forceSelection: true,
editable: false,
store: formTypeStore,
valueField: 'value',
displayField: 'name',
width: 260,
emptyText: '#{msgs.form_create_dialog_select_type}'
})
]
});
this.items = [
this.form
];
this.callParent(arguments);
}
});
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
Ext.create("Form.FormTypeDialog", {}).show();
}
});
}
});
You can also play around with this code using / forking from this Fiddle
It is not clear what your problem is.
I use remote combo follows:
Ext.define('ComboRemote', {
extend: 'Ext.form.ComboBox',
xtype: 'ComboRemote',
emptyText: 'empty',
width: 75,
displayField: 'name',
valueField: 'id',
store: {
model: 'ComboModel',
proxy: {
type: 'rest',
url: '/serv/Res',
extraParams: {
query: ''
},
reader: {
root: "result", type: 'json'
}
},
autoLoad: true,
},
queryMode: 'remote',
pageSize: false,
lastQuery: '',
minChars: 0});
Ext.define('ComboModel', {
extend: 'Ext.data.Model',
fields: [
'id',
'name'
]});
I hope to help
Try these possible solutions
1. Make AutoLoad property for store as true.
2. Add delay of some ms
I'm having a data sort problem with a combobox.
Data source is JSON. Data is sorted in sql. Resulting set(in sql) and JSON result looks fine:
{"rows":[{"id":"TOT","txt":" Alle diagnosen"},{"id":"612","txt":"(acute) bloeding distale tract. digestivus*"},{"id":"042","txt":"(auto)-intoxicatie"},{"id":"402","txt":"(benigne) peptisch ulcus*"},{"id":"10","txt":"(bij)niertumor"},{"id":"652","txt":"(chorio)retinitis.. etc etc
Resulting data looks fine(=same sort order as JSON result) when I inspect the store with with firebug:
However, the resulting combobox has a different(wrong) sorting(first 2 are ok):
It is not sorted on the display value, nor on the id value. There is no sorter added anywwhere.
Combo:
{
xtype: 'combobox',
id: 'ComboDiag',
itemId: 'ComboDiag',
width: 280,
fieldStyle: '',
name: 'ComboDiag',
fieldLabel: 'Diagnose',
labelWidth: 90,
displayField: 'txt',
queryMode: 'local',
store: 'ComboDiagStore',
typeAhead: true,
valueField: 'id',
listeners: {
render: {
fn: me.onComboDiagRender,
scope: me
}
}
}
Store:
Ext.define('AppPitDash.store.ComboDiagStore', {
extend: 'Ext.data.Store',
alias: 'store.ComboDiagStore',
requires: [
'AppPitDash.model.ComboDiagModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'ComboDiagStore',
model: 'AppPitDash.model.ComboDiagModel',
proxy: {
type: 'ajax',
url: './php/get-data-diagCombo.php',
reader: {
type: 'json',
root: 'rows'
}
}
}, cfg)]);
}
});
Model:
Ext.define('AppPitDash.model.ComboDiagModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id'
},
{
name: 'txt'
}
]
});
I'm using Sencha Architect 2, first time.
This is rather an annoyance than a showstopper, but still help would be appreciated.
Try adding remoteSort: true to callParent method in store definition.
Try to use:
remoteGroup: true,
remoteSort: true,
sortInfo: { field: 'order', direction: 'DESC' },