I need to populate combobox with JSON data. This is my store:
Ext.define('Test.store.GetShopSurvey', {
extend: 'Ext.data.Store',
alias: 'store.GetShopSurvey',
model: 'Test.model.GetShopSurvey',
storeId: 'GetShopSurvey',
proxy: {
type: 'ajax',
url: 'http://localhost/webcontent/CShopSurveyWebApplet&SubFunc=GetShopSurvey',
reader: {
type: 'json',
}
}
});
And my view:
Ext.define('Test.view.main.Announcement',
{
extend: 'Ext.panel.Panel',
requires: [
'Test.view.main.AnnouncementController',
'Test.view.main.AnnouncementModel',
'Test.store.Personnel'
],
store: {
type: 'GetShopSurvey'
},
And one of the items is:
{
xtype: 'combo',
fieldLabel: 'Range',
name: 'Range1',
store: , //here I need store to load. For example json value is {"range": 70}
displayField: 'range',
autoSelect: true,
forceSelection: true,
disabled: true
},
I added fields to model with name and type of data. However, I don't know how to get data from JSON and parse it in combobox. I commented place where I need to put that value btw.
Have you tried :
{
xtype: 'combo',
fieldLabel: 'Range',
name: 'Range1',
store: 'GetShopSurvey',
queryMode: 'local',
displayField: 'range',
valueField: 'range',
autoSelect: true,
forceSelection: true,
disabled: true
}
If this doesn't work can you give me more information like toolkit and extjs version please
You should create an store instance and then use it.Moreover, set its autoLoad config to true value.
try loadRawData method
var jsonData = {'range':500};
combo.getStore().loadRawData(jsonData);
Related
I have a 2 DropDownBoxes, where 1 of the drop box value is depanded on the selected value of the first.
How do i create a dynamic store in the second DropDownBoxes.
This is the code:
{
xtype: 'combobox',
displayField: 'vendor_name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Choose vendor...',
selectOnFocus:true,
fieldLabel: 'Vendor Name',
margin: 10,
id: 'txtBidVendor',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'vendor_name'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendors.jsp',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
{
xtype: 'combobox',
displayField: 'rate_desc',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Choose Quality...',
selectOnFocus:true,
fieldLabel: 'Vendor Quality',
margin: 10,
id: 'txtBidVendorQuality',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'rate_desc'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendorQuality.jsp?' + Ext.urlEncode({'bid_vendor': Ext.getCmp('txtBidVendor').value}),
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
I get the error: "Cannot read property 'value' of undefined " ,in the line where i try getting "Ext.getCmp('txtBidVendor').value"
About what you are trying to accomplish here I have two considerations:
The error here is that you are trying to access to the txtBidVendor component at definition time (it doesn't exists), when you send a configuration object (like these two comboboxes here) you are not actually creating them, but just setting the initial configuration that will be used by its parent for later instantiation.
What I think you are trying to do is to change the query parameter value for the store, when the selection changes on txtBidVendor combobox. To accomplish that, you must listen for the selection event of the first combobox and then modify and reload the store of the second one. Something like this:
{
xtype: 'combobox',
displayField: 'vendor_name',>
emptyText: 'Choose vendor...',
selectOnFocus: true,
fieldLabel: 'Vendor Name',
id: 'txtBidVendor',
store: vendorStore,
listeners: {
select: function (combo, records, eOpts) {
var record = records[0]; // just want the first selected item
rateStore.getProxy().extraParams.bid_vendor = record.get('vendor_name');
alert('Store will load now with bid_vendor =' + record.get('vendor_name'));
rateStore.load();
}
}
}
For sake of readability it will be good idea to take store definition out of the components definition itself also. Here you can find a working sample of it.
Hope it helps.
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
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! :)
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've a set of 2 combo boxes. One is countries combo and another is states combo. By default the states combo store is empty when I select a country then based on the combo value field States combo has to be filtered/load according to the first combo. In Extjs2.0 this is working whats the changes in Extjs4.
country store
var country_store = Ext.create('Ext.data.Store', {
//autoLoad: true,
fields: ['id','c_id','c_name'],
proxy: {
type: 'ajax',
url: 'country_list.php',
reader: {
type:'json',
root: 'results'
}
},
storeId: 'edu_context_store'
});
State store
var state_name = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['id','s_id','s_name','parent_country_id'],
proxy: {
type: 'ajax',
url: 'states_list.php',
reader: {
type:'json',
root: 'results'
}
},
storeId: 'state_name'
});
Combo boxes
{
xtype: 'combo',
id: 'country_combo',
hiddenName: 'country_name',
displayField: 'c_name',
valueField: 'c_id',
fieldLabel: 'Country',
queryMode: 'remote',
allowBlank: false,
triggerAction: 'all',
store: country_store,
width: 450,
selectOnFocus: true,
listeners:{
scope: this,
'select': function(combo, rec, idx){
var country_val = combo.getRawValue();
var states_obj = Ext.getCmp('states_combo');
states_obj.clearValue();
//states_obj.store.load();
states_obj.store.filter('parent_country_id', country_val);
}
}
}, {
xtype: 'combo',
id: 'states_combo',
hiddenName:'state_name',
displayField:'s_name',
valueField:'s_id',
queryMode: 'remote',
fieldLabel: 'State',
cls: 'textlineht',
allowBlank: false,
triggerAction: 'all',
store: states_store,
width: 450
}
Anyone knows how to do that ?
Thanks !
combo.getRawValue() will return the value displayed to the user in the combo - not the underlying id value. Try instead combo.getValue().