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
Related
I am trying to create two combo boxes. The first one shows the country names and the second one shows provinces/states. The idea is to filter the second combo based the selection on first one and put the value of 'VisitingCountryProvince' as the default selection.
The problem with the below code is, it is not selecting the default value based on the first combo box. If I remove the bind filter, the second combo box shows the correct value of 'VisitingCountryProvince'.
Any idea?
{
xtype: 'fieldset',
title: 'Visiting Country',
layout: 'anchor',
anchor: '-10',
collapsible: false,
defaults: {
xtype: 'combo',
labelStyle: 'font-weight: bold;',
flex: 1,
anchor: '0',
editable: false,
forceSelection: true,
allowBlank: false,
emptyText: 'Select...',
queryMode: 'local',
},
items: [{
name: 'VisitingCountry',
fieldLabel: 'Main',
reference: 'visitingCountryFieldRef',
publishes: 'value',
store: {
type: 'arraydropdownstore'
},
valueField: 'value',
displayField: 'value'
}, {
name: 'VisitingCountryProvince',
fieldLabel: 'Sub',
store: {
type: 'array',
fields: ['value', 'countryName']
},
bind: {
filters: {
property: 'countryName',
value: '{visitingCountryFieldRef.value}'
}
},
valueField: 'value',
displayField: 'value'
}]
},
The closest answer to the issue I could find is in here, How to use combo "publishes" value & bindings to filter store on another combo
I just figured out that, I can do either filter or select a default value, not both. How do I filter and bind a default value from the filtered list?
You need to write your logic of filtering the values of second combo store in the "select" event handler of the first combo box.
{
name: 'VisitingCountry',
fieldLabel: 'Main',
reference: 'visitingCountryFieldRef',
publishes: 'value',
store: {
type: 'arraydropdownstore'
},
valueField: 'value',
displayField: 'value',
listeners:{
select:function(){
//Access the second[bound to second combobox]store and apply the
//filter, Also there are arguments for select event handler, for this
//Please refer docs.sencha.com for extjs version you are using.
}
}
}
I want to use a combobox which receives the preselected value from a data binding and also the possible options from a data binding of the same store.
The panel items configuration looks like this:
{
xtype: 'combobox',
name: 'language_default',
fieldLabel: 'Default Language',
multiSelect: false,
displayField: 'title',
valueField: 'language_id',
queryMode: 'local',
bind: {
value: '{database.language_default}',
store: '{database.languages}'
}
}
If I use this configuration, the store of the combobox is invalid and unuseable.
Is it possible to bind the selected option and also the available options of a combobox?
Upgrade to ExtJs 5.0.1 and you can use selection binding
{
xtype: 'combobox',
name: 'language_default',
fieldLabel: 'Default Language',
multiSelect: false,
displayField: 'title',
valueField: 'language_id',
queryMode: 'local',
bind: {
value: '{database.language_id}',
selection: '{database.language_default}',
store: '{database.languages}'
}
}
{
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
I have followed a previous example to create a combobox with 'multiple' columns however, when I go to select an item it doesn't make a selection. How do i enable selection of the items with a tpl?
{
xtype: 'combobox',
tpl: '<tpl for="."><div class="x-combo-list-item" >{ntID} {PictureURL}</div></tpl>',
editable: true,
//autoSelect: true,
triggerAction: 'all',
store: 'userInfos',
displayField: 'ntID',
valueField: 'ntID',
fieldLabel: 'Username',
itemId: 'username'
},
Your list item should be replaced with:
div class="x-boundlist-item"
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.