For some reason unknown to me, I cannot get my Ext JS store to display in my combobox
Here's my model:
Type.js
Ext.define('AM.model.Type', { //app name config is "AM"
extend: 'Ext.data.Model',
fields: [
{ name: 'field', type: "string" }
]
});
And my store:
Type.js
Ext.define('AM.store.Type', {
extend: 'Ext.data.Store',
model: 'AM.model.Type',
storeId: 'typestore',
data: [
{ field: 'Bobby' },
{ field: 'Jimbo' },
{ field: 'Craig' }
]
});
And where I call it:
app.js
{ xtype: 'combobox', padding: 5, store: Ext.getStore('typestore'), displayField: 'field'}...
Any ideas?
I don't see anything wrong here. The problem is probably elsewhere.
I have created a sample fiddle with your code slightly simplified, and it works fine.
http://jsfiddle.net/dbrin/28sX7/
I solved the problem by instantiating my store class with into a variable using Ext.Create
and setting my comboboxes queryMode to local (remote would display the data but keep on loading and loading).
Related
I am facing an issue with Date Field in ExtJs. My view model data does not bind to the date field correctly. From server, if my date gets rendered like this
"2010-07-13T01:02:10.000Z" it binds correctly. But if it gets rendered like "2010-07-13T01:02:10", it does not bind correctly to the date field.
Is there something we need to do to bind the data to date field? I cannot post the actual code but I tried creating a small sample but in that both formats are not binding correctly. But if i specify '2010-07-13', it binds correctly.
ExtJS Version 6.0.1.250
Ext.define('Plus.view.MainM', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
StartDate: '2010-07-13T01:15:20.000Z',
Name: 'Kapil'
}
});
Ext.define('Plus.view.MainV', {
extend: 'Ext.form.Panel',
xtype: 'app-main',
viewModel: {
type: 'main'
},
items: [{
xtype: 'textfield',
itemId: 'Name',
bind: '{Name}',
},
{
xtype: 'datefield',
itemId: 'StartDate',
width: 105,
bind: '{StartDate}'
}]
});
Ext.application({
name: 'Plus',
extend: 'Ext.app.Application',
autoCreateViewport: 'MainV',
launch: function() {
}
});
Thanks for the help.
I'm using Sencha Architect 3.0.1.
I'm trying to use a Model, a TreeStore, and a TreePanel.
The Model:
Ext.define('User.model.ModelClientList', {
extend: 'Ext.data.Model',
fields: [{ name: 'id' }, { name: 'name' }, { name: 'status' } ],
proxy: {
type: 'direct',
directFn: 'UserClient.listClient',
reader: { type: 'json',root: 'data'}
}
});
The TreeStore:
Ext.define('User.store.StoreClientList', {
extend: 'Ext.data.TreeStore',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'User.model.ModelClientList',
storeId: 'StoreClientList'
}, cfg)]);
}
});
And the TreePanel:
{
xtype: 'treepanel',
height: 250,
itemId: 'MainClient',
width: 400,
title: 'Clients',
hideHeaders: false,
store: 'StoreClientList',
rootVisible: false,
viewConfig: {loadMask: true},
columns: [
{xtype: 'treecolumn',dataIndex: 'name',text: '..'},
{xtype: 'gridcolumn', dataIndex: 'status', text: '..'}
]
}
The json request to UserClient.listClient returns this:
{
"data":[
{"id":1,"name":"Pluto","status":3,"children":[
{"id":35,"name":"Mela","status":2,"leaf":true},
{"id":36,"name":"Pera","status":1,"leaf":true},
{"id":37,"name":"Arancia","status":1,"leaf":true}]},
{"id":2,"name":"Pippo","status":1,"leaf":true},
{"id":3,"name":"Paperino","status":2,"leaf":true}],
"success":true
}
Now, can someone explain me:
(1) Why, when I click on [+] icon of the first node the application does another ajax request instead of expanding what already got from the previous request
(2) Given this initial view:
Why when I click on the [+] it starts going crazy like this:
It was clearly a problem of Sencha Architect.
I rewrote from scratch in a new project the same architecture and now it works as expected.
Also, I noticed that something was going wrong with Architect becouse of simple operation made it show incomprehensible and undebuggable errors (like "Cannot set property 'DirectCfg' of null").
Unfortunately I cannot state that Sencha Architect is mature for large and complex project.. probably not even for small project. what a pity
No matter what I try, I cannot get my combobox to display a single field from my store.
Here's my code:
store/Criteria_1.js
Ext.define('AM.store.Critera_1', { //temp store
extend: 'Ext.data.Store',
model: 'AM.model.Criteria1',
storeId: 'search_criteria_1',
fields: ['TECH_NAME', 'KBE_ID', 'KBE_NAME'],
data : [
{ TECH_NAME: 'TECH_NAME' },
{ KBE_ID: 'KBE_ID' },
{ KBE_NAME: 'KBE_NAME' }
];
});
model/Criteria_1.js
Ext.define('AM.model.Criteria_1', {
extend: 'Ext.data.Model',
fields: [
{ name: 'TECH_NAME', type: 'string' },
{ name: 'KBE_ID', type: 'int' },
{ name: 'KBE_NAME', type: 'string' }
]
});
And here's where I'm trying to call it, app.js:
{ xtype: 'combobox', padding: 5, id: 'criteria_1_dropdown', store: Ext.StoreManager.get('Criteria_1'), displayField: 'KBE_ID' },
I don't want to use a proxy just yet either. Any ideas?
You shouldn't define fields in your store if you are using a Model. Also. the data you have in your store is most likely not what you are looking for. You have 3 different records, each with only one of your fields populated. You probably want this:
data : [
{
TECH_NAME: 'TECH_NAME',
KBE_ID: 'KBE_ID',
KBE_NAME: 'KBE_NAME'
}
]
I had the same problem. I solved it looking at this example from the Extjs 5 documentation: http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/#form-combos
You have a few things different. Try this:
Ext.define('AM.model.Criterion', { // the model name should be singular; it refers to only one entry)
extend: 'Ext.data.Model',
fields: [
'TECH_NAME',
'KBE_ID',
'KBE_NAME'
]
});
Ext.define('AM.store.Critera_1', { //temp store
extend:'Ext.data.ArrayStore',
model: 'AM.model.Criterion',
storeId: 'search_criteria_1',
data : [
[ 'TECH_NAME_ONE', 'KBE_ID_ONE', 'KBE_NAME_ONE' ]
];
});
Finally:
{
xtype: 'combobox',
padding: 5,
id: 'criteria_1_dropdown',
store: { type:'search_criteria_1' },
displayField: 'KBE_ID',
queryMode:'local'
}
Pay attention to queryMode:'local'. I adapted my working code to your example without testing.
I hope it helps.
I am new to ExtJS and am playing around with it, I am receiving following JSON from the server as shown below
{"tid":1,"action":"HelloWorld","method":"getData",
"result": {"InstId":"1",
"value": [
{"country.stateId":"101", "country.stateName":"TA"},
{"country.stateId":"102", "country.stateName":"ABC"},
{"country.stateId":"103", "country.stateName":"DEF"}]}",
"type":"rpc"}
and I need to extract values form the above JSON and populate the combobox. To do this job I need to write a custom Reader to read and populate the in the combobox. Can anyone of you please help me in writing a custom reader?
Following are the various snippet
Ext.define('AM.store.TestStore', {
extend: 'Ext.data.Store',
alias : 'widget.testStore',
model: 'AM.model.TestModel',
autoload:true,
proxy: {
type: 'direct',
directFn: HelloWorld.getData,
extraParams:[ {'InstId': '1', 'boxid':'id'},
{'InstId': '1', 'name':'states'}
],
reader:{
type:'json',
root:'result'
}
});
Following is the view object
Ext.define('AM.view.combobox.TestView' ,{
extend: 'Ext.form.ComboBox',
alias : 'widget.TestView',
fieldLabel: 'States',
store:'TestStore',
renderTo: Ext.getBody(),
displayField: 'country.stateName',
valueField: 'country.stateId',
autoselect:false
});
Following is my Model Object
Ext.define('AM.model.TestModel', {
extend: 'Ext.data.Model',
alias : 'widget.TestModel',
fields: [ {name: 'country.stateId'}, {name: 'country.stateName'}]
);
Following is my controller
Ext.define('AM.controller.Funds', {
extend: 'Ext.app.Controller',
alias : 'widget.FundsController',
views: ['combobox.TestView'],
stores: ['TestStore'],
models:['TestModel']
);
Can anyone please help me to write a custom JSON Reader?
Thanks
Phani Kumar
You don't need to write custom reader for that. I think making couple small changes in your code would be enough:
First, in the proxy definition:
root: 'value'
useSimpleAccessors: true
then in the model for your data:
fields: [{
name: 'id', mapping: 'country.stateId' }, {
name: 'name', mapping: 'country.stateName'
}]
That should do it.
I have created navigaton view using Sencha touch 2. Navigation view has list component which i want to load it using store and model. I created model and store as required. On running my app the list does not render any data.
It also gives warning in conolse [Ext.dataview.List#applyStore] The specified Store cannot be found . I am not sure what this error means.
Here is my mvc code,
model:
Ext.define('GS.model.BlogModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'title', type: 'auto'},
{name: 'author', type: 'auto'},
{name: 'content', type:'auto'}
]
}
});
store:
Ext.define('GS.store.blogs',{
extend:'Ext.data.Store',
config:{
model:'GS.model.BlogModel',
autoLoad :true,
proxy:{
type:'jsonp',
url:'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader:{
type:'json',
rootProperty:'responseData.feed.entries'
}
}
}
});
view:
Ext.define('GS.view.Blog',{
extend:'Ext.navigation.View',
xtype:'blog',
requires:[
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store',
'GS.store.blogs'
],
config: {
title:'Blog',
iconCls:'star',
items:{
xtype:'list',
itemTpl:'{title}',
title:'Recent Posts',
store:'GS.store.blogs'
}
}
});
Can someone point me out what is missing/
Any help appreciated.
The store property in items for your list needs to be an instance, not the name of the class. GS.store.blogs is the class name. You need to create an instance of this class using Ext.create and pass that instance in items. Oh yeah, and your syntax for items is wrong too. Needs to be an array [] not an object {}. So something like:
var blogsStore = Ext.create("GS.store.blogs"); //put this in the items list
Ext.define('GS.view.Blog',{
extend:'Ext.navigation.View',
xtype:'blog',
requires:[
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store',
'GS.store.blogs'
],
config: {
title:'Blog',
iconCls:'star',
items:[{
xtype:'list',
itemTpl:'{title}',
title:'Recent Posts',
store: blogsStore //Store instance here. And items are in array, not Object
}]
}
});