i have some code that describes by column
cols.offer.push({
dataIndex: 'tags',
header : 'Тэги',
width:150,
editor : {
xtype : 'combo',
store : gridTagStore,
queryMode: 'local',
displayField: 'name',
//valueField: 'name',
multiSelect:true,
typeAhead: true,
editable:false,
triggerAction: 'all',
selectOnTab: true,
lazyRender: true,
listClass: 'x-combo-list-small',
listeners: {
focus: function(e) {
this.setValue(this.rawValue.split(', '));
}
}
}
});
so I want to select only two options in combobox.
and I want if I would select third - nothing will happen
thanks!
it works for me!
cols.offer.push({
dataIndex: 'show_at_index_as_tag_id',
header : 'Показывать на главной под тегом',
width:150,
editor : {
xtype : 'combo',
store : gridTagStore,
queryMode: 'local',
typeAhead: true,
displayField: 'name',
selectOnTab: true,
triggerAction: 'all',
lazyRender: true,
valueField: 'id',
multiSelect:true,
listClass: 'x-combo-list-small',
listeners: {
beforeselect : function(){
return (this.value.length == 1 && this.value[0] === "") || this.value.length == 0 ;
}
}
}
});
I decided to limit with only one option and to use multiselect because I have store with options that is being used in other places of application.
But I need to select empty value in this combo, so multiselection with one option select is the good solution
Add beforeselect listener to ComboBox. In the function define how many items already selected in ComboBox, if its count > 2 return false; to do nothing.
Related
I have 2 combos, I want to force to select the first combo (employer combo), after it's selected then the combo 2 (employee combo) is enable.
ExtJS 4.2.1
The code of the combos is:
{
xtype: 'combobox',
store: Ext.create('SoftHuman.store.catalog.Employer', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'EmployerId',
fieldLabel: 'Company',
name: 'EmployerId',
queryMode: 'local',
allowBlank: true
}, {
xtype: 'combobox',
anchor: '100%',
store: Ext.create('SoftHuman.store.employee.EmployeeCombo'),
displayField: 'FullName',
valueField: 'EmployeeId',
queryMode: 'remote',
fieldLabel: 'Employee',
editable: true,
hideTrigger: true,
queryParam: 'searchStr',
name: 'EmployeeId',
allowBlank: true,
listConfig: {
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function () {
return '<b>{EmployeeNumber}</b> / {FullName}';
}
}
},
Right now my remote combo employee combo send into the query param "searchStr" that is the string typed in the combo. I need to pass also the selection from combo 1 (employer combo).
How can I achieve this? Thanks.
use something like this.
Ext.ComponentQuery.query('EmployerId').value
Ext.getCmp('EmployerId').value
var empValue = getComponent('EmployerId').value
if .value not work then try getValue() method.
Hope this helps.
in your second component(EmployeeId) add configuration disabled:true on load.
then add afterrender listener to the first one. and then set the other combo available.
Then do this............................................................................
{
xtype: 'combobox',
store: Ext.create('SoftHuman.store.catalog.Employer', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'EmployerId',
fieldLabel: 'Company',
name: 'EmployerId',
queryMode: 'local',
allowBlank: true
listeners: { <---------------------here
select: function(combo, selection) {
if (combo.getValue() != undefined) {
Ext.ComponentQuery.query('EmployeeId').setDisabled(false)
} <----------------------------- to here
}, {
xtype: 'combobox',
anchor: '100%',
store: Ext.create('SoftHuman.store.employee.EmployeeCombo'),
displayField: 'FullName',
valueField: 'EmployeeId',
queryMode: 'remote',
fieldLabel: 'Employee',
editable: true,
disabled:true, <------------add this
hideTrigger: true,
queryParam: 'searchStr',
name: 'EmployeeId',
allowBlank: true,
listConfig: {
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function () {
return '<b>{EmployeeNumber}</b> / {FullName}';
}
}
},
Hope this helps :)
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 combo box and I want get id of first record from server by alert(combo.store.data[0].id); But it's not working
Here is my code
xtype: 'combo',
value: '0',
triggerAction: 'all',
forceSelection: true,
editable: false,
allowBlank: false,
fieldLabel: 'example',
mode: 'remote',
displayField:'name',
valueField: 'id',
store: Ext.create('Ext.data.Store', {
......
,listeners: {
'afterrender': function(combo){
alert(combo.store.data[0].id);
}
}
How can i do that thanks.
Probably you are missing something.
combo.store.getAt(0).data.id
Try this.
Inside combobox listeners "afterrender" :
var getState = combo.getState(), //get current combobox state
comboState = parseFloat(getState.value) - 1,
comboStore = combo.store;
comboStore.on("load", function(s,rs) {
comboStore.each(function(record, key) {
if( key == comboState){
//console.log(record);
alert(record.data.id);
}
});
});
{
fieldLabel: 'Tip',
name: 'SubjectType',
allowBlank: false,
xtype: 'combo',
displayField: 'name',
valueField: 'type',
typeAhead: true,
forceSelection: true,
queryMode: 'local',
store: subjectTypeStore,
listeners: {
select: function(a,selected,c){
//console.log(a);
var tets = selected[0].data.type;
console.log(tets);
//console.log(c);
}
}
},
{
name: 'SubjectID',
allowblank: false,
xtype: 'combo',
displayField: 'name',
valuefield: 'name',
typeAhead: true,
forceSelection: true,
queryMode: 'local'
}
What I want to do is to apply a combobox store to the second combobox according to the selected item in the first combobox. For example if you select Pokemons then the second combobox should load pokemonStore. You change your mind and you select Smurfs, then the second combobox loads the smurfsStore.
What I want to learn is how to apply the store to an existent combobox.
Here's a simple example JSFiddle
select: function(checkbox,records) {
comp.clearValue();
comp.bindStore(Ext.StoreMgr.lookup(records[0].data.store));
// you can change the value field if needed
comp.displayField = 'petname';
// you can change the display field if needed
comp.valueField = 'id';
// you can change the display template if needed
comp.displayTpl = new Ext.XTemplate(
'<tpl for=".">' +
'{[typeof values === "string" ? values : values["' + comp.displayField + '"]]}' +
'<tpl if="xindex < xcount">' + comp.delimiter + '</tpl>' +
'</tpl>'
);
comp.picker = null;
}
I have a make and a model combo box. The make combo loads info when the user selects a make. The problem is, it does not fire when the user tabs off the combobox. It does work when they press enter or they select an item from the list with the mouse. Here is what we have for the make combo:
new Ext.form.ComboBox({
id: 'ddlMake',
store: makeStore,
displayField: 'Description',
valueField: 'MakeOid',
width: 175,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a make',
selectOnFocus: true,
allowBlank: false,
listeners:
{
select: function(combo, record, index) {
LoadModelCombo(combo, record, index);
FillAircraftType();
}
}
Here is what I ended up using. I used both select and change:
new Ext.form.ComboBox({
id: 'ddlMake',
store: makeStore,
displayField: 'Description',
valueField: 'MakeOid',
width: 175,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a make',
selectOnFocus: true,
allowBlank: false,
listeners: {
select: function (combo, record, index) {
LoadModelCombo(combo, record, index);
FillAircraftType();
},
change: function (combo, record, index) {
LoadModelCombo(combo, record, index);
FillAircraftType();
}
}
}),
use forceSelection config property of combobox component this would allow you to achive what you want. for rest you can see the sencha documentation of this config