I need to get some data with making ajax request and load the grid (which is empty first) with this data but even i get the data i couldnt load it to the grid.
What i'm doing wrong?
Here is my grid :
var gridFlightForms = Ext.create('Ext.grid.Panel', {
id : 'gridFlightForms',
store : storeFlightFormList,
width : '100%',
height : 300,
collapsible : false,
multiSelect : false,
autoScroll : true,
disableSelection : false,
monitorWindowResize : true,
viewConfig : {
stripeRows : true,
enableTextSelection : true
},
title : 'Flight Forms ',
bbar : Ext.create('Ext.ux.statusbar.StatusBar', {
id : 'gridData-statusbar',
defaultText : '',
defaultIconCls : 'default-icon',
}),
verticalScroller : {
xtype : 'paginggridscroller',
},
columns : [ {
text : '<fmt:message key="common.number.text" />',
xtype : 'rownumberer',
width : 40,
sortable : false
}, {
text : 'Form Id',
menuDisabled : true,
dataIndex : 'formId',
width : 150,
}, {
text : 'Form no',
menuDisabled : true,
dataIndex : 'formNo',
width : 150,
}, {
text : 'Form Type',
menuDisabled : true,
dataIndex : 'formType',
width : 150,
}, {
text : 'Flight Id',
menuDisabled : true,
dataIndex : 'flightId',
width : 150,
}, {
text : 'Revision',
menuDisabled : true,
dataIndex : 'revision',
width : 150,
}, {
text : 'IsLiex',
menuDisabled : true,
dataIndex : 'isLiex',
width : 150,
}, {
text : 'IsPrimary',
menuDisabled : true,
dataIndex : 'isPrimary',
width : 150,
}, {
text : 'Step Number',
menuDisabled : true,
dataIndex : 'stepNumber',
width : 150,
} ]
});
and my store :
var storeFlightFormList = Ext.create('Ext.data.Store', {
model : flightListModelName,
autoLoad : false,
proxy : {
type : 'ajax',
actionMethods : {
read : 'POST'
},
reader : {
type : 'json',
root : 'data'
},
api : {
read : flightFormListUrl
}
},
listeners : {
load : function(store, records) {
}
}
});
and that part is making post and try to load data to grid. I think this part is wrong.
Actually i can see data in resp.data when i debug it, but i cant store it as i mentioned before.
postDataAsParamsINN(
{flightId : flightId},flightFormListUrl,function(resp) {
gridFlightForms.setLoading(true,true);
storeFlightFormList.loadRawData(resp.data,false);
});
Ext.getCmp('gridFlightForms').getStore().load();
I'm pretty new at extjs, thanks in advance.
I'm not quite sure what postDataAsParamsINN is supposed to be doing, you should not need to be loading the data in yourself.
This fiddle demonstrates a working grid that uses a JSON store.
Here is the code:
Ext.application({
name: 'Fiddle',
launch: function() {
var store = Ext.create('Ext.data.JsonStore', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'characters'
}
},
listeners: {
load: function() {
console.log(this);
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
}
});
Once you've bound your store to the grid it automatically fills the grid with whatever information is loaded into the store and refreshes when the store is updated.
Related
Im using ExtJS 3.2 (must be in this version of ExtJS). When i show a panel with a formpanel inside everything looks fine, but when i close the panel with the [X] button from top-riht and open again, every fieldlabel appears twice and the textfield disappear. If i use the "Cancelar" button, shows correctly.
My code:
function crearDoc(idControl) {
f = new Ext.FormPanel({
frame: true,
id: 'formFicheroCrear',
layout: 'fit',
defaults: {minWidth: 500},
items: [{
xtype : 'hidden',
id : 'idFichero'
},
{
xtype: 'panel',
layout: 'form',
id: 'formReal',
width: '100%',
items: [{xtype: 'datefield',
disabled: true,
allowBlank : false,
fieldLabel: 'Fecha',
value : new Date(),
format: 'd/m/Y',
width: '100%',
id: 'fechaDoc',
allowBlank: false},
{xtype: 'textfield',
fieldLabel: 'Titulo',
allowBlank : false,
width: '100%',
id: 'nombreDoc'},
{xtype: 'textfield',
fieldLabel: 'Descripcion',
allowBlank : false,
width: '100%',
id: 'descripcionDoc'}]
},{xtype: 'panel',
layout : 'fit',
items: [{xtype: 'htmleditor',
id: 'editorHTML',
allowBlank : false,
name: 'documentoTexto'}]
}],
buttons: [{
//Guardar documento SGSI
text: '<bean:message key="label.boton.guardarySubir"/>',
minWidth: 100,
cls : 'x-btn-text-icon',
iconCls : 'yes-icon',
listeners:{
'close':function(win){
console.info('bye');
},
'hide':function(win){
console.info('just hidden');
}
},
handler: function() {
// Comprobamos que el formulario esté OK
if (f.getForm().isValid()) {
var nombreDoc = Ext.getCmp("nombreDoc").getValue();
var descripcionDoc = Ext.getCmp("descripcionDoc").getValue();
var editorHTML = Ext.getCmp("editorHTML").getValue();
Ext.Ajax.request(
{
url: '/<bean:message key="global.application.context.name"/>/SGSI.do',
params: {"method": "crearDocumento",
"docTitulo": nombreDoc,
"docDescripcion" : descripcionDoc,
"docCuerpo" : editorHTML,
"idProyecto" : Ext.getCmp('idProyecto').getValue(),
"idControl" : idControl}
})
ventanaCrearDocumento.close()
storeDocumentos.loadData(json);
Ext.getCmp('formFichero').getForm().reset()
} else {
Ext.Msg.alert('<bean:message key="label.sincronizador.atencion"/>',
'<bean:message key="label.error.campos.rojo"/>');
}
}},
{ text : '<bean:message key="label.boton.cancelar"/>',
cls : 'x-btn-text-icon',
iconCls : 'no-icon',
minWidth: 100,
handler: function() {ventanaCrearDocumento.close()}}]
});
f.load({
url : '/<bean:message key="global.application.context.name"/>/SGSI.do',
params : {
"method" : 'dameControlPorId',
"idControl" : idControl,
"idProyecto" : Ext.getCmp('idProyecto').getValue()
},
method : 'POST'
});
var ventanaCrearDocumento = new Ext.Window({
height: 460,
width: 700,
closable: true,
closeAction : 'hide',
modal: true,
title: 'Redacción de Documento',
layout: 'fit',
items: f
});
ventanaCrearDocumento.show();
}
You have specified closeAction : 'hide', that's why it is not auto destroying.
specify that property as close will solve the problem.
you are creating new form object by calling function crearDoc(idControl) . you need to destroy it when press close button so set autoDestroy : true.
or define form and set it hide and show form on click button.
Hi I am in trouble with extjs 5 mvvm example. My store isn't recognized. I tried similliar solutions from stack but it still crashing.
Project structure:
structure
Code:
Message.js
Ext.define('Tgis.view.message.Message', {
extend : 'Ext.window.Window',
title: 'Wiadomosci',
requires : ['Tgis.view.message.MessageController'],
store: 'MessageStore',
alias : 'widget.message',
config : {
minHeight: 320,
minWidth:400,
bodyPadding : 10,
width : 500,
ghost : false,
bodyPadding : 10,
autoShow : true
},
items: [{
xtype:'panel',
layout : 'vbox',
items : [
{
xtype : 'mvvm-DateView' ,
flex : 1
},
{
xtype : 'mvvm-MessageView',
flex : 5
}]
}]});
Messagedate.js
Ext.define('Tgis.view.message.MessageDate', {
extend : 'Ext.grid.Panel',
xtype : 'mvvm-DateView',
store : 'MessageStore',
columns: [
{
text : 'Data',
dataIndex : 'date'
}
]});
MessageMaster.js
Ext.define('Tgis.view.message.MessageMaster', {
extend : 'Ext.form.Panel',
xtype : 'mvvm-MessageView',
requires : [
'Tgis.view.message.MessageViewModel'
],
title : 'Wiadomosci',
frame : true,
padding : 10,
viewModel : {
type : 'detailform' // references DetailViewModel
},
items : [
{
xtype : 'textfield',
bind : '{rec.message}',
fieldLabel : 'Tresc:'
},
{
xtype : 'hiddenfield',
bind : '{rec.id}'
}
]});
MessageModel.js
Ext.define('Tgis.view.message.MessageModel', {
extend : 'Ext.data.Model',
fields : [
{
name : 'date',
type : 'date'
},
{
name : 'message',
type : 'string'
},
{
name : 'id',
type : 'integer'
}
]});
Ext.define('Tgis.view.message.MessageStore', {
extend : 'Ext.data.Store',
model : 'Tgis.view.message.MessageModel',
storeId: 'MessageStore',
data : [
{
'date' : '28.05.1994',
'message' : 'lisa#simpsons.com',
'id' : '1'
}
]});
MessageController.js
Ext.define('Tgis.view.message.MessageController', {
extend : 'Ext.app.Controller',
init: function() {
this.control({
'mvvm-DateView': {
select : this.onGridSelect
}
});
},
onGridSelect : function(grid, record, index, eOpts) {
// grab a reference to the Detail view...
// we could have used a controller "ref", but those can also be problematic
var detailView = Ext.ComponentQuery.query('mvvm-DateView')[0];
//set the form's ViewModel binding
detailView.getViewModel().setData({ rec: record });
}});
MessageViewModel.js
Ext.define('Tgis.view.message.MessageViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.detailform',
data : {
rec : null
}});
Main.js
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
xtype: 'panel',
bind: {
title: '{name}'
},
region: 'west',
width: 250,
split: true,
defaultType : 'button',
layout : 'vbox',
items : [{
text : 'Wiadomości',
handler : 'onClickMessages'
},{
text : 'Wyczyść LC',
handler : 'onClearMessages'
}]
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Tab 1',
html: '<h2>Content appropriate for the current navigation.</h2>'
}]
}]});
MainController.js
Ext.define('Tgis.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onClickButton: function () {
Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onConfirm: function (choice) {
if (choice === 'yes') {
//
}
},
onClickMessages : function(button) {
Ext.Ajax.request({
url : 'http://localhost:8080/Messagess/res',
method : 'GET',
success : function(response) {
var json = Ext.decode(response.responseText);
//var itemsArray = new Array();
/*for (var i = 0; i < json.data.length; i++) {
var date = new Date(json.data[i].date);
var messageTxt = Ext.create('Ext.form.field.TextArea', {
fieldLabel :date.toLocaleString(),
value : json.data[i].message,
editable : false,
grow : true,
width : '100%'
});
if (localStorage.getItem('date') != 'null')
itemsArray.push(messageTxt);
}
var checkbox = Ext.create('Ext.form.field.Checkbox', {
id : 'checkboxmessage',
boxLabel : 'Nie pokazuj ponownie'
});
itemsArray.push(checkbox);*/
Ext.create('Tgis.view.message.Message', {
//messagess: json.data
//Ext.getCmp('usernameID').setValue('JohnRambo');
/*items: itemsArray,
buttons : [{
xtype : 'button',
text : 'Zamknij',
handler : 'onCloseClick'
}]*/
})
}
});
},
onClearMessages : function(button) {
localStorage.setItem('date', '0');
}});
MainModel.js
Ext.define('Tgis.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Tgis'
}});
Call store like this in view solved in my project
store: {
type: 'MessageStore'
}
You have defined a "store template" but not created a store instance.
If you want to create multiple stores of that type (e.g. one for each grid), do it like this:
xtype:'grid',
store:Ext.create('MyApp.store.SomeStore',{
...
}),
If you only want a single store of that type, just add the store to stores:[] array in Application.js and it should work.
ComboCode
var applicationStore = new Ext.data.Store({
autoLoad : true,
url : 'index.php',
method : 'post',
baseParams : {action : 'getListApplication'},
idProperty : 'id',
sortInfo : {field : 'APPLICATION_REF', direction : 'ASC'},
reader : new Ext.data.JsonReader({
fields : [
{name: 'id', type: 'integer'},
{name: 'APPLICATION_ACTION', type: 'STRING'},
{name: 'APPLICATION_ID', type: 'integer'},
{name: 'APPLICATION_REF', type: 'string'},
{name: 'APPLICATION_LABEL', type: 'string'}
]
})
});
var formUserIDPannel = new Ext.form.ComboBox({
/*id : 'formUserIDPannel',
title : 'Liste des Applications',*/
renderTo : 'principalContainer',
/*frame : true,
padding : 0,
labelWidth : 95,*/
//items : [ {
id : 'combo',
xtype : 'combo',
fieldLabel : 'Application',
emptyText : 'Selectionnez une application',
anchor : '97%',
style : 'text-align:center;',
labelStyle : 'font-weight:bold;',
labelSeparator : '',
store : applicationStore,
tpl : '<tpl for="."><div ext:qtip="{APPLICATION_LABEL}" class="x-combo-list-item">{APPLICATION_REF}</div></tpl>',
displayField : 'APPLICATION_REF',
valueField : 'APPLICATION_LABEL',
mode : 'local',
triggerAction : 'all',
hiddenName : 'APPLICATION_ID',
hiddenValue : 'APPLICATION_ID',
selectODFocus: :true,
editable : false ,
listeners : {
'select': function(combo, record, index) {
}
// }]
}
});
/*var formUserIDPannel = new Ext.FormPanel({
id : 'formUserIDPannel',
title : 'Liste des Applications',
renderTo : 'principalContainer',
frame : true,
padding : 0,
labelWidth : 95,
items : [ {
xtype : 'combo',
id : 'CAD_ID_COMBO',
name : 'CAD_ID_COMBO',
fieldLabel : 'Application',
labelStyle : 'font-weight:bold',
anchor : '80%',
labelSeparator : '',
emptyText : 'Selectionnez une application',
store : new Ext.data.ArrayStore({
id : 0,
fields : [ 'id', 'value' ],
data : [ [ 1, 'TMS' ], [ 2, 'SOFT' ], [ 3, 'Autres' ], ]
}),
displayField : 'value',
valueField : 'id',
hiddenName : 'APPLICATION_ID',
hiddenValue : 'APPLICATION_ID',
mode : 'local',
triggerAction : 'all',
editable : true
} ]
});*/
var application = Ext.data.Record.create([
{name: 'id', type: 'integer'},
{name: 'APPLICATION_ACTION', type: 'string'},
{name: 'APPLICATION_ID', type: 'integer'},
{name: 'APPLICATION_REF', type: 'string'},
{name: 'CADENCE', type: 'integer'},
{name: 'PRICE', type: 'integer'}
]);
var gridStore = new Ext.data.GroupingStore({
reader : new Ext.data.JsonReader({fields: application}),
autoLoad : true,
url : 'index.php',
method : 'post',
baseParams : {action : 'getListApplication'},
sortInfo : {field: 'APPLICATION_REF', direction: 'ASC'}
});
var editor = new Ext.ux.grid.RowEditor({saveText : 'Sauvegarder', cancelText : 'Annuler'});
editor.on('canceledit', function(roweditor, cancel){
if(cancel)
{
if(grid.getSelectionModel().getSelected().get('APPLICATION_ACTION') == 'add')
{
gridStore.remove(grid.getSelectionModel().getSelected());
}
}
//Ext.getCmp('buttonAddApplication').setDisabled(false);
});
editor.on('validateedit', function(roweditor, change, record, rowIndex){
var setRecord = new Array();
if(record.get('APPLICATION_ACTION') == 'add')
{
setRecord = change;
}
else if(record.get('APPLICATION_ACTION') == 'update')
{
for(i in change)
{
setRecord.push({'key' : i, 'value' : change[i]});
}
}
sendAjax({
url : 'index.php',
showBusy : false,
params : {action : 'actionCadence', data : Ext.encode({actionBDD : record.get('APPLICATION_ACTION'), 'APPLICATION_ID' : record.get('APPLICATION_ID'), where : [{'key' : 'APPLICATION_ID', 'val':record.get('APPLICATION_ID')}], set : setRecord})},
method : 'post',
renderVar : 'responseJSON',
successCallback : {
functionName : function() {
//Ext.getCmp('buttonAddApplication').setDisabled(false);
Ext.alert.msg(responseJSON.title, responseJSON.message);
if(responseJSON.success == true)
{
if(Ext.getCmp('gridApplication').getSelectionModel().getSelected().get('APPLICATION_ACTION') == 'add')
{
if(Ext.isDefined(responseJSON.APPLICATION_ID))
{
Ext.getCmp('gridApplication').getSelectionModel().getSelected().set('APPLICATION_ID', responseJSON.APPLICATION_ID);
}
Ext.getCmp('gridApplication').getSelectionModel().getSelected().set('APPLICATION_ACTION', 'update');
}
}
else
{
if(Ext.getCmp('gridApplication').getSelectionModel().getSelected().get('APPLICATION_ACTION') == 'add')
{
Ext.getCmp('gridApplication').getStore().remove(Ext.getCmp('gridApplication').getSelectionModel().getSelected());
}
editor.stopEditing();
}
}
}
});
});
var reseizer = new Ext.ux.PanelResizer({minHeight: 250, maxHeight: 800});
var filters = new Ext.grid.GridFilters({
local : true,
filters:[
{type: 'string', dataIndex: 'APPLICATION_REF'}
]
});
var grid = new Ext.grid.GridPanel({
id : 'gridApplication',
store : gridStore,
width : 500,
height : 600,
selModel : new Ext.grid.RowSelectionModel({singleSelect : true}),
title : 'Détails des Applications',
renderTo : 'gridContainer',
autoHeight : false,
stripeRows : true,
frame : true,
loadMask : true,
enableColumnMove : false,
enableDragDrop : false,
autoExpandColumn : 'APPLICATION_REF',
plugins : [editor, reseizer,filters],
view : new Ext.grid.GroupingView({markDirty: false}),
//plugins :[filters, new Ext.ux.grid.GroupSummary()],
columns : [ {
id : 'APPLICATION_REF',
header : 'Tache/Opératrion ',
dataIndex : 'APPLICATION_REF',
width : 200,
sortable : true,
},{
header : 'Cadence',
dataIndex : 'CADENCE',
width : 150,
sortable : true,
editor : {
xtype : 'textfield',
allowBlank : true
}
},{
header : 'Prix',
dataIndex : 'PRICE',
width : 150,
sortable : true,
editor : {
xtype : 'textfield',
allowBlank : true
}
}
]
});
This is from ExtJS 4.2
Try Select without the quotes
listeners: {
select: function (combo, records) {
//do your stuff here
}
}
I'm just started working with Ext js a week ago, and I would like to ask for help on how to make a relationship between two grid panel, I have the first panel to display categories and the second for sub-categories, so I want to : when I click on a category, it displays its subcategories in the second grid panel, and a message "please select a category if none is selected, for now I'm just displaying all subcategories in the second panel, here my code :
Ext.onReady(function() {
Ext.define('categorie', {
extend: 'Ext.data.Model',
fields: [
{name: 'id_categorie', type: 'string'},
{name: 'lib_categorie', type: 'string'},
],
idProperty: 'id_categorie'
});
Ext.define('sub-categorie', {
extend: 'Ext.data.Model',
fields: [
{name: 'id_sub-categorie', type: 'string'},
{name: 'lib_sub-categorie', type: 'string'},
{name: 'id_categorie', type: 'string' },
],
associations: [
{ type: 'belongsTo', model: 'categorie', primaryKey: 'id_sub-categorie', foreignKey: 'id_categorie' }
],
});
var categorieStore = Ext.create('Ext.data.Store', {
model: 'categorie',
pageSize : 15,
proxy: {
type: 'ajax',
url: 'ajax.php?mode=getCategories',
reader: {
type: 'json',
root: 'categories'
}
},
timeout : 90000,
extraParams : {
start : 0,
limit : 20
},
sorters: [ {
property : 'lib_categorie',
direction : 'ASC'
} ],
remoteSort : true,
autoDestroy : true,
simpleSortMode : true,
autoLoad: true
});
var subCategoriesStore = Ext.create('Ext.data.Store', {
model: 'sub-categorie',
pageSize : 15,
proxy: {
type: 'ajax',
url: 'ajax.php?mode=getSubCategories',
reader: {
type: 'json',
root: 'sub-categories'
}
},
timeout : 90000, // 90 secondes
extraParams : {
start : 0,
limit : 20
},
sorters: [ {
property : 'lib_sub-categorie',
direction : 'ASC'
} ],
remoteSort : true,
autoDestroy : true,
simpleSortMode : true,
autoLoad: true
});
var CategoriePanel = Ext.create('Ext.grid.Panel',{
title: 'Categories',
renderTo: 'categories_grid',
store: categorieStore,
columns: [
{
header : I18N.msgID,
tooltip : I18N.msgID,
align : 'left',
text: 'ID',
flex: 50,
dataIndex: 'id_categorie'
},
{
header : I18N.msgLib,
tooltip : I18N.msgLib,
align : 'left',
text: 'Lib',
flex: 50,
dataIndex: 'lib_categorie'
},
],
width: 400,
});
var subCategoriePanel = Ext.create('Ext.grid.Panel',{
title: 'subCategories',
renderTo: 'subcategories_grid',
store: subCategoriesStore,
columns: [
{
header : I18N.msgIDs,
tooltip : I18N.msgIDs,
align : 'left',
text: 'IDs',
flex: 50,
dataIndex: 'id_sub-categorie'
},
{
header : I18N.msgLibs,
tooltip : I18N.msgLibs,
align : 'left',
text: 'Libs',
flex: 50,
dataIndex: 'lib_sub-categorie'
},
],
width: 400,
});
You must add a listener to your categories grid:
listeners: {
itemclick: function ( this, record, item, index, e, eOpts ) {
// Select your catergory, find subcategories and load subcategories in your subcategories grid
}
}
I have this json string look like:
[{
"totalCount" : 134
}, {
"items" : [{
"id" : 1669,
"check" : false,
"name" : "1800mm趟门衣柜",
"part_number" : "DP101669"
}, {
"id" : 1670,
"check" : false,
"name" : "1800mm趟门衣柜",
"part_number" : "DP101670"
}, {
"id" : 1671,
"check" : false,
"name" : "2118mm趟门衣柜",
"part_number" : "DP101671"
}, {
"id" : 1672,
"check" : false,
"name" : "2118mm趟门衣柜",
"part_number" : "DP101672"
}, {
"id" : 1673,
"check" : false,
"name" : "1800mm趟门衣柜",
"part_number" : "DP101673"
}, {
"id" : 1674,
"check" : false,
"name" : "1800mm趟门衣柜",
"part_number" : "DP101674"
}, {
"id" : 1675,
"check" : false,
"name" : "1800mm趟门衣柜",
"part_number" : "DP101675"
}, {
"id" : 1676,
"check" : false,
"name" : "1800mm趟门衣柜",
"part_number" : "DP101676"
}, {
"id" : 1677,
"check" : false,
"name" : "2118mm趟门衣柜",
"part_number" : "DP101677"
}, {
"id" : 1678,
"check" : false,
"name" : "2118mm趟门衣柜",
"part_number" : "DP101678"
}
]
}
]
and my store look like:
var item_store = Ext.create('Ext.data.Store', {
model:'ItemModel',
autoLoad: true,
pageSize: 5,
proxy: {
type: 'ajax',
reader: {
type:'json',
root: 'items',
totalProperty: 'totalCount'
},
url: 'item_access.jsp?fullpage=true&item_cat=167&group_id='+groupId
}
});
but it cant read the root node for the store ,now my table look like that:
only with two blank row,
look like are node totalCount and items:
so how should I config the reader to read that string??
that is my grid:
var itemPanel=Ext.create('Ext.grid.Panel', {
id: 'item-panel',
title: '产品',
store: item_store,
columns: [
{ header: 'id', dataIndex: 'id' , flex: 1 },
{ header: 'part_number', dataIndex: 'part_number' , flex: 2 },
{ header: 'name', dataIndex: 'name', flex: 3 },
{ xtype: 'checkcolumn',header: '可见', dataIndex: 'check' , flex: 2 ,
listeners:{
checkchange: function(col, idx, isChecked) {
var view = itemPanel.getView(),
record = view.getRecord(view.getNode(idx));
postData(record.get('id'),"ITEM",isChecked);
}
}
}
],
region: 'center',
layout: 'card',
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: item_store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
text: 'Show Preview',
pressed: pluginExpanded,
enableToggle: true,
toggleHandler: function(btn, pressed) {
var preview = Ext.getCmp('gv').getPlugin('preview');
preview.toggleExpanded(pressed);
}
}]
}),
});
my model:
Ext.define('ItemModel', {
extend : 'Ext.data.Model',
idProperty : 'id',
fields : [{
name : "name",
convert : undefined
}, {
name : "id",
type : types.INT
}, {
name : "part_number"
}, {
name : "check",
type : types.BOOLEAN
}
]
});
In the 4.x series you can pass functions for both the root/total:
totalProperty: function(data) {
return data[0].totalCount
},
root: function(data) {
return data[1].items
}
You may change the data structure if possible :
{ "totalCount": 134, "items": [] }
Edit
I have setup a quick test using ext-all-debug.js from version 4.2.0.663, the same as in your JsFiddle. At first glance, the problem comes from the line 41343 :
root = Ext.isArray(data) ? data : me.getRoot(data);
At this point getRoot - which refers to the root property somehow - is not called because data is an array. This is not a bug. I rather think that you misuse the JSON reader which is designed to consider an array not as a configuration structure, but as a record list. Sorry for repeating this but you'd better replace the array with an object as mentionned above. If it's not possible you'll have to bring some changes to the framework in order to make it suit your needs.