Explain me important question, please!
I created a Label with list of options:
var labelCombo = Ext.create('Ext.form.Label', {
forId: 'hostT',
text: 'My Awesome Field',
margins: '0 20 0 20'
});
Now I need to change config options by event of other component:
xtype: 'button', text: 'Refresh', handler : function() {
//actions here
}
I tried to change config like so:
Ext.apply(labelCombo, {text: 'New text'})
But without success. Is there possibility to change config options by event?
Considering the you are trying to change the text value of the label..
if you specify "myLabel" as your label's itemId, then you could use
Ext.ComponentQuery.query('#myLabel')[0].setText("New text");
to update text of the label.
Related
I have simple textfield but with larger height then normal:
definition is:
{
xtype: 'textfield',
itemId: 'POL_OGIN',
fieldLabel: 'Login:',
allowBlank: false,
height: 60,
name: login',
},
and I have no idea how to position label text "Login:", just center it vertically. Could you suggest how to do it?
Refer below fiddle:
https://fiddle.sencha.com/#fiddle/2941&view/editor
As there was no cls/any other config readily available to change fieldLabel,so i added afterrender listener for field & changed fieldLabel's top.Also there is other approach as add cls to fieldLabel and assign margin-top there.Below is code:
listeners: {
afterrender: function (field) {
var height=field.getHeight()/2-10;//10 for label height
field.labelCell.dom.querySelector('label').style['margin-top'] = height.toString()+'px';
//-----OR----
//Added class below
//field.labelEl.addCls('loginTextFieldCls');
//In cls give margin-top
}
}
Check if it helps you or not.
I'm using ExtJS 3 and I need to enable/disable a specific text field when I select/de-select a checkbox, like in the example showed below:
{
fieldLabel: 'myCheckBox'
xtype: 'checkbox',
name: 'myCheckBox'
},{
fieldLabel: 'myTextField'
xtype: 'textfield',
name: 'myTextField',
disabled: true
}
As I understand it I have to use a listener in 'myCheckBox' like this:
listeners: {
change: function() {
}
}
But I don't know what parameters to pass to my function and how to target 'myTextField' and .enable() .disable() it. Can you please help me? Thank you very much.
Solution based on answers (thank you):
listeners: {
change: function(cb, checked) {
Ext.getCmp('myTextField').setDisabled(!checked);
}
}
and added the id tag to the textfield component like this:
id: 'myTextField'
If you are not sure what to pass as a parameter than Ext.getCmp() gives you the component. It takes id of the component as a parameter. In your case you have to assign id to textfield and can get it on change event as Ext.getCmp('myTextField'). Where myTextField is an id of textfield. Name and Id of a component can be same.
listeners: {
change: function() {
Ext.getCmp('myTextField').disable();
//or
Ext.getCmp('myTextField').enable();
}
}
There are a few ways to reference myTextField. The easiest is probably to give the field a ref (note that this approach does not work in ExtJS 4, where you are better off with a component query):
{
fieldLabel: 'myTextField'
xtype: 'textfield',
name: 'myTextField',
ref: '../myTextField'
disabled: true
}
Setting the ref will cause the textfield component to be referenced in a property of its owner or one of its ancestors. So then your listener can simply be something like this (the parameters passed to this function are listed in the doc):
change: function(cb, checked) {
me.myTextField.setDisabled(!checked);
}
You might need to tweak the ref path depending on your component hierarchy.
Example:
Using setDisabled API:
theStudentForm.findField('stud_name').setDisabled(true);
Using setOpacity API:
theStudentForm.findField('stud_name').labelEl.setOpacity(1);
Using readOnly API:
theStudentForm.findField('stud_name').setReadOnly(true);
How can I remove the icon in this actioncolumn item within its handler?
{
header: 'Activate',
xtype: 'actioncolumn',
align: 'center',
width: 30,
sortable: false,
items: [{
icon: './Scripts/extjs/examples/shared/icons/fam/accept.png',
tooltip: '',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
if (rec.get('status') == '1') { // if active, don't show icon
this.up('actioncolumn').icon = '';
}
}
...
In general, it can't - configs are applied at initialization time, and sadly the ExtJS API doesn't always provide ways to change things as easily as they are specified in configs.
In the case of an ActionColumn, you can see in the source that the icon is used to generate a renderer function in the constructor and there's no way to set it afterwards.
To dynamically decide whether to show an icon or not, you'll need to use iconCls instead, see here.
I have a combo box which populates its values based on the selection of another combobox.
I have seen examples where the params in the underlying store are changed based on the selection, but what I want to achieve is to change the store itself of the second combo based on the selection on the first combo. This is my code, but it doesn't work. Can someone please help?
{
xtype: 'combo',
id: 'leads_filter_by',
width: 100,
mode: 'local',
store: ['Status','Source'],
//typeAhead: true,
triggerAction: 'all',
selectOnFocus:true,
typeAhead: false,
editable: false,
value:'Status',
listeners:{
'select': function(combo,value,index){
var filter_to_select = Ext.getCmp('cmbLeadsFilter');
var container = filter_to_select.container;
if (index == 0){
filter_to_select.store=leadStatusStore;
filter_to_select.displayField='leadStatusName';
filter_to_select.valueField='leadStatusId';
} else if(index==1) {
filter_to_select.store=leadSourceStore;
filter_to_select.displayField='leadSourceName';
filter_to_select.valueField='leadSourceId';
}
}
}
},
{
xtype: 'combo',
id: 'cmbLeadsFilter',
width:100,
store: leadStatusStore,
displayField: 'leadStatusName',
valueField: 'leadStatusId',
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
typeAhead: false,
editable: false
},
That is not how its designed to work!! When you set a store in the config, you are binding a store to the combo. You don't change the store, instead you are supposed to change the data when required.
The right way of doing it would be to load the store with correct data from the server. To fetch data, you can pass params that will help the server side code get the set of options you need to load.
You will not want to change the store being used... Simply put, the store is bound to the control as it is instantiated. You can, however, change the URL, and params/baseParams used in any additional POST requests.
Using these params, you can code your service to return different sets of data in your combo box's store.
For the proposed problem you can try below solution :
Use below "listener" snippet for the first "leads_filter_by" combo. It will handle the dynamic store binding / changing for the second combobox.
listeners:{
'select': function(combo,value,index){
var filter_to_select = Ext.getCmp('cmbLeadsFilter');
var container = filter_to_select.container;
if (index == 0){
//filter_to_select.store=leadStatusStore;
filter_to_select.bindStore(leadStatusStore);
filter_to_select.displayField='leadStatusName';
filter_to_select.valueField='leadStatusId';
} else if(index==1) {
//filter_to_select.store=leadSourceStore;
filter_to_select.bindStore(leadSourceStore);
filter_to_select.displayField='leadSourceName';
filter_to_select.valueField='leadSourceId';
}
}
}
Hope this solution will help you.
Thanks & Regards.
I had a similar problem. The second combobox would load the store and display the values, but when I would select a value, it would not actually select. I would click the list item and the combobox value would remain blank.
My research also suggested that it was not recommended to change the store and field mappings on a combobox after initialization so here was my solution:
Create a container in the view that would hold the combobox to give me a reference point to add it back later
Grab a copy of the initial config off of the combobox ( this lets me set my config declaritively in the view and not hard code it into my replace function ... in case I want to add other config properties later)
Apply new store, valueField and displayField to that config
Destroy old combobox
Create new combobox with modified config
Using my reference from step 1, add the new combobox
view:
items: [{
xtype: 'combobox',
name: 'type',
allowBlank: false,
listeners: [{change: 'onTypeCombo'}],
reference: 'typeCombo'
}, { // see controller onTypeCombo for reason this container is necessary.
xtype: 'container',
reference: 'valueComboContainer',
items: [{
xtype: 'combobox',
name: 'value',
allowBlank: false,
forceSelection: true,
reference: 'valueCombo'
}]
}, {
xtype: 'button',
text: 'X',
tooltip: 'Remove this filter',
handler: 'onDeleteButton'
}]
controller:
replaceValueComboBox: function() {
var me = this;
var typeComboSelection = me.lookupReference('typeCombo').selection;
var valueStore = Ext.getStore(typeComboSelection.get('valueStore'));
var config = me.lookupReference('valueCombo').getInitialConfig();
/* These are things that get added along the way that we may also want to purge, but no problems now:
delete config.$initParent;
delete config.childEls;
delete config.publishes;
delete config.triggers;
delete config.twoWayBindable;
*/
config.store = valueStore;
config.valueField = typeComboSelection.get('valueField');
config.displayField = typeComboSelection.get('displayField');
me.lookupReference('valueCombo').destroy();
var vc = Ext.create('Ext.form.field.ComboBox', config);
me.lookupReference('valueComboContainer').add(vc);
},
I have a combobox inside of a ext.panel, inside of an ext.window. When I click the down arrow to show the possible SELECT options, the options pop up at the top-left of the browser window, instead of below the SELECT box. The funny thing is if I attach the drugDetailsPanel (see code below) to a div on the page (instead of inside an ext.window), the combobox works correctly. This also happens when I change ext.panel to ext.form.formpanel, by the way.
Any ideas?
My code:
drugDetailsPanel = new Ext.Panel({
layout:'form',
id:'drug-details-panel',
region:'center',
title:'Drug Details',
height:200,
collapsed:false,
collapsible:false,
items:[
new Ext.form.ComboBox({
fieldLabel:'What is the status of this drug?',
typeAhead:false,
store:drugStatusStore,
displayField:'lookup',
mode:'remote',
triggerAction:'all',
editable:false,
allowBlank:false,
emptyText:'Select a status..',
name:'/drug/drug-status',
id:'drug-status'
})
]
});
newDrugWindow = new Ext.Window({
title: 'Add Drug',
closable:true,
width:650,
height:650,
//border:false,
plain:true,
layout: 'border',
items: [drugDetailsPanel],
closeAction:'hide',
modal:true,
buttons: [
{
text:'Close',
disabled:false,
handler: function(){
newDrugWindow.hide();
}
},
{
text:'Save Drug',
handler: function(){
newDrugDialog.hide();
}
}]
});
Try to add shim: true to combo-box control.
Older versions of Ext had issues like this in certain browsers (FF 2.x) in certain situations dealing with nested positioning, the specifics of which escape me now. If that's the case, search the Ext forums for more info. If not, then I'm not sure...
This forum thread helped me: http://www.sencha.com/forum/showthread.php?177677-IE-displays-combobox-dropdown-in-the-top-left-corner-of-browser-window
Just give the combobox a (unique) name. Giving the combobox an inputId should also help
Seems like IE does not respect the position of the element if it does not have an explicit name/inputId. This thread goes more deeply into it: http://www.sencha.com/forum/showthread.php?154412-Combo-Box-options-appears-in-Top-Left-Corner-in-IE-9