This is my model:
data: i
0: i
data: Object
events: Object
hasListeners: k
id: "region-ext-record-344"
index: 0
internalId: "ext-record-344"
modified: Object
phantom: false
raw: Array[2] // i want to get those two elements one displayField, another valueField
0: "01"
1: "Region 1"
length: 2
__proto__: Array[0]
store: i
stores: Array[1]
__proto__: Object
1: i
2: i
3: i
length: 4
__proto__: Array[0]
I can post the code if you want to!
I tried to read store like:
store: regionStore, but it is showing me an empty box with 4 empty lines equal to item count in my store, then I tried to do like store: regionStore.data.items and now it shows me [object object] lines, I totally get it why, but can't find solution for that. I am new to all ExtJs stuff, I am using ExtJs 4 though.
My model looks like that :
Ext.regModel('region', {
fields: [
{name: 'id', type: 'integer'},
{name: 'name', type: 'String'}
});
and my store looks like that:
var regionStore = new Ext.data.ArrayStore({
id: 'regionStore',
model: 'region',
data: MyDesktop.GridWindow.getRegionData() //that is data from ajax response
});
My combobox:
{
xtype: 'combobox',
value: "region",
store: regionStore,
width: 135,
id: 'regionCombo'
editable: false
}
You have tagged your question extjs 4.2, but your code is old style and not following recommendations. I really recommend you to read the manual, especially the introduction to MVC.
Ext.regModel is deprecated as of version 4.0.0. Change your code as follows and save it to the file app/model/Region.js :
Ext.define('MyApp.model.Region', {
extends: 'Ext.data.Model',
fields: [
{name: 'id', type: 'integer'},
{name: 'name', type: 'string'}
]
});
In file app/store/Regions.js :
Ext.define('MyApp.store.Regions', {
extends: 'Ext.data.ArrayStore',
//id: notice that id is no longer necessary
model: 'Region',
//data: you load the store from the server, so the data is loaded automatically
autoLoad: true
})
Your combobox becomes:
xtype: 'combobox',
value: 'region',
store: 'Regions',
width: 135,
id: 'regionCombo',
editable: false,
valueField: 'id',
displayField: 'name'
I never used extjs before 4.2, but it seems the changes introduced with version 4 are important. It may be difficult to adopt the new paradigms. But I'm sure it radically simplifies your code. You certainly never will regret this step.
Also with the release of version 5.0, I think it's time to develop new habits and leave ExtJs 2.0 coding style behind.
You started off correctly, but you didn't specify which fields to use. Add the missing configuration :
store: regionStore,
valueField: 'id',
displayField: 'name'
For a combobox you can define a store inline as :
store: [[1, 'first option'], [2, 'second option']],
In this case you will not need to declare the value and the display field. They are implicit.
Related
I've got an extjs global store have I have hard coded with fields and data:
Ext.define('Registration.store.SavedSessions',{
extend: 'Ext.data.Store',
storeId: 'savedsessions',
fields:[
"id",
"title",
"dateStart"
],
data: [
{
id: 1,
title: 'test',
dateStart: new Date()
}
]
});
The global store is registered via the Application.js file:
Ext.define('Registration.Application', {
extend: 'Ext.app.Application',
name: 'Registration',
stores: [
'SavedSessions'
],
...
I also have a grid that I'm trying to load the store into:
Ext.define("Registration.view.cart.savedsessions.SavedSessions",{
extend: "Ext.grid.Panel",
xtype: 'savedsessions',
store: Ext.data.StoreManager.lookup('savedsessions'),
columns:[
{
text: 'Date',
dataIndex: 'dateStart'
},
{
text: 'Title',
dataIndex: 'title',
flex: 1
}
]
});
Looking at the docs this all looks correct. The problem I'm running into is that the store doesn't load.
When I open up the javascript console and count the number of records in the grid's store I get 0:
I'm not sure how this can happen at all considering the data is hard coded into the store.
Also, when I grab the store directly from the javascript console I can get the hard coded data:
What am I missing here?
Why use the StoreManager to get the store? Just use the storeId:
store: 'savedsessions',
I have generated an application with sencha cmd (it runs through bootstrap file), it has structure like:
app
---\model\
----------ComboBox.js
---\store\
----------ComboBox.js
---\view\
----------My.js
----------MyController.js
----------MyModel.js
My.js is a panel where i try to use xtype: 'combobox' with store: 'MyApp.store.ComboBox'. But it throws: Uncaught TypeError: Cannot read property 'isEmptyStore' of undefined. My store/ComboBox.js:
Ext.define('MyApp.store.ComboBox', {
extend: 'Ext.data.Store',
alias: 'store.combobox',
fields: [
'label', 'code'
],
model: 'combobox',
data: [
{
"label": "RRS",
"code": "643"
},
{
"label": "USA",
"code": "840"
}
]
});
my model/ComboBox.js
Ext.define('MyApp.model.ComboBox', {
extend: 'Ext.data.Model',
alias: 'model.combobox',
fields: ['label', 'code']
});
So It for some reason cannot properly find (load()?) my store class from my view. I tried to use store.combobox, combobox in store config field of the combobox - it doesnt work. I have no idea why, as I am following the "recommended" directory structure. If I put MyApp.store.ComboBox in global stores requires block inside Application.js - it just tries to load localhost/combobox.js (which is NOT_FOUND of course) and I think this is not the way at all.
UPDATE #1
The main question is that I have somth like this in view:
...
items: [
{
xtype: 'combobox',
store: 'MyApp.store.ComboBox',
valueField: 'code',
displayField: 'label',
fieldLabel: 'Type'
},
...
And it doesnt instantiate store object! so the error:
Uncaught TypeError: Cannot read property 'isEmptyStore' of undefined
Any ideas?
UPDATE #2
Finally:
...
items: [
{
xtype: 'combobox',
store: Ext.create('MyApp.store.ComboBox'),
valueField: 'code',
displayField: 'label',
fieldLabel: 'Type'
},
...
Works perfectly, so why do I can not use class name (according to documentation) in store config field?
I have strange problem with loading form panel with json request response.
In previous projects I used to load detail panel from grid store by using loadRecord(record)
The store has associated model so record's embedded objects are mapped to model's properties and form renders those fields without any problem.
Once I had to load form directly with response from form.load() I can't see properties from record's embedded objects.
For example from json
{
"message":null,
"success":true,
"data":{
"code":"1",
"name":"Canon Canada",
"modifiedBy":null,
"modifiedAt":null,
"address":{
"street":"6390 Dixie",
"suite":null,
"city":"Mississauga",
"provinceCode":"ON",
"postalCode":"L5T1P7"
},
...
}
}
I see rendered 'code' and 'name' properties, but not 'street' and 'city'.
Here is form.Panel code
Ext.define('App.view.billto.BillToDetailForm' ,{
extend : 'Ext.form.Panel'
,layout: 'form'
,alias : 'widget.BillToDetailForm'
,autoHeight: true
,bodyPadding: 10
,fieldDefaults: MainAppViewConfig.fieldDefaults
,defaults: {xtype: 'fieldcontainer',layout:'hbox', anchor: '100%'}
,items : [ { defaults: {xtype: 'textfield', allowBlank: false},
items: [{name: 'code', fieldLabel:'Bill To Code'}
,{name: 'name',fieldLabel: 'Name'}]}
,{ defaults: {xtype: 'textfield', allowBlank: false},
items: [{name: 'address.suite', fieldLabel:'Suite'}
,{name: 'address.street', fieldLabel:'Street'}]}
...
]
,loadContentForCode: function(code){
//this.getForm().trackResetOnLoad = true;
this.getForm().load({ method: 'GET',url: 'billtoDetail',
params:{'code':code},
waitMsg: 'Loading...',
/*success:function(form, action) {
console.log('BillToDetailForm:loadContentForCode callback on success '+this);
var responseObj = Ext.JSON.decode(action.response.responseText,true);
var billToModel = Ext.create('MPS.model.BillToModel',responseObj.data);
form.loadRecord(billToModel);
}*/
});
}
});
As you can see I even did unsuccessful attempt to reload form in success handler.
Also I have noticed that var billToModel = Ext.create('MPS.model.BillToModel',responseObj.data);
hasn't properly populated model's fields 'street' and 'city'. That's also might be the cause of the problem.
Ext.define('MPS.model.BillToModel', {
extend: 'Ext.data.Model'
,idProperty:'code'
,fields: [
{name: 'code', type: 'string'},
{name: 'name', type: 'string'},
{name: 'street',mapping:'address.street', type: 'string'},
{name: 'city', mapping:'address.city', type: 'string'},
...
]
});
Could you please point the real cause of the problem or advice any solution.
Thank you.
I just made fiddle for you. Take a look how it is working and try the same with your code:
Sencha Fiddle - How associated data works
If this something that you are looking for just mark as answered.
I am trying to re-load data into the Store which is further used by a GridPanel. My code goes like:
Ext.onReady(function(){
myData = [
['document','listsk','123','','','rat'],
['hiiiii','himself','rest','','','lap']
];
// create the data store
store = new Ext.data.SimpleStore({
fields: [
{name: 'cat'},
{name: 'desc'},
{name: 'edcsId'},
{name: 'transformedEDCSUrl'},
{name: 'transformedFormatsUrl'},
{name: 'lineNotes'}
]
});
store.loadData(myData);
// create the Grid
grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "<b>Category</b>", sortable: true, dataIndex: 'cat'},
{header: "<b>Description or Document Title</b>", sortable: true, dataIndex: 'desc'},
{header: "<b>EDCS ID #</b>", sortable: true, renderer: renderEDCSUrl, dataIndex: 'edcsId'}
{header: "<b>URLs to Formats</b>", renderer: renderFormatsUrl},
{id: 'lineNotes', header: "<b>Line Notes</b>", sortable: true, dataIndex: 'lineNotes'}
],
viewConfig: {
forceFit: true
},
autoExpandColumn: 'lineNotes',
stripeRows: true,
collapsible: true
})
reload = function refreshGrid(data){
store.loadData(data);
}
})
The mydata variable as seen by Firebug is:
[
['document','listsk','123','','','rat'],
['hiiiii','himself','rest','','','lap']
]
And the data variable in the javascript function refreshGrid is also same:
[
['document','listsk','123','','','rat'],
['hiiiii','himself','rest','','','lap']
]
I am invoking the function refreshGrid as follow:
function load(response) {
reload(response.substring(response.indexOf('myData') + 9,
response.indexOf('function renderABC') - 2));
}
To me it looks like a JSON parsing issue as data is coming fine from backend. Which is the best way to parse JSON string coming from backend. The behaviour with javascript invcation of store.loadData is that each character in the data variable is treated as separate row in the Grid as shown below:
Looks like you are providing an array of strings to the store instead of array of arrays as it expects.
As a result, store treats each value of an array(string actually) as an array. As soon as strings support referencing by index(at least in non-IE browsers), you get the behavior described.
For all who face this problem, a quick wayout is eval function and otherwise use some library for JSON.
I have a ExtJS (4.0) grid and it works fine. Now I want it to advance it a bit by adding filters to it. I want users to be able to filter items by the status.
I have created the following store:
var status_store = Ext.create('Ext.data.Store', {
model: 'Statuses',
proxy: {
type: 'ajax',
url: '/json/statuses/',
reader: 'json'
}
});
and I can see it loads, /json/statuses/ will return the following json object:
[
{
"name": "OK",
"isActive": true
},
{
"name": "Outdated",
"isActive": true
},
{
"name": "New",
"isActive": true
}
]
Now I define the filters:
var filters = {
ftype: 'filters',
encode: encode,
local: local,
filters: [{
type: 'list',
dataIndex: 'name',
store: 'status_store',
labelField: 'name'
}]
};
and add the filter to my column definition:
{text: 'Status', width: 120, dataIndex: 'status', sortable: true, filterable: true, filter: {type: 'list'}},
What happens is I get the following error when the grid loads:
Uncaught TypeError: Object json has no method 'read' (ext-all-debug.js:25702)
and when I click on the column header for the menu:
Uncaught TypeError: Object status_store has no method 'on' (ListMenu.js:69)
How can I fix this or am I doing something conceptually wrong?
Here is the full quote of my code just in case: http://pastebin.com/SNn6gFJz
Thanks for Diagnosing the problem. The 4.1 fix is this modify ListMenu.js
in the else part of the constructor
replace
me.store.on('load', me.onLoad, me);
with
// add a listener to the store object
var storeObject = Ext.StoreMgr.lookup(me.store);
storeObject.on('load', me.onLoad, me);
me.store = storeObject;
filters: [{
type: 'list',
dataIndex: 'name',
store: 'status_store',
labelField: 'name' ,
options:[a,b]
}]
You also have to give the options in list filters.
I was having a similar problem. I followed the #jd comment on the other answer here but the options menu just said "loading...". I resolved it with a bit of a hack here.