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
Related
I am new to extJS. I have 2 comboboxes which is binded witha common data store.
Below is the store -
comboStore = new Ext.data.JsonStore({
url: 'Getvalues',
root: 'rows',
autoLoad: true,
fields: ['Type', 'TypeDetails']
});
Here Type is a string and TypeDetails is an array list having field Description. A single Type can have multiple Description.
My requirement is, I have to bind one combobox with Type and when ever I select a Type only Description of curresponding Type should be binded with combobox 2.
I have tried -
xtype: 'combo',
id: 'cmbType',
editable: true,
typeAhead: true,
allowBlank: false,
displayField: 'Type',
valueField: 'Type',
hiddenName: 'Type',
store: comboStore,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'Select Type'
, listeners: {
select: function (cmb, record, index) {
}
}
xtype: 'combo',
id: 'cmbDesc',
editable: true,
typeAhead: true,
allowBlank: false,
displayField: 'Description',
valueField: 'Description',
hiddenName: 'Description',
store: comboStore,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'Select Type first'
What should I do in combo1 select?
I am using extJS 3.4
You should use extraParams property of Proxy definition! Like below:
/**
* Model Definition
*/
Ext.define('comboModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Type', type: 'int'},
{name: 'TypeDetails', type: 'string'}
]
});
/**
* Model Definition
*/
Ext.define('descModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Description', type: 'int'},
{name: 'DescDetails', type: 'string'}
]
});
/**
* JsonStore Deifinition
*
* Here we will define a JsonStore which will interact server.
* The returning value type from server should be json!
* Also, do not forget to specify root and idProperty
*/
var comboStore = new Ext.data.JsonStore({
model : 'comboModel', // you should identify of your model
proxy: {
type: 'ajax',
url: '/path/to/your/server/url',
reader: {
type: 'json',
root: 'rows',
idProperty: 'ROOT_ID
}
}
});
var descriptionStore = new Ext.data.JsonStore({
model: 'descModel',
proxy: {
type: 'ajax',
url: '/path/to/your/server/url',
reader: {
type: 'json',
root: 'descriptions',
idProperty: 'DESC_ID'
}
}
});
xtype: 'combobox',
store: 'comboStore',
valueField: 'Type',
displayField: 'TypeDetails',
listeners: {
select: function(val) {
// here is the important part, we are sending the query string
// param by url, like /?desc=122332
descriptionStore.proxy.extraParams = {'desc': val.getValue()}
descriptionStore.load();
}
}
xtype: 'combobox',
store: 'descriptionStore',
valueField: 'Description',
displayField: 'DescDetails',
I have a normal Combobox in my view, and I want to load the store, but then I get an error in my Firebug:
TypeError: reader.read is not a function
result = reader.read(me.extractResponseData(response));
The part in my view:
{
xtype: 'combobox',
id:'newsletter_template',
fields: ['groupValue','groupText'],
name:'template',
editable:false,
valueField: 'groupValue',
displayField: 'groupText',
allowBlank: false,
fieldLabel: 'Template',
anchor: '100%',
emptyText: 'Choose Template',
store: Ext.create('Ext.data.ArrayStore', {
model: 'news',
controller: 'news',
proxy: {
type: 'ajax',
url: 'bin/news/ajax.php',
reader: {
type: 'json',
root: 'results'
},
extraParams:{
action:'getNewsTemplates'
}
},
callback: function(records, operation, success) {
// do something after the load finishes
},
autoLoad: false
})
}
Has anyone an idea? THANKS A LOT!!!
Try changing store: Ext.create('Ext.data.ArrayStore', {
to store: Ext.create('Ext.data.Store', {
The problem is that you are using an ArrayStore which is basically a regular store with an array reader already defined, then you are defining a json reader in it which doesn't make any sense.
I have a combobox in a form:
{
xtype: 'combobox',
fieldLabel: 'Jurisdictions',
name: 'jurisdiction_id',
id: 'ComboboxJurisdictions',
store: Ext.create('App.store.Jurisdictions'),
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
}
Data is:
1 => Administrator
2 => User
3 => Guest
Now, if I don't touch anything when editing a user, on my server for my combobox I get "Administrator" (displayField), but when I change something in combobox I get the "id" (valueField). I really just want "id" in both cases. I was reading about hiddenName? Is that the case?
If you need any more code, feel free to ask. :)
Thank you!
EDIT (more code)
1.) There is no default value.
Here is the whole view code:
Ext.define('App.view.Suits.Update', {
extend: 'Ext.window.Window',
title: 'Suits',
width: 250,
id: 'UpdateWindowSuits',
defaultType: 'textfield',
items: [{
xtype: 'UpdateFormSuits'
}],
buttons: [
{ text: 'Save', id: 'submitUpdateFormButtonSuits'},
{ text: 'Cancel', id: 'cancelUpdateFormButtonSuits'},
]
});
Ext.define('App.view.Suits.UpdateForm', {
extend: 'Ext.form.Panel',
alias: 'widget.UpdateFormSuits',
layout: 'form',
id: 'UpdateFormSuits',
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'Id',
name: 'id',
hidden: true
},{
fieldLabel: 'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Status',
name: 'status',
allowBlank: false
},{
xtype: 'combobox',
fieldLabel: 'Priority',
name: 'suit_priority_id',
id: 'ComboboxSuitPriorities',
store: Ext.create('App.store.SuitPriorities'),
editable: false,
displayField: 'name',
hiddenName: 'id',
valueField: 'id'
},{
xtype: 'combobox',
fieldLabel: 'Jurisdictions',
name: 'jurisdiction_id',
id: 'ComboboxJurisdictions',
store: Ext.create('App.store.Jurisdictions'),
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
}],
});
Here is the store:
Ext.define('App.store.SuitPriorities', {
extend: 'Ext.data.Store',
// Where is the Model.
model: 'App.model.SuitPriority',
// "id" of the Store.
storeId: 'SuitPriorities',
// Autoload all data on creation.
autoLoad: true,
// Number of records in one page (for pagination).
pagesize: 20,
// Proxy for CRUD.
proxy: {
// Type of request.
type: 'ajax',
// API for CRUD.
api: {
create : 'php/suitpriorities/update',
read : 'php/suitpriorities/read',
update : 'php/suitpriorities/update',
destroy : 'php/suitpriorities/delete'
},
// Type of methods.
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy : 'POST'
},
// Reader.
reader: {
// Which type will the reader read.
type: 'json',
// Root of the data.
root: 'suitpriorities',
rootProperty: 'data',
// One record.
record: 'SuitPriority',
// Message and success property.
successProperty: 'success',
messageProperty: 'message'
},
// Writer (when sending data).
writer: {
type: 'json',
writeAllFields: true,
root: 'data',
encode: true
},
});
As I sad, the store is getting all the data because it's already loaded when I press the combobox. It's a simple JSON with 'id' and 'name' properties.
EDIT2: I've tried this for my Jurisdictions because I wasn't getting the right data selected in combobox. This is inside my controller.
onJurisdictionComboRender: function(combobox, eOpts){
// Getting the selected row.
var record = this.grid.getSelectionModel().getSelection()[0];
// Selected jurisdiction.
var jurisdiction = record.data.jurisdiction_id;
// Select it in combobox.
combobox.select(jurisdiction);
}
That doesn't make sense... If you read out the combo the correct way, meaning let either the form doing the work or calling getSubmitValue() on your own the combo would always returning the valueField. hiddenName is used for other purposes. Please take a look at the console of this JSFiddle and recheck how you fetch the combo value.
Here's the working demo-code
// The data store containing the list of states
var roles = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data : [
{"id":1, "name":"Administrator"},
{"id":2, "name":"User"},
{"id":3, "name":"Guest"}
//...
]
});
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Role',
store: roles,
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
renderTo: Ext.getBody()
});
combo.on('select', function(cb){ console.log(cb.getSubmitValue()); })
+1 for everyone for helping but the problems was here:
In my store I've put autoLoad: false and inside my combobox I've put store.load() manually and it works perfectly.
Thank you all! :)
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
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'
}),