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.
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 need spellcheck in an extjs textfield. A textarea doesn't work because I need it to only allow a user to enter a single line of input - no enter key. Any way to enable spellcheck for the textfield?
I found a way to get around the single line requirement and use a textarea, which by default uses spellcheck. To force the textarea to be a single line add this to your textarea:
xtype: 'textarea',
grow: true,
growMax: 32,
enableKeyEvents: true,
listeneters: {
keydown: 'disableNewLine'
}
And in your controller, add the function to disable the new line.
disableNewLine: function(textarea, e, eOpt) {
if(e.keyCode == 13) {
e.stopEvent();
}
}
This prevents the user from adding a new line to their input just like a textfield would, but utilizes spellcheck. Also, 32 is the default height of a textfield, so it looks the exact same. Just setting the height doesn't work, the default seems to override that.
You can add it after the component is rendered.
Also make sure the browser you are using supports spell check.
http://caniuse.com/#search=spellcheck
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
listeners: {
afterrender: function(cmp) {
cmp.getEl().set({
"spellcheck": 'true'
});
}
}
}
see api
inputAttrTpl: 'autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"'
It works fine under safari!
This override worked fine for me with ExtJS6 & Chrome:
Ext.define('Ext.overrides.form.field.Text',{
override: 'Ext.form.field.Base',
/**
* Ensure all text fields have spell check disabled
*/
inputAttrTpl: [
'spellcheck=false'
],
constructor: function () {
this.callParent(arguments);
}
});
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'm making an ExtJS Component, and I want it to use a QuickTips tooltip. If I make an element using DomHelper, I can set a tooltip, no sweat. If, however, I make a Component, like
new BoxComponent({
qtip: "This is a tip"
});
nothing happens. I've also tried naming the property "tooltip", but no luck. Is there a right way to do this? The hack I have in place now that works is
new BoxComponent({
qtip: "This is a tip",
listeners: {
rendered: function(c){
Ext.QuickTips.register({
target: c.getEl(),
text: c.qtip
}
}
});
I feel like that can't be right. I guess I could just extend Component to do that automatically, but it seems like a common enough case that I should be able to do it without poking under the hood like this.
In ExtJS 4.2.1, I am able to add a tip to a checkbox this way:
new Ext.form.field.Checkbox({
...
tip: 'This is a tip',
listeners: {
render: function(c) {
Ext.create('Ext.tip.ToolTip', {
target: c.getEl(),
html: c.tip
});
}
});
I think you're doing it absolutely right. I really don't see the need for QuickTips in arbitrary Components, particularly in Containers, since that might lead to multiple tooltips within the same Component.
It should work :
new BoxComponent({
tooltip: new Ext.ToolTip({
title: 'Example Tooltip title',
text: 'Example Tooltip text'
}),
listeners: {
rendered: function(c){
Ext.QuickTips.register({
target: c.getEl(),
text: c.qtip
}
}
});
Hrm. I took a look at how Ext.Button does it, with passing tooltip to the configuration calling setTooltip under the hood.
Untested, but I think your best bet is something like:
Ext.Component.prototype._onRender = Ext.Component.prototype.onRender;
Ext.override(Ext.Component, {
onRender: Ext.Component.prototype._onRender.createSequence(function(ct, position) {
// setTooltip code adapted from Ext.Button, looking at tooltip property
});
});
I think this is the best way in Extjs 4:
you should add an afterrender listener, then when yor componenten is already created you can add the tooltip, this way:
listeners : {
afterrender : function(obj) {
if (this.max != null && this.ave != null && this.min != null) {
obj.tip = Ext.create('Ext.tip.ToolTip', {
target : obj.getEl().getAttribute("id"),
trackMouse : true,
renderTo : document.body,
html : this.htmlTip,
title : this.title
});
}
}
}
I hope it helps.
Simplest way is to set 'data-qtip' attribute on the main element of the component:
{
xtype: 'box',
autoEl: {
'data-qtip': "Tooltip text"
}
}
Make sure to enable qtips on application startup:
Ext.tip.QuickTipManager.init();
I always use this way in ExtJs 3
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c,
text: 'Enter \'-1\' for a 1 time only'
});
}
}
This way works perfect! Try it! (Extjs 4.2)
var boxComponent = Ext.create('Ext.Component', {
id: 'id111',
html: '<img src="js/extjs/resources/cb-theme/images/shared/icon-question.png">',
width: 20,
height: 20,
margin: '0 0 0 10'
});
Ext.tip.QuickTipManager.init();
Ext.tip.QuickTipManager.register({
target: 'id111',
title: 'My Tooltip',
text: 'This tooltip was added in code',
width: 100,
dismissDelay: 10000 // Hide after 10 seconds hover
});
{
xtype: 'checkbox',
fieldLabel: 'Test Label',
name: 'data_field',
autoEl: {
tag: 'div',
'data-qtip': 'This is a tip'
}
}
{
xtype: 'checkbox',
tip: 'This is a tip',
listeners: {
render: function(c) {
Ext.create('Ext.tip.ToolTip', {
target: c.getEl(),
html: c.tip
});
}
}
}