Help with any portion of this is appreciated. I am totally new to using extjs and the version is old (3.3). When the user selects the combo box, data is loaded in the combo box. I need to allow the user to select/insert a blank option (i.e.: so the first option should be id:0 field and can be blank). Last, I must give the model an additional field: id.
I can see the data returned in network tab, so I have the url path correct (the url was set up to return an id and list name), but the store property is empty, so no data in combo box.
header: 'Bucket List',
sortable: true,
dataIndex: 'bucket_list',
width: 10,
align: 'center',
editor: BucketList = new Ext.form.ComboBox({
valueField: 'name',
displayField: 'name',
triggerAction: 'all',
typeAhead: true,
preventMark: true,
editable: false,
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/todos/sysadmin/bucket-lists',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'bucket_lists',
fields: [
'id',
'name'
]
}),
listeners: {
beforeload: function (data_objStore, data_objOpt) {
data_objOpt.params.userModel = userModelCbx.getValue();
data_objOpt.params.user_id = 001;
}
}
}),
listeners: {
blur: function () { }
}
}),
Below code shows the response, but at index 0, id is 1. I need index 0 to be id: 0 or null value ( 0: {id: 0, name: ''} )
RESPONSE:
0: {
id: 1,
name: "bucketListItem_1"
}
1: {
id: 2,
name: "bucketListItem_2"
}
2: {
id: 3,
name: "bucketListItem_3"
}
3: {
id: 4,
name: "bucketListItem_4"
}
I have read alot of the docs and answers here on SO. I tried using some of the store methods, like add(), insert(), load(), but I'm probably using them in the wrong places or something. I'm asking here because I'm stuck and I really hope someone will help me. Thanks.
UPDATE:
after beforeload, add this to store listeners to insert a blank record. Make sure your reader is accessing the right fields
beforeload: function( sObj, optObjs ){
// code here...
},
load: function(store, records) {
store.insert(0, [new Ext.data.Record({
id: null,
name: 'None'
})
]);
}
Response:
0: {
id: null,
name: "None"
}
1: {
id: 1,
name: "bucketListItem_1"
}
2: {
id: 2,
name: "bucketListItem_2"
}
...
You may try with next working example. You need to insert the record on store's load listener using new Ext.data.Record. Also check tpl config option - it's needed to show empty record correctly. Example is tested with ExtJS 3.4, but I think it should work with your version too.
Ext.onReady(function() {
var combo = new Ext.form.ComboBox({
tpl : '<tpl for="."><div class="x-combo-list-item">{name} </div></tpl>',
valueField: 'name',
displayField: 'name',
triggerAction: 'all',
typeAhead: true,
preventMark: true,
editable: false,
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/todos/sysadmin/bucket-lists',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'bucket_lists',
fields: [
'id',
'name'
]
}),
listeners: {
load: function (s) {
record = new Ext.data.Record({
id: 0,
name: ''
});
s.insert(0, record);
}
}
})
});
var grid = new Ext.grid.EditorGridPanel({
renderTo: Ext.getBody(),
store: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'combo-extjs3-editor-json.html',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'bucket_lists',
fields: [
'id',
'name'
]
})
}),
width: 600,
height: 300,
columns: [
{
header: 'Name',
dataIndex: 'name',
width: 130,
editor: combo
}
]
});
});
Related
I Have a Ext.grid.GridPanel that is linked to a Ext.data.JsonStore for data and Ext.grid.ColumnModel for grid specs.
I have 10 columns. 9 of them are being populated by the json store. I am having issues with the last column since its data is dynamic and not able to loaded like the rest.
the column requires that other datastores be loaded first and once they are loaded I need to extract data from those columns and insert that data into a column in my json store to display in the 10 column grid.
`
var JSONSTORE = new Ext.data.JsonStore ({
// Store Configs
autoLoad: true,
url: 'json_data_call.php',
baseParams: {action: 'read'},
// Reader Configs
storeId: 'store1',
idProperty: 'store1',
root: 'data',
sortInfo: {
field: 'field_name',
direction: 'ASC'
},
fields: [
{name : 'field_name', type: 'string'},
{name : 'field_name', type: 'string'},
{name : 'field_name', type: 'int'}
],
autoSave: false
});
JsonStore.on('exception',JsonSave,this);
JsonStore.on('load',function(){
autoDiagnosticsJsonStore.warn_err_loaded = true;
if(autoDiagnosticsJsonStore.warn_err_loaded)
{
console.log(autoDiagnosticsJsonStore);
}else{
console.log('ERROR');
}
});
/*
* ColumnModel
*/
var ColumnModel = new Ext.grid.ColumnModel ({
defaults: { menuDisabled: true },
columns: [
{header: 'Type', hideable: false, sortable: false, dataIndex: 'ERR_TYPE',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
if (record.data.ERR_TYPE == 'WARNING') {
metaData.css = 'cog_bg_orange';
}
if (record.data.ERR_TYPE == 'ERROR') {
metaData.css = 'cog_bg_red';
}
return value;
}
},
{header: 'Item Found', hideable: false, sortable: false, dataIndex: 'ERR_MSG', width: 900, css: 'font-family: lucida console, monospace;'}
]
});
var errorGrid = new Ext.grid.GridPanel({
id: 'nmerrorGrid',
enableColumnMove: false,
autoHeight: true,
xtype: 'grid',
ds: JsonStore,
cm: ColumnModel,
sm: new Ext.grid.RowSelectionModel({singleSelect: true})
});
$error_panel = "
var errorPanel = new Ext.Panel({
title: 'field_name',
collapsible: true,
anchor: '98%',
height: 300,
frame: true,
layout: 'fit',
items: [ errorGrid ]
});`
If I understand this correctly, you're trying to create another field for records in the store, and that field is calculated once the store is populated.
If you create a model for the records of your store, you can create a field that is calculated using the record's values.
Example:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'firstName',
type: 'string'
},{
name: 'lastName',
type: 'string'
},{
name: 'fullName',
calculate: function (data) {
return data.firstName + ' ' + data.lastName;
}
}]
});
The field 'fullName' is built using the existing records values. You can add your model to the store (model: 'User') in place of the fields config.
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 am using Extjs 4.2 grid for my application. In my grid there is an option to select multiple rows and to delete them(via checkbox). But I am but the selected rows not returning any values.
Bellow is my code..
###########################################################################
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../js/extjs_4_2/examples/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.selection.CheckboxModel'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
{name: 'patient_name'},
{name: 'referrer_provider'},
{name: 'admit_date'},
{name: 'added_date'},
{name: 'billing_date'},
{name: 'dob'},
{name: 'loc_name'},
{name: 'physician_name'},
{name: 'imploded_diagnosis_name'},
{name: 'imploded_procedure_name'},
{name: 'imploded_optional_name'},
{name: 'imploded_quick_list_name'},
{name: 'med_record_no'},
{name: 'message'}
],
idProperty: 'bill_id'
});
var url = {
remote: '../new_charges_json.php'
};
// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = false;
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'jsonp',
url: (local ? url.local : url.remote),
reader: {
root: 'charges_details',
totalProperty: 'total_count'
},
simpleSortMode: true
},
sorters: [{
property: 'patient_name',
direction: 'DESC'
}]
});
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
// Filters are most naturally placed in the column definition, but can also be
// added here.
filters: [{
type: 'string',
dataIndex: 'patient_name'
}]
};
// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model
var createColumns = function (finish, start) {
var columns = [
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../js/extjs_4_2/examples/shared/icons/fam/user_profile.png', // Use a URL in the icon config
tooltip: 'Patient Profile',
renderer: renderTopic,
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
//alert("Bill Id: " + rec.get('bill_id'));
//Ext.Msg.alert('Bill Info', rec.get('patient_name')+ ", Bill Id: " +rec.get('bill_id'));
window.location.href="../newdash/profile.php?bill_id="+rec.get('bill_id');
}
},
]
},
{
dataIndex: 'patient_name',
text: 'Patient Name',
sortable: true,
// instead of specifying filter config just specify filterable=true
// to use store's field's type property (if type property not
// explicitly specified in store config it will be 'auto' which
// GridFilters will assume to be 'StringFilter'
filterable: true
//,filter: {type: 'numeric'}
}, {
dataIndex: 'referrer_provider',
text: 'Referring',
sortable: true
//flex: 1,
}, {
dataIndex: 'admit_date',
text: 'Admit date',
}, {
dataIndex: 'added_date',
text: 'Sign-on date'
}, {
dataIndex: 'billing_date',
text: 'Date Of Service',
filter: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'dob',
text: 'DOB'
// this column's filter is defined in the filters feature config
},{
dataIndex: 'loc_name',
text: 'Location',
sortable: true
},{
dataIndex: 'physician_name',
text: 'Physician (BILLED)',
sortable: true
},{
dataIndex: 'imploded_diagnosis_name',
text: 'Diagnosis'
},{
dataIndex: 'imploded_procedure_name',
text: 'Procedure'
},{
dataIndex: 'imploded_optional_name',
text: 'OPT Template'
},{
dataIndex: 'imploded_quick_list_name',
text: 'Quick List'
},{
dataIndex: 'med_record_no',
text: 'Medical Record Number'
},{
dataIndex: 'message',
text: 'TEXT or NOTES'
}
];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [
{xtype : 'checkcolumn', text : 'Active', dataIndex : 'bill_id'}
],
checkOnly: true,
mode: 'multi',
enableKeyNav: false,
listeners: {
selectionchange: function(sm, selections) {
grid.down('#removeButton').setDisabled(selections.length === 0);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
//width: 1024,
height: 500,
title: 'Charge Information',
store: store,
//disableSelection: true,
loadMask: true,
features: [filters],
forceFit: true,
viewConfig: {
stripeRows: true,
enableTextSelection: true
},
// grid columns
colModel: createColumns(15),
selModel: selModel,
// inline buttons
dockedItems: [
{
xtype: 'toolbar',
items: [{
itemId: 'removeButton',
text:'Charge Batch',
tooltip:'Charge Batch',
disabled: false,
enableToggle: true,
toggleHandler: function() { // Here goes the delete functionality
alert(selModel.getCount());
var selected = selModel.getView().getSelectionModel().getSelections();
alert(selected.length);
var selectedIds;
if(selected.length>0) {
for(var i=0;i<selected.length;i++) {
if(i==0)
{
selectedIds = selected[i].get("bill_id");
}
else
{
selectedIds = selectedIds + "," + selected[i].get("bill_id");
}
}
}
alert("Seleted Id's: "+selectedIds);return false;
}
}]
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying charges {0} - {1} of {2}',
emptyMsg: "No charges to display"
}),
renderTo: 'charges-paging-grid'
});
store.loadPage(1);
});
#
It's giving the numbers in alert dialogue of the selected rows,here
alert(selModel.getCount());
But after this it's throwing a javascript error "selModel.getView is not a function" in the line bellow
var selected = selModel.getView().getSelectionModel().getSelections();
I changed it to var selected = grid.getView().getSelectionModel().getSelections(); Still it's throwing same kind of error(grid.getView is not a function).
Try this
var selected = selModel.getSelection();
Instead of this
var selected = selModel.getSelectionModel().getSelections();
You already have the selection model, why are you trying to ask to get the view to go back to the selection model? It's like doing node.parentNode.childNodes[0].innerHTML.
selModel.getSelection(); is sufficient. Also be sure to read the docs, there's no getView method listed there for Ext.selection.CheckboxModel, so you just made that up!
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' },
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.