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);
}
}
}]
Related
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'm trying to make a quick search with a plugin, in my Extjs (4.2.5) application but, i don't wanna add the listener into the combo, i wanna make a plugin for having more cleaned my code, but I really don't have a real idea about how to add my listener into the init() function.
Ext.define("custom.FilterCustom", {
extend: "Ext.AbstractPlugin",
xtype: 'pluginCustom',
fieldName: '',
constructor: function() {
var me = this;
},
init: function() {
var me = this;
// Here is where i'm trying to add the listener, but nothing happens.
}
});
and by the way, i don't know if i'm forgetting some lines of code, it's my first time doing a plugin.
Here's the combobox:
Ext.create('Ext.form.ComboBox', {
renderTo: Ext.getBody(),
padding: 5,
fieldLabel: 'Choose State',
store: words,
queryMode: 'local',
enableKeyEvents: true,
displayField: 'name',
valueField: 'id',
plugins: [Ext.create('M5.view.custom.FilterCustom', {
fieldName: 'name'
})]
});
If anyone can help me with this, i'm gonna be very glad! .x
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 grid with cell editing plugin on it. When i click the cell i want to edit, sometimes the dropdown list of the combo box is behind the grid/window (I can not see it, but if i modify the window size i can see the combo box items behind it).
My code looks like this (I have a window which contains this form):
items: [{
xtype: 'form',
items: [
me.currentMultipleValuesGrid = Ext.create('Ext.grid.Panel', {
store: me.gridStoreToValidate,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
delay: 10
})],
listeners: {
validateedit: function (editor, cell, eOpts) {
//cell.cancel = true;
}
},
columns: [{
header: GTR(CLNAME(me), 'colSource.Text', 'Source'),
dataIndex: 'source',
flex: 1
}, {
dataIndex: 'name',
header: GTR(CLNAME(me), 'colLinkDestination.Text', 'Link destination'),
editor: {
xtype: 'combobox',
queryMode: 'local',
valueField: 'nr',
displayField: 'name',
store: me.comboBoxEditorStore,
listeners: {
change: function (thisCmb, newValue, oldValue) {
},
beforerender: function (thisCmb, eOpts) {
}
}
},
flex: 1
}, {
dataIndex: 'linkdestination',
hidden: true
}]
})]
}]
I think it is a layout problem, so I tried different layouts (anchor and fit) assigned to window, grid or form, with various combinations of them. No success so far. Any ideas? Thank you. I am using Extjs 4.0.7
I solved this a while ago. Came back to post the answer, in case someone needs it. It seems it is a Sencha bug, which causes the drop down list to be displayed behind the window, when the window is modal (like it was in my case). I managed to make a workaround, by assigning a css class to the drop down list of the combo, by adding this in combo settings :
listConfig: { cls: 'clsZIndexMax' }
where clsZIndexMax is my css class containing z-index: 100000 !important;
PS: I had this bug in version 4.0.7, don't know if they already solved it in future versions.
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!