How to set DisplayField and ValueFiled of combobox with store response like ex: [1,2,3,4,5]
Ext.create('Ext.form.ComboBox', {
id: 'combo',
width: 400,
fieldLabel: 'distinct value',
emptyText: 'select',
store: '',
displayField: 'name',
valueField: 'id',
renderTo:"viewFilter" ,
triggerAction: 'all',
editable: false,
pageSize:10,
});
store code
var store = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'Model',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'dynamicAjax.exc?action=getDistinctValues',
simpleSortMode: true
}
});
I am going to do lazy loading on combo box ,If you have any alternate solution just drive me.
As far as I know, a store cannot work with a response of [1,2,3,4,5] out of the box.
You will have to convert the response to objects in the model. When you do that, you can set the field name to text, so you don't have to define the displayField.
I have made a working fiddle for you here:
https://fiddle.sencha.com/#view/editor&fiddle/22k4
Related
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);
I have an extjs combobox whose queryMode is set to remote.
I also want the typeAhead feature in it. But typeahead doenst work in this case.
The store reloads to the original data even after typing some text in the combobox.
Here is my code:
var queryStore = Ext.create('Ext.data.Store', {
//autoLoad: true,
model: 'UserQuery',
proxy: {
type: 'ajax',
url: 'queryBuilder_getQueryList',
extraParams: {
tableId: this.title
},
reader: {
type: 'json'
}
},
listeners: {
load: function () {
var combo = Ext.getCmp('cmbQueryList');
var lst = this.last();
if (lst)combo.setValue(lst.data);
}
}
});
var queryCombo = new Ext.form.ComboBox({
width: 200,
id: 'cmbQueryList',
store: queryStore,
valueField: 'queryID',
displayField: 'queryName',
typeAhead: true,
forceSelection: true,
emptyText: 'Select Query...',
queryMode: 'remote',
triggerAction: 'query',
selectOnFocus: true,
allowBlank: false,
editable: true
});
Please suggest how do I get typeAhead and querymode remote to work together.
this code corking for me .I guess your store property autoload is true so when you going to select the combobox its going to server and reload the data. please remove the property of store auto load true. Then its working.
new Ext.form.ComboBox({
fieldLabel:'Apps',
displayField: 'name',
valueField: 'id',
typeAhead: true,
listWidth : 345,
store: myStore(),
forceSelection: true,
triggerAction: 'all',
mode:'remote',
maxLength: 50,
editable: false,
anchor : '90%',
selectOnFocus:true
}),
This following code worked at me. We have to specific the both mode and queryMode to local.
var queryCombo = new Ext.form.ComboBox({
width: 200,
id: 'cmbQueryList',
store: queryStore,
valueField: 'queryID',
displayField: 'queryName',
emptyText: 'Select Query...',
queryMode: 'local',
mode: 'local'
});
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! :)
I have a combo box with a store getting data from a server via remote. My problem is that my pagination does not work. Here is a snippet of my code:
Ext.define('EmployeeModel', {
extend: 'Ext.data.Model',
fields: [
{name:'id', type:'int'},
{name:'fullname', type:'string'}
]
});
// remote store
var employeeStore= new Ext.data.Store(
{
model: 'EmployeeModel',
pageSize: 10,
proxy: {
url: '/schedule/home/EmployeeList',
params: {
'active_id': params
},
type: 'ajax',
autoLoad: true,
reader:
{
root: 'data',
totalProperty: 'total',
id: 'id',
type: 'json'
},
simpleSortMode: true
}
});
this.employeeBox = new Ext.form.ComboBox(
{
store: employeeStore,
displayField: 'fullname',
valueField: 'id',
typeAhead: false,
loadingText: 'Searching...',
triggerAction: 'all',
hiddenName: 'employee',
name: 'Employee Name',
fieldLabel: 'Employee',
selectOnFocus: true,
allowBlank: false,
anchor: '98%',
width: 370,
enableKeyEvents: true,
pageSize: true,
minListWidth: 220,
minChars: 2,
labelWidth: this.labelWidth,
resizable: false
});
I dont know what is lacking but as far as i have searched through the internet I copied and tested everything, still it does not work.
If you have remote store, paging also should be remote. pageSize is only parameter which is send to server, where you should handle paging. Beside pageSize you will also see parameters like start and limit.
You can see example here: http://docs.sencha.com/ext-js/4-1/#!/example/form/forum-search.html
Check out requests in firebug or something similiar, you will see url like this: http://www.sencha.com/forum/topics-remote.php?_dc=1354611968514&query=form&page=2&start=10&limit=10&callback=Ext.data.JsonP.callback3
If you want to have paging on client side, you can create local store and preload data via custom AJAX request.
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().