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.
Related
I have a splibutton with a menu item. I want to make the width of the drop down equal to the split button width. Additionally I want to align the text in the center. How should I do it?
The width of the menu will be based on the width of the content inside. So if the width of the button will always be the same, you could set the width of the menu to that same value or you can get the width of the button and set it to the menu before rendering it.
As for centering the text, you have two options. Either via CSS, add a custom CLS to your menu and add the following CSS:
.yourCustomCls .x-menu-item-link {
text-align: center;
}
.yourCustomCls .x-menu-item-indent-no-separator {
margin-left: 0;
}
Or add the config plain: true to your menu and a style centering the text as in my example.
Example:
Ext.create('Ext.button.Split', {
renderTo: Ext.getBody(),
text: 'Commit Automatically',
menu: new Ext.menu.Menu({
plain: true,
style: 'text-align: center;',
items: [
{text: 'Commit On Trigger', handler: function(){ alert("Item 1 clicked"); }}
],
listeners: {
beforerender: function () {
this.setWidth(this.up('button').getWidth());
}
}
})
});
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.
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 created a form that displays values in plain displayfields.
There is an "edit" button next to the form and once clicked by the user, the displayfields should switch to being textfields and will, therefore, make the data editable.
This, I am guessing, would be achieved by having two identical forms, one editable and one not and one or the other would be visible, based on the user having clicked the button. Another way, perhaps, is to have the xtype dynamically selected upon clicking the button.
Can anybody point me towards a certain direction in order to do this? I am a complete newbie to ExtJS and only just started learning ExtJS4.
Thank you in advance.
M.
Start by rendering all fields as input fields with disabled:true. Then use this for the Edit button handler:
...
form.getForm().getFields().each(function(field) {
field.setDisabled( false); //use this to enable/disable
// field.setVisible( true); use this to show/hide
}, form );//to use form in scope if needed
Ext.getCmp('yourfieldid').setFieldStyle('{color:black; border:0; background-color:yourcolor; background-image:none; padding-left:0}');
Ext.getCmp('yourfieldid').setReadOnly(true);
You can toggle based on a property isEditable. Then when you click the button you change the property and just remove and add the form. It makes it cleaner if you are switching back and forth.
Ext.define('E.view.profile.information.Form', {
extend: 'Ext.form.Panel',
xtype: 'form',
title: 'Form',
layout: 'fit',
initComponent: function () {
this.items = this.buildItems();
this.callParent();
},
buildItems: function () {
return [this.buildInvestmentPhilosophy()];
},
buildInvestmentPhilosophy: function () {
var field = {
name: 'investmentPhilosophy',
xtype: 'displayfield',
editableType: 'textarea',
grow: true,
maxLength: 6000,
value: '---',
renderer: E.Format.textFormatter
};
this.toggleEditingForForm(field);
return field;
},
toggleEditingForForm: function (form) {
if (this.isEditable) {
Ext.Array.each(form, this.configureFieldForEditing, this);
}
},
configureFieldForEditing: function (field) {
if (field.editableType) {
field.xtype = field.editableType;
}
}
});
You can also try to have two items : a displayfield and a textfield with the same data source and you could hide/show the right item with your button handler.
You should not have any CSS problems
(If you did not have CSS problems I would enjoy to see you code)
I have textfield:
{
xtype: 'textfield',
fieldLabel: 'LBL_EMAIL',
anchor: '100%',
listeners: {
'render': function(p) {
// check certain conditions
this.hide()
}
},
},
"hide()" only hides textbox (without label) and I want hide whole row (textbox and label).
Any ideas?
I found a solution, I have to configure the FormLayout with:
trackLabels: true
Maciej's answer didn't work more me. Putting this in Ext's defaults did:
Ext.layout.FormLayout.prototype.trackLabels = true;
I had to do following to make it work.
{
xtype: 'textfield',
anchor: '100%',
listeners: {
'render': function(p) {
// hide label
Ext.getCmp('cluster_name').getEl().up('.x-form-item').setDisplayed(false);
}
},
},
Ext.getCmp('id of textfield').hide();
Use something like:
yourElement.container.up('div.x-form-item').hide();
In Sencha Architect (v4.3.0.108 and extJS v7.4.0.45), you can add a Render Event Binding and then inside this write:
component.hide();
This will hide the field and its label.
But thanks for your answers. They pointed me in the right direction.