i have a xtype "checkbox", i want change boxlabel by dynamic
{
xtype:'checkbox',
id: 'abc',
checked: false,
uncheckedValue: '0',
inputValue: 1,
boxLabel: 'change',
name:'abc'
}
i using
Ext.getCmp('abc').setBoxLabel('not working'); // it's not working
or
Ext.getCmp('abc').update('loss checkbox'); // it's working but checkbox's disappear.
How can i do that? thanks
In Ext JS 4.2+ use setBoxLabel()
In Ext JS 4.1+ I've just found this workaround can help:
Ext.getCmp('abc').getEl().down('label.x-form-cb-label').update('New Label')
getBoxLabel should be working (see this jsFiddle).
Maybe what you want to use is fieldLabel and setFieldLabel?
A cleaner approach (IMO)
For ExtJs 4.1.1 (this was officially added in later versions of the framework)
I found the override recommended by Condor https://www.sencha.com/forum/showthread.php?71968-Set-Checkbox-boxLabel-dynamically to be the best option because this works even if the checkbox is not rendered which is not the case in DrakES solution.
Ext.override(Ext.form.Checkbox, {
setBoxLabel: function(boxLabel){
this.boxLabel = boxLabel;
if(this.rendered){
//NOTICE I CHANGED THIS LINE FROM THE ONE IN THE ORIGINAL SENCHA FORUM
this.getEl().down('label.x-form-cb-label').update('New Label');
}
}
});
Now you can use .setBoxLabel() :)
Related
I just installed a copy of MODX Revolution 2.3.1-pl.
And everything is fine, but comboboxes are empty. I can see that combobox data comes with JSON/AJAX and JSON is correct. But anyway I cannot see a proper values on the combo box.
What's wrong with that?
First create the imaevents.combo.js file here modxcloud\assets\components\yourcomponentFolder\js\mgr\widgets and add this code in imaevents.combo.js:
Imaevents.combo.Event_status = function(config) {
config = config || {};
Ext.applyIf(config,{
store: new Ext.data.ArrayStore({
id: 0
,fields: ['event_status','display']
,data: [
['','Event Status']
,['Normal','Normal']
,['Closed','Closed']
,['Cancelled','Cancelled']
,['Full','Full']
,['Waiting list','Waiting list']
]
})
,mode: 'local'
,displayField: 'display'
,valueField: 'event_status'
});
Imaevents.combo.Event_status.superclass.constructor.call(this,config);
};
Ext.extend(Imaevents.combo.Event_status,MODx.combo.ComboBox);
Ext.reg('imaevents-combo-event_status',Imaevents.combo.Event_status);
Use this combo box by calling the xtype "imaevents-combo-event_status"
{
xtype: 'imaevents-combo-event_status'
,fieldLabel: _('imaevents.event_status')
,name: 'event_status'
,anchor: '100%'
}
Well, I found the problem is in unsupported experimental ES6 features (Chrome flag #enable-javascript-harmony) by the legacy ExtJS 3.X.
See also: Comboboxes are ed up in Chrome
I have an textfield in Sencha Touch 2 and a button. I would like to get the input of the textfield when button is pressed. I tried it with Ext.ComponentQuery, but it didn't work. Have someone an example how to do that?
{
xtype: 'textfield',
cls: 'inputfields',
id: 'title',
},
{
xtype: 'button',
ui: 'action',
name: 'textfieldButton',
handler : function(){
// what should go here ?
}
}
My way of doing it is Ext.getCmp('title').getValue();
Also please refer to the Docs (Docs API). They are really Helpful.
You could do:
var value = Ext.ComponentQuery.query('#title')[0].getValue();
// test by writing in console
console.log(value);
TIP 1: It's helpful to have API reference of Sencha open all the time when you use this framework (likewise for any other framework, programming language etc.). For speed, I suggest downloading it.
TIP 2: In Chrome Ctrl+Shift+I for developer tools; you can access console there.
Are there any color picker for extjs (such as photo shop color picker) that developed only on extjs (not in jQuery).
I’m using (Ext.ux.ColorPicker) ux.colorpicker but, it can’t fill my requirement.
Thanks,
Thanuja.
ExtJS has a simple colorpicker.
xtype: 'colorpicker'
From the help:
Ext.create('Ext.picker.Color', {
value: '993300', // initial selected color
renderTo: Ext.getBody(),
listeners: {
select: function(picker, selColor) {
alert(selColor);
}
}
});
You can also look at this one which is more Photoshop-esque and works with Ext JS 4x+, but does require canvas support.
I realize this is an old question. but nevertheless for people looking to have these two libraries play nice... here is what I did. The problem lay in that jscolor expects all the inputs with class "color" to be available on window.load, which is called via jscolor.install(). Of course, ExtJs elements are not available at that time. Try this:
Ext.create("Ext.form.field.Text",{
renderTo: Ext.getBody(),
fieldCls:"color",
name:"TestPost",
listeners: {
afterrender: {
delay:200,
fn:function(item){
jscolor.init();
}
}
}
});
Running jscolor.init() will start it all up. If you like, you can comment out the jscolor.install() call at the bottom of the jscolor.js file, so long as you call jscolor.init() as a listener that runs after the rendering of the textfield you want to be your color picker.
I am trying to remove the toolbar from Sencha Picker (I only need the scrolling area with the event 'pick') - but nothing seems to work. The problem is that we must copy the sencha docs code of Picker (WITH slotpicker code) and try to remove it from there. However - this doesn't work and removed the whole slot area.
Can anyone help?
Just set the toolbar invisible
toolbar: {
hidden: true
}
BTW why not just to do
doneButton: false,
cancelButton: false,
toolbar: {
ui: 'light',
title: 'My Picker!'
}
?
I have an Ext TabPanel, and I am trying to set the hidden property for one of the Tabs, programmatically. I am able to select the object and call methods such as disable() and enable() but so far have been unable to find a means by which I can manipulate the Tab's 'hidden' property.
The Tab is defined as
{
id: "view-task",
hidden: false,
title: "View"
}
and the code attempting to manipulate it
twin = ( Ext.getCmp('view-task'));
twin.disable();
The above call to disable works, so the component is being correctly selected but I do not know how to manipulate the hidden property.
Any assistance will be much appreciated.
N. Euzebe
Try this:
var tabs = Ext.createWidget('tabpanel', {
items: [{
itemId: 'home',
contentEl:'script',
title: 'Short Text',
closable: true
}]
});
tabs.child('#home').tab.hide();
You can find this code in examples on the API page
You haven't explained which version of ExtJS you're using. But in version 3.x you can do the following (I don't know, but it might also work in ExtJS 4.x):
var tabPanel = Ext.getCmp('myTabPanel');
var tabToHide = Ext.getCmp('myTab');
tabPanel.hideTabStripItem(tabToHide);
To show the tab again:
tabPanel.unhideTabStripItem(tabToHide);
Hope this helps you :)