Given the following javascript:
var fo = Ext.create('Ext.form.Panel', {
layout:'box',
...
items: [{
xtype: 'combobox',
valueField: 'id',
displayField: 'organizationtype',
store: {
storeId: 'zaza',
fields: [{name: 'id'}, {name: 'organizationtype'}],
root: 'data',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/apps/crm_organizations/orgtype/',
reader: {
type: 'json'
}
}
},
fieldLabel: 'Type relation',
name: 'organizationtype',
queryMode: 'local',
},
...
This panel contains - among other fields - also this combobox. I can see with wireshark that the url '/apps/crm_organizations/orgtype/' is actually queried. However the combobox doesn't show any values. Has this anything to do with the fact that I'm lazy loading the combobox?
This is the response on the JSON request:
{data: [ {id:"1" ,organizationtype:"Customer"}
,{id:"2" ,organizationtype:"Relation"}
,{id:"3" ,organizationtype:"Supplier"}
,{id:"4" ,organizationtype:"Unknown"} ]}
You have to set the root to the json reader you are using, Default is "", your's should be :
reader: {
type: 'json',
root: 'data'
}
Also you might consider replacing the fields configuration with a model object.(from docs)fields: In general this configuration option should be avoided, it exists for the purposes of backwards compatibility
Change combobox mode from local to remote mode: 'remote' and use json store:
store: {
xtype: 'jsonstore',
url: '/apps/crm_organizations/orgtype/',
autoLoad: true,
idProperty: 'id',
root: 'data',
fields: ['id','organizationtype'],
},
mode: 'remote'
In your store ,you missing the root property
store: {
storeId: 'zaza',
fields: [{name: 'id'}, {name: 'organizationtype'}],
root: 'data',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/apps/crm_organizations/orgtype/',
reader: {
type: 'json',
root:'data'
}
}
}
and if your combo is query information across domains,then use jsonp configuration and use remote query for better performance
Related
I have a paging grid with a store. I have to change the proxy of the store, but when i do this and try to reload the grid, it gives a loading mask and do nothing else. Can you help me?
This is the original store:
var store = new Ext.data.JsonStore({
autoDestroy: true,
proxy: {
type: 'direct',
directFn: Ext.d.Class.Function,
extraParams: {
param: param
},
paramOrder: ['param', 'filter', 'start', 'limit', 'sort'],
reader: {
type: 'json',
root: "rows",
idProperty: 'id',
totalProperty: "all"
}
},
fields: fields,
remoteSort: true,
autoLoad: false,
sorters: sorters
});
The original grid:
var grid = Ext.create('Ext.grid.Panel', {
selModel: selmodel,
title: title,
flex: 1,
store: store,
columns: columns,
bbar: pager = Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '{1} / {2}',
emptyMsg: ""
})
//...
The new proxy:
var newProxy = Ext.create('Ext.data.Proxy', {
type: 'ajax',
paramsAsHash: false,
url: 'tasks.php',
actionMethods: {
read: 'POST'
},
extraParams: {
task: 'getItems',
id: id
},
reader: {
type: 'json',
root: "rows",
idProperty: 'id',
totalProperty: "all"
}
});
And I tried to set proxy and load the store, but it doesn't do anything.
grid.getStore().removeAll();
grid.getStore().setProxy(newProxy);
grid.getDockedItems()[2].store.setProxy(newProxy);
grid.getStore().load(); // fails, loading mask but no ajax
Any idea?
That's because you're not actually creating an Ajax proxy, but its parent class Ext.data.Proxy. The type is not interpreted in these lines:
var newProxy = Ext.create('Ext.data.Proxy', {
type: 'ajax',
You have to specify the actual class name:
var newProxy = Ext.create('Ext.data.proxy.Ajax', {
(And, IMHO, you'd better create it with the new keyword new Ext.data.proxy.Ajax, so that you discover your missing requires early...)
I am using Extjs 4.1, tried to load data for Combobox, but doesn't work. I have strong doubt about hte json reader root / record.
the data model and store are defined ,
Ext.define('tagModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'}
]
});
var tagStore = new Ext.data.Store({
model: 'tagModel',
proxy: {
type: 'ajax',
url: '/ExtjsWebApp/webresources/question/loadTags',
reader: {
type: 'json',
record : 'rtnList'
}
},
listeners: {
load: function(store, records, options){
alert("success " +records.length);
}
},
autoLoad: true
});
the ComboBox is defined as this,
{
itemId: 'search_tag_fld',
fieldLabel: 'Tag',
xtype: 'combobox',
displayField: 'name',
valueField: 'id',
store: tagStore,
queryMode: 'remote',
multiSelect: true,
anchor: '100%',
labelHeight: 300
}
I am sure that the restful webservice will return data as this
{"rtnList":[{"id":1,"name":"Java","active":"true"},{"id":2,"name":"J2EE","active":"true"},{"id":3,"name":"JMS","active":"true"},{"id":4,"name":"Design","active":"true"},{"id":5,"name":"SOA","active":"true"}],"successMsg":"success","errorMsg":"","time":"09/21/2013 18:34:55","sessionId":null,"userId":null}
In your reader, change "record" to "root". Here's a fiddle that shows that your current setup will work just fine: https://fiddle.sencha.com/#fiddle/km
This is my model for my combo
Ext.define('ExtJS.myApp.ComboModel', {
extend: 'Ext.data.Model',
alias: 'widget.combomodel',
fields: [
{ name: 'ID', type: 'int' },
{ name: 'title', type: 'string' }
]
});
This is comboStore
this.comboStore = Ext.create('Ext.data.Store', {
model: 'ExtJS.myApp.ComboModel',
autoLoad: true,
scope: this,
proxy: {
type: 'ajax',
scope: this,
url: 'myApp/GetRecords',
reader: {
type: 'json',
root: 'data'
}
}
});
this.myComboBox = Ext.create('Ext.form.ComboBox', {
store: this.comboStore,
queryMode: 'local',
displayField: 'title',
valueField: 'ID'
});
This is the json object I get for my store:
{"ID":"111","title":"Ext Page 1"}
now when I try to set the value of the combobox like this.
this.myComboBox.setValue('111');
the combobox shows "111" instead of "Ext Page 1"
What would I have to do so that the combobox displays displayField while setting valueField. For example. I want to set the value as "Ext Page 1" for the user to see, but When save the value, I actually want to save "111'
try:
this.myComboBox.setValue(111);
instead of:
this.myComboBox.setValue('111');
When I am trying to fetch data from the Store in the Combo Box,I am getiing output as--- [object Object]!!! but the value of the object is not coming!! Can any body tell me what is the problem or what should be the solution for this???
In Extjs 4.0:
Create data model
Ext.define('Bond', {
extend: 'Ext.data.Model',
idProperty: 'userid',
fields: [
{
name :'industryGroupsreName',
type:'string'
},
]
});
Create store
var industry=new Ext.data.Store(
{
model:'Bond',
proxy:
{
type: 'ajax',
url: 'industry.html',
reader: {
type: 'json'
}
}
});
industry.load();
Apply bellow code to your combo box
new Ext.create('Ext.form.ComboBox',
{
fieldLabel: 'Industry Group Name',
store: industry,
id: "industrygroup",
name: "industrygroup",
allowBlank: false,
hiddenName : 'industrygroup',
width:300,
queryMode: 'local',
displayField: 'industryGroupsreName',
valueField: 'industryGroupsreName'
}),
I have a form containing 2 comobox fields, which are linked combox fields.
Chapters and lessons
When a user selects a chapter, list of lessons in that chapter will be shown.
How to filter the lessons combo based on chapters combo in EXTjs 4. If chapters combo is selected then only lessons combo should show lessons, otherwise it should be empty.
And how to set the cmobo values selected when form data is loaded from server and populated in form fields.
Chapters store
var chapter_store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['chapter_id', 'chapter_name'],
proxy: {
type: 'ajax',
url: BASE_URL + 'courses/chapters/getChaptersCombo/' + course_id,
actionMethods: {
read: 'POST'
},
noCache: false,
reader: {
type: 'json',
root: 'results',
totalProperty: 'total'
}
},
storeId: 'chapter_id'
});
Lessons store
var lesson_store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['lesson_id',
//'chapter_name',
'lesson_name', 'lc_relation_id'
],
proxy: {
type: 'ajax',
url: BASE_URL + 'courses/lessons/getLessonsCombo/' + course_id,
actionMethods: {
read: 'POST'
},
noCache: false,
reader: {
type: 'json',
root: 'results',
totalProperty: 'total'
}
},
storeId: 'lesson_id'
});
Form with linked combos
var quiz_form = Ext.create('Ext.form.Panel', {
items: [{
xtype: 'combobox',
//readOnly:true,
id: 'test_chapter_combo',
name: 'test_chapter_combo',
//hiddenName: 'test_linkchapter_val',
displayField: 'chapter_name',
valueField: 'chapter_id',
fieldLabel: 'Select Chapter',
allowBlank: false,
blankText: 'Chapter is required',
triggerAction: 'all',
queryMode: 'remote',
store: chapter_store,
selectOnFocus: true,
listeners: {
select: {
fn: function (combo, value) {
var comboLesson = Ext.getCmp('test_lesson_combo');
comboLesson.clearValue();
lesson_store.load({
params: {
chapters_id: combo.getValue()
}
});
}
}
}
}, {
xtype: 'combobox',
//readOnly:true,
id: 'test_lesson_combo',
name: 'test_lesson_combo',
//hiddenName: 'test_linklesson_val',
displayField: 'lesson_name',
valueField: 'lc_relation_id',
mode: 'local',
fieldLabel: 'Link To Lesson',
allowBlank: false,
blankText: 'Lesson is required',
triggerAction: 'all',
store: edu_lesson_store,
queryMode: 'remote'
}]
});
Loading form data from server
quiz_form.getForm().load({
url: BASE_URL + 'courses/getCourseTest/' + quiz_id,
method: 'POST'
});
I dunno which server side technology are you using, but i'm sure you can get some inspiration/guidance following these 2 great links:
Extjs Cascading (Dependent) Combo Boxes
ExtJs 4 cascading ComboBox example using Java Servlet and MySQL
HTH!