I have a combobox:
var cmbMarket = new Ext.form.ComboBox
({
id: 'cmbMarket',
fieldLabel: 'Market',
allowBlank: false,
store: config.marketStore,
queryMode: 'local',
displayField: 'marketName',
forceSelection: true,
valueField: 'id'
});
When user starts typing something in the combobox it correctly filters its contents so to help user to find what they are searching for.
Problem is that, when user leaves the combobox text blank, search does not reset!
In other words, assuming this list:
can
cat
coockies
...
salt
say
If user starts typing "c" and then leaves the combo blank, its contents are only words starting with "c", so:
can
cat
coockies
At start I though it was because of the "local" queryMode, making combo losing its data. Anyway if User writes "s" after that the list
salt
say
correctly appears, so data is still there!
Where is the problem?
What ExtJS version do you use?
I've made fiddle for you problem in Ext5.1 and Ext4.2 and it works correct.
Look https://fiddle.sencha.com/#fiddle/j6s
Ext.define('App.model.Business', {
requires: [ 'Ext.data.reader.Xml' ],
extend: 'Ext.data.Model',
fields: [{
name: 'Id',
type: 'string'
}, {
name: 'MarketName',
type: 'string'
}]
});
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
model: 'App.model.Business',
data : [
{MarketName: 'coo', Id: '1'},
{MarketName: 'caa', Id: '2'},
{MarketName: 'saul', Id: '3'},
{MarketName: 'sdsq', Id: '4'}
]
});
Ext.create('Ext.panel.Panel', {
title : 'XML Model Example',
layout : 'hbox',
items : [{
xtype: 'combo',
fieldLabel: 'Market',
allowBlank: false,
store: store,
queryMode: 'local',
displayField: 'MarketName',
forceSelection: true,
valueField: 'Id'
}],
renderTo: Ext.getBody()
});
}
});
Related
I got a combocox in editor grid. When entering values I have to validate so I used property forceSelection : true . But turning on force selection raise another problem as the combo value is blank when the combo box loss focus as below attached image.
Sample code:
var employeeType = [{
'typeid': 1,
'typename': 'Contractor'
}, {
'typeid': 1,
'typename': 'Regular'
}];
var employeeTypeStore = Ext.create('Ext.data.Store', {
fields: ['typeid', 'typename'],
data: employeeType
});
Ext.define('Employees', {
extend: 'Ext.data.Model',
fields: [{
name: 'emptype',
type: 'string'
}, {
name: 'name',
type: 'string'
},
]
});
var empStore = Ext.create('Ext.data.Store', {
model: 'Employees',
data: [{
'emptype': 'Regular',
'name': 'John Doe'
},{
'emptype': 'Regular',
'name': 'Ricky'
},{
'emptype': 'Regular',
'name': 'Mason'
}]
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: empStore,
width: 1000,
height: 500,
title: 'Employees',
columns: [{
text: 'Employee Type',
dataIndex: 'emptype',
editor: {
xtype: 'combobox',
queryMode: 'local',
store: employeeTypeStore,
displayField: 'typename',
valueField: 'typeid',
forceSelection : true
}
}, {
text: 'Employee Name',
dataIndex: 'name'
}],
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
}
});
If the value is false then I need to show the last correct value.
Its the Expected behavior.
Setting forceSelection: true will restrict the user to select the value which is present in the list only. So if you loose the focus without selecting any item it will gonna blank.
You can use typeAhead: true to populate and autoselect the remainder of the text being typed if it matches a known value.
In extJS Form for adding and editing data i want to add a field that will not send any kind of data, only display it to the user when he chooses an id from combobox.
Now everything works fine, it's just i'm playing with code, and want to learn new stuff.
I'm getting data from a table which has material as Primary key and description of that key.
this.brand = Ext.create('Ext.data.Store',
{
fields: ['material','description'],
autoLoad: true,
proxy:
{
type: 'ajax',
url: 'sku/load',
reader:
{
type: 'json',
root: 'data'
}
}
});
Now when i'm adding a new item to the table and choose from combobox
{
xtype: 'combobox',
fieldLabel: 'Material SKU',
name: 'mate_fk',
store: this.brand,
queryMode : 'local',
displayField: 'material',
valueField: 'material'
},
i want to have a field underneath it that will show the description of the material, but when i click save it will not send any data.
Something like this:
{
xtype: 'combobox',
fieldLabel: 'Material SKU',
name: 'mate_fk',
store: this.brand,
queryMode : 'local',
displayField: 'material',
valueField: 'material'
},
{
name: 'description',
fieldLabel: 'Material Description',
displayField: 'description',
}
for an example i have 3 items
Material Description
1 It's nice
2 It's beautiful
3 It's ugly
So when i chose 1 it will show:
1
It's nice
I tryed with the code above but it kinda failed. What do i have to put into field of description to make it work
One way to accomplish this would be to add a listener to the combo for the change event. And modify a displayfield below when that event fires.
Something similar to this (#comboDescrFld is the displayfield in this example):
listeners:{
change:function(me, newValue){
if(newValue){
var descr = me.getStore().findRecord('key', newValue).get('descr');
me.up('form').down('#comboDescrFld').setValue(descr);
}else{
me.up('form').down('#comboDescrFld').setValue('No Selection Made');
}
}
}
Here is a fiddle demonstrating the working code.
And the full source below:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel',{
width:400,
height:400,
renderTo:Ext.getBody(),
title:'Example Combo With Field Tied',
items:[{
xtype:'combo',
displayField:'key',
valueField:'key',
store:Ext.create('Ext.data.Store',{
fields:['key','descr'],
data:[{
'key':1,
'descr':'Hello World'
},{
'key':2,
'descr': 'Another Field'
},{
'key':3,
'descr':'Even More Stuff Here'
}]
}),
listeners:{
change:function(me, newValue){
if(newValue){
var descr = me.getStore().findRecord('key', newValue).get('descr');
console.log(descr);
me.up('form').down('#comboDescrFld').setValue(descr);
}else{
me.up('form').down('#comboDescrFld').setValue('No Selection Made');
}
}
}
},{
xtype:'displayfield',
value:'No Selection Made',
itemId:'comboDescrFld'
}]
});
}
});
I'm trying to learn a little bit about manipulating UI elements in forms. I have 2 graphical elements. I have a comboBox that has a list of arbitrary things and I have a very basic form panel.
what I'm trying to do is pass the contents of a clicked item in the combobox to the input box on the form.
Click on 'cat" in combobox then the form will say animal: cat ... I've been trying to add listeners and using the .on approaches to do this but I can't seem to get it. Any advice or hints would be much appreciated.
Ext.onReady(function () {
// The data store containing the list of cool stuffz
var animals = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data: [{
"id": 'cat',
"name": "mycat"
}, {
'id' : 'dog',
"name": "mydog"
}, {
'id' : 'sbBarGirls',
"name": "heartbreaking-man-eating-deathclaw"
}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
id: 'combo',
width: 600,
fieldLabel: 'Choose animal',
emptyText: 'dont select the last one',
store: animals,
queryMode: 'local',
displayField: 'name',
valueField: 'id',
renderTo: Ext.getBody()
});
});
//non related code here..
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
title: 'Animal sanctuary, one animal per location ',
width: 300,
bodyPadding: 10,
style: 'background-color: #Fdd;',
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'animal:',
name: 'myanimal'
}]
});
});
what i was trying to do was use the dom event mousedown on one of the comboselections trigger a listener but i couldn't seem to get it to work, my apologies if the event/listener tags are incorrect.
So you need describe id for the text field, e.g.:
{
id: 'wild_but_very_good_animal',
xtype: 'textfield',
fieldLabel: 'animal:',
name: 'myanimal'
}
And add listener for the combo:
Ext.create('Ext.form.ComboBox', {
id: 'combo',
width: 600,
fieldLabel: 'Choose animal',
emptyText: 'dont select the last one',
store: animals,
queryMode: 'local',
displayField: 'name',
valueField: 'id',
renderTo: Ext.getBody(),
listeners: {
'change': function(field, selectedValue) {
Ext.getCmp('wild_but_very_good_animal').setValue(selectedValue);
}
}
});
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 in my base class a combobox, where I only configure the "fields" property. Like this:
items: [
comboText = Ext.create('Ext.form.ComboBox', {
width: 150,
padding: '0 20 0 0',
displayField: 'label',
store: Ext.create('Ext.data.Store', {
fields: [
{type: 'string', name: 'label'},
{type: 'string', name: 'fieldName'}
]
})
}),
...]
How can I pass only the data property to this combo ?
I tried the code below but does not work:
comboTest.store.loadData(value);
where value contains an array like this:
[
{"label":"First name", "fieldName":"firstname"},
{"label":"Birth date", "fieldName":"birthdate"}
]
No errors, but the combobox opens nothing.
I got this to work using:
xtype:'combo',
fieldLabel:'Division',
name:'division',
valueField: 'division',
queryMode:'local',
store:['A','B','C'],
displayField:'division',
autoSelect:true,
forceSelection:true
I know this question is really old, but just in case anyone comes looking for an answer that works out of the box; for me this was it.
Try this config:
xtype:'combo',
fieldLabel:'Division',
name:'division',
queryMode:'local',
store:['A','B','C'],
displayField:'division',
autoSelect:true,
forceSelection:true
Another Alternative is listed right in the docs of the ComboBox:
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
valueField is mandatory for combobox. Try setting the valueField in your combobox.
It works:
{
name: 'sample',
xtype: 'combobox',
allowBlank: false,
emptyText: 'select ...',
queryMode: 'local',
itemId: 'sample',
id: 'sample',
displayField: 'name',
valueField: 'name',
forceSelection:true,
store: ['B','C', 'A'],
typeAhead: true
}
instead of using loadData();
comboTest.store.loadData(value);
use loadRawData();
comboTest.store.loadRawData(value);
If confusion try ths fiddle