I got a extjs 4 combobox within a form bound to a model. I am binding data from grid to combo using form.loadRecord(record). The combobox is showing the valueField coming from the model assigned to the form instead of the displayField. The store of the combobox is preloaded. How can I achieve that the combobox shows the displayValue loading a record in the form?
{xtype:'combobox',
fieldLabel: 'category',
name: 'categorySelId',
store: 'Categories',
queryMode: 'local',
displayField: 'label',
valueField: 'id',
anchor:'96%',
loadMask: true,
typeAhead: true,
forceselection: true,
valueNotFoundText: 'Nothing found'}
The store is already used in the grid to show the column category
{ header: 'Category', dataIndex: 'categorySelectedId', flex:5,
renderer: function(value,metaData,record) {
if(value) {
var Categories = Ext.getStore('Categories');
var catRecord = Categories.findRecord('id', value);
return catRecord ? catRecord.get('label'): record.get('categorySelected');
} else return "";
}
},
Thx for your help!
The problem was that I have not had configured the correct types in the model. Setting the right type in the model solved the problem. Thx sha for helping!
Related
I want to add a tooltip on a disabled combobox which should show all the list values of the combobox and also selected value should be in bold in the tooltip in EXTJS.
Can someone please help me with this
You did not leave a lot of information.
In modern you might want to listen to the painted event, in classic the render event and fill your tooltip.
Just be aware, that if you have a data-binding for the store, the data might not be available at the time.
Further if it is not filled with static data, you have to go for the load event of the store.
Here is an example for modern:
items: [{
xtype: 'combobox',
label: 'Choose State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
disabled: true,
store: [
{abbr: 'AL',name: 'Alabama'},
{abbr: 'AK',name: 'Alaska'},
{abbr: 'AZ',name: 'Arizona'}
],
listeners: {
painted: function() {
let tooltip = '';
data = Ext.Array.pluck(this.getStore().getData().items, 'data');
Ext.Array.each(data,function(set) {
tooltip += set.name + '<br>'
});
this.setTooltip(tooltip);
}
}
}]
I am looking to gray out the entire combo box when disabled. Using the "disabled" property disables the combo box but is there any option to gray out the entire combo box when disabled? Currently it is not grayed out, is the extjs form element overriding the disabled property in some way?
The code for my combo box is as shown below.
Ext.define('something....', {
controller: 'some Controller',
initComponent: function() {
var me,
me = this;
me.items = [{
xtype: 'form',
items: [{
xtype: 'combo',
itemId: 'nameId',
name:'nameId',
labelAlign: 'top',
fieldLabel: 'Name',
store: me._getNames(),
valueField:'dataId',
displayField: 'name.firstName',
editable: false,
disabled: someCondition?true:false
}]
}];
}
}
disabled: true works as you want. You can check it here: https://fiddle.sencha.com/#view/editor&fiddle/3cb0
Could you please review it?
I have a combo box in an ExtJS (5.1.2) grid panel that is a component in a dockedItems toolbar, defined as:
{
xtype: 'combo',
flex: 1,
width: 400,
itemId: 'labCode',
queryMode: 'local',
triggerAction: 'all',
forceSelection: true,
loading: true,
fieldLabel: 'Select lab type',
displayField: 'description',
fieldName: 'description',
valueField: 'code',
store: 'Labs',
listeners: {
change: function(combo, value) {
if (value) {
record = this.getSelectedRecord();
console.log(record.raw.units);
units = record.raw.units;
console.log(combo.up('grid').down('#labValue'))
combo.up('grid').down('#labValue').fieldLabel = units
}
}
}
}
I am trying to update the fieldLabel in another form component #labValue when I select an item from my dropdown. When I write the form component object to the console it is definitely giving the expected value, but on the form itself, the fieldLabel for the component #labValue is empty. How can I update the component #labValue with the new fieldLabel?
EDIT 1
I am trying to implement use of bindings as per the comment below, but am unsure of how to get the container widget given in the given fiddle into my dockedItems toolbar that is above my grid panel?
see fiddle in comment to your question. Should give you the answer.
I have a combobox and I want to create a new store instance of that combo.
I can see a store instance can be created by Ext.create('My.Store')
but this is not availabel in Extjs 2.3.0
I tried
var comb= new this.combobox1.store; // Gives error store is not a constructor
and
var comb= new this.combobox1.getStore(); // com is undefined here
Any ides.
I know this is a year late, but better late than never, since I came across it as unanswered, try this:
First create your store:
var myComboStore = Ext.create('Ext.data.Store', {
storeId:'myComboStore',
fields: ['name', 'value'],
data: [
{'name':'shelf1', 'value':'shelf1 val'},
{'name':'shelf2', 'value':'shelf2 val'},
{'name':'shelf3', 'value':'shelf3 val'},
{'name':'shelf4', 'value':'shelf4 val'}
]
});
Then in your combo config, assign the store. This panel (fp) is a simple form to hold the example combo.
var fp = {
xtype : 'form',
frame : true,
labelWidth : 110,
items:
{
xtype: 'combobox',
fieldLabel: 'My Combo',
displayField: 'name',
width: 320,
store: myComboStore, // ASSIGN STORE TO COMBO
queryMode: 'local',
typeAhead: true,
emptyText : '-none-',
listeners : {
//click events for item selection goes here
}
}
}
create a window for the panel to go in
new Ext.Window({
title : '',
layout : 'fit',
height : 180,
width : 320,
border : false,
items : fp
}).show();
Working Fiddle: https://fiddle.sencha.com/#fiddle/1cta
I am having trouble getting a ComboBox in ExtJS to display the dropdown items. I originally was using an XmlStore to load the data dynamically, but to make sure that wasn't the problem, I took an existing ComboBox that uses a simple ArrayStore (and currently works elsewhere in my application) to see if it would work, still with no luck.
When using Chrome's developer tools, when I click on the ComboBox element, I get ext-all-debug.js:41166 - Uncaught TypeError: Cannot call method 'getStyle' of undefined and nothing shows up for a dropdown.
Here is my code:
EventForm = Ext.extend(Ext.form.FormPanel, {
constructor: function(config) {
config = Ext.apply({
items: [
{
layout: 'column',
xtype: 'container',
items: [
{
layout: 'form',
xtype: 'container',
columnWidth: 0.5,
items: [
{
fieldLabel: 'My Combo Box'
name: 'mycombobox',
xtype: 'combo',
store: new Ext.data.ArrayStore({
fields: ['size'],
data: [
['50'],
['100'],
['150'],
['200']
]
}),
displayField: 'size',
valueField: 'size',
forceSelection: true,
editable: false,
triggerAction: 'all',
mode: 'local',
listWidth: 60,
width: 60
}
]
}, {
// another column here similar to above
}
]
}
]
}, config);
EventForm.superclass.constructor(config);
}
});
You are not calling the constructor of EventForm's superclass correctly. Change the last line of your constructor function to read:
EventForm.superclass.constructor.call(this, config);
Your data array must contain a list of objects, and the keys you provided by fields must be the keys your data refers to in those objects. The correct syntax for your data array could be:
data: [
{'size':'50'},
{'size':'100'},
{'size':'150'},
{'size':'200'}
]
(could be, because I have no chance right now to verify)