I want to create an application where the combo box should look like first image below. But when I use a list for the combo box it comes out looking like the second image. The list is not fully shown - it is getting cut. Please suggest me which property to use? The code is as below:
items: [{
xtype: 'combobox',
fieldLabel: 'Location',
displayField: 'name',
forceSelection: true,
pageSize: 10,
store: 'SalesOrderManager.store.LocationStore',
typeAhead: true,
valueField: 'id',
id: 'LocationComboBox'
}]
What it should look like:
What I'm getting instead:
The full code can be viewed in this Fiddle.
Are you talking about the picker width? I think you want:
matchFieldWidth: false,
listConfig: {
width: 250
}
Related
I'm trying to edit the Gridpanel with the combobox items.
When I try selecting a value to edit and click on the other cell the value field appears in the cell as seen in the image attached, I want to display the description of the items and keep the valueField hidden from appearing . How would I be able to show the description always and edit,update the panel. knowing that I can update the data with the id(valueField which is appearing in the second part of image) only.
please help. thanks in advance.
Small piece of that grid
{
header: 'Field Time Distrib',
xtype: 'gridcolumn',
dataIndex: 'feild_distributor',
flex: 1,
editor: {
xtype: 'combobox',
allowBlank: true,
displayField: "description",
valueField: "distribsrcid",
queryMode: 'local',
mapperId: 'getfeildDistrib',
lastQuery: '',
forceSelection: true,
listeners: {
expand: function () {
var call = this.up('timegrid[itemId=feilddTimeGrid]').getSeletion().selection.record.data.fieldname.trim();
this.store.clearFilter();
this.store.filter({
property: 'call',
value: call,
exactMatch: true
})
}
}
}
}
One solution I can suggest you , Use renderer function of column identify if it is number ,If number get the respective name from the store and return the name ... check my fiddle. check the fiddle for my example
I have ExtJs combo drop down list. I want to two-color(odd as red and even as green)row list when combo is span
Note: single row has multi(more than one line) lines
Is this possible with ExtJS 4.2? if yes how can i do that.
{ xtype: 'combobox',
id: 'mycbo',
itemId: 'mycbo',
fieldLabel: 'Name',
name: 'id',
tabIndex: 5,
allowBlank: false,
displayField: 'NAME',
forceSelection: true,
queryMode: 'local',
store: 'STORE',
valueField: 'ID'
},
You should use listConfig config to change behaviour of combobox picker. (For more information: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.ComboBox-cfg-listConfig)
In snippet below I'm setting class 'odd' and 'even' to each option in the combobox. Then I can style it with CSS.
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
listConfig: {
getInnerTpl: function(displayField) {
return '<tpl if="xindex%2==0"><div class="odd"></tpl><tpl if="xindex%2==1"><div class="even"></tpl> {' + displayField + '} </div>';
}
},
renderTo: Ext.getBody()
});
Take a look at the Custom Item Templates example here - http://docs.sencha.com/extjs/4.2.0/#!/example/form/combos.html and look at the source code and how the listConfig is used.
You should be able to use this approach for achieving custom styling of the list items that appear
I have an ExtJS 4.2.1 form with a combobox.
xtype: 'container',
width: 360,
items: [{
xtype: 'combobox',
fieldLabel: 'Shift Code',
name: 'ShiftCode',
store: Ext.create('SoftHuman.store.catalog.ShiftCode'),
blankText: ' ',
allowBlank: false,
displayField: 'Description',
valueField: 'ShiftCode'
}]
The combo when I click on the trigger icon It will get the data from the store and then show the items, as show in the following image.
What I want to do is to set a value and display value in the combo when I load my form and then if the user clicks to expand the combo the store will get the items remotly like it does right now.
This is because I have this form with 25 combos and I don't want to load all them be before I show the form and then assign each combo value because the user won't change all combos values, maybe he will just change 2 or 3, so it doesn't make sense to load them all initially but I want to show the display value in the combo from my record.
Any clue?
You can insert the default value in store and set it a value
combo.getStore().insert(0, { "valueField": 0, "DisplayField": "All Properties" }, true);
combo.setValue(0);
What you are missing is the
queryMode: 'remote':
From the sencha docs
In queryMode: 'remote', the ComboBox loads its Store dynamically based upon user interaction.
This is typically used for "autocomplete" type inputs, and after the user finishes typing, the Store is loaded.
A parameter containing the typed string is sent in the load request. The default parameter name for the input string is query, but this can be configured using the queryParam config.
In queryMode: 'remote', the Store may be configured with remoteFilter: true, and further filters may be programatically added to the Store which are then passed with every load request which allows the server to further refine the returned dataset.
You can also use queryDelay if you want too.
Here's an example I pulled from my code.
{
xtype: 'combo',
itemId: 'totalSearchCombo',
width: 200,
emptyText: 'Total Search',
typeAhead: true,
editable: true,
hideLabel: true,
hideTrigger: true,
store: 'dropDownList_s',
mode:'remote',
displayField: 'display_nm',
anchor: '100%',
matchFieldWidth: false,
listConfig:
{
width: 195,
loadingText: 'Searching...',
emptyText: 'No matching items found, or not enough characters entered.',
getInnerTpl: function () {
var tpl = '<div>{display_nm}</div>';
return tpl;
}
},
//pageSize: 15,
listeners: {
}
}
The solution was to set the following methods:
combo.setValue('here the value');
combo.setRawValue('here the value to display');
{
xtype: 'combobox',
itemId: 'categoryselect',
queryMode: 'local',
store: {
type: 'array',
fields: ['prod_cat']
},
displayField: 'prod_cat',
multiSelect: true,
displayTpl: new Ext.XTemplate(
'<p style="color:red;">Categories</p>'
)
}
This is (part) of the config for a combobox I'm using in a toolbar. I'm trying to have the combobox display some static text ('Categories') regardless of what records are selected. Works perfectly, except I'd like to add some styling (font coloring) to the displayed text. Right now, the text
<p style="color:red;">Categories</p>
is displaying in the combobox, and not Categories in red.
What have I overlooked? Thanks
displayTpl is for the value that will actually be rendered to the underlying field...so it's rendering what you're telling it to render :)
To accomplish what you're trying to do, I'd add a cls config to the combobox, and then style the text color via CSS, like so:
{
xtype: 'combobox',
itemId: 'categoryselect2',
queryMode: 'local',
fieldLabel: 'Correct',
store: {
type: 'array',
fields: ['prod_cat'],
data: [
['Cat1'],
['Cat2'],
['Cat3']
]
},
displayField: 'prod_cat',
multiSelect: true,
displayTpl: new Ext.XTemplate('Categories'),
cls: 'special'
}
.special input {color:red;} // css
Here's an example: https://fiddle.sencha.com/#fiddle/m0
xtype: 'combo',
mode: 'local',
value: '1',
allowBlank: false,
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Is This Your Territory?',
name: 'is_territory',
hiddenName: 'is_territory',
displayField: 'name',
valueField: 'id',
width: 230,
store: yesnoStore,
this is my code.why this is not showing in ie.
I've checked your code and it runs on IE. Are you defining your yesnoStore store? Or maybe it's just the extra coma at the end of your code: yesnoStore,, remove it.
Include a store inside your script and the combo works properly:
var yesnoStore = new Ext.data.ArrayStore({
fields: ['id', 'name'],
data : [['0','option_1'],['1','option_2'],['2','option_3'],['3','option_4']]
});
This example is working on IE, maybe the problem is in your store.
{
xtype: 'combo',
mode: 'local',
value:'1',
allowBlank: false,
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Is This Your Territory?',
name: 'is_territory',
hiddenName: 'is_territory',
displayField: 'name',
valueField: 'id',
width: 230,
store: yesnoStore
}
If you have pasted the full config, the error may come from the extra comma :
{
xtype: 'combo',
mode: 'local',
value: '1',
allowBlank: false,
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Is This Your Territory?',
name: 'is_territory',
hiddenName: 'is_territory',
displayField: 'name',
valueField: 'id',
width: 230,
store: yesnoStore, // < remove this comma
}
This will not work even if the syntax is correct. ExtJS 3.3.1 (confirmed) and below (assumption) have a bug with IE9. IE sets the height of the combo box to 0 upon loading of page.
I attempted the following changes with no success:
setting height to a fixed size within the config
creating custom CSS for the class of the combo box list and setting height
creating custom CSS for the ID of the HTML element that represents the list and setting height
The only solution I found so far:
Upgrade to ExtJS 3.4.0 or above. This will fix this bug and many others tied to IE9.
If you go to the sencha examples and see an example for combo box for 3.3.1 with IE9, it won't work. If you check examples for combo box in 3.4.0 it works with IE9.
Unfortunately for me this is not an option so I'll continue to look for another solution that does not involve upgrade.
Hope this helps.