In extJs I need to disable one field until edit button is clicked.
xtype:'textfield',
fieldLabel: 'Address',
name:'streetAddress',
labelWidth: 48,
maxLength: 100,
cls: 'appAddresscls',
id: 'resume-applicantdetails-view-address',
allowBlank : false,
//readOnly:true,
skipValue:true
When loading I called
Ext.getCmp('resume-applicantdetails-view-address').getEl().dom.setAttribute('readOnly', true);
When editing
Ext.getCmp('resume-applicantdetails-view-address').getEl().dom.removeAttribute('readOnly');
But the field is always in edit mode. Actually I try this because, the disabled fields in IE appears in gray color.
xtype:'textfield',
fieldLabel: 'Address',
name:'streetAddress',
labelWidth: 48,
maxLength: 100,
cls: 'appAddresscls',
id: 'resume-applicantdetails-view-address',
allowBlank : false,
readOnly:false,
skipValue:true
When loading I called
Ext.getCmp('resume-applicantdetails-view-address').setReadOnly(true);
When editing
Ext.getCmp('resume-applicantdetails-view-address').setReadOnly(false);
You can keep disabled:true and add the following css in your page to make such fields appear normal as others:
.x-item-disabled .x-form-item-label,
.x-item-disabled .x-form-cb-label {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9;
}
Hope this helps.
Set the field to be disabled: true in config then in the edit button call function to renable.
Ext.getCmp('resume-applicantdetails-view-address').setDisabled(false);
To set disable:
Ext.get('resume-applicantdetails-view-address').set({disabled:'disabled'});
To remove disable:
Ext.get('resume-applicantdetails-view-address').set({disabled:''});
It helps to change the readOnly property on run time:
component.el.dom.readOnly = true;
Related
I'm trying to edit the Gridpanel with the combobox items.
When I try selecting a value to edit and click on the other cell the value field appears in the cell as seen in the image attached, I want to display the description of the items and keep the valueField hidden from appearing . How would I be able to show the description always and edit,update the panel. knowing that I can update the data with the id(valueField which is appearing in the second part of image) only.
please help. thanks in advance.
Small piece of that grid
{
header: 'Field Time Distrib',
xtype: 'gridcolumn',
dataIndex: 'feild_distributor',
flex: 1,
editor: {
xtype: 'combobox',
allowBlank: true,
displayField: "description",
valueField: "distribsrcid",
queryMode: 'local',
mapperId: 'getfeildDistrib',
lastQuery: '',
forceSelection: true,
listeners: {
expand: function () {
var call = this.up('timegrid[itemId=feilddTimeGrid]').getSeletion().selection.record.data.fieldname.trim();
this.store.clearFilter();
this.store.filter({
property: 'call',
value: call,
exactMatch: true
})
}
}
}
}
One solution I can suggest you , Use renderer function of column identify if it is number ,If number get the respective name from the store and return the name ... check my fiddle. check the fiddle for my example
In ExtJS 5, I wanna remove border of textfield and make it like this:
Of course it can be done by two labels, but it's not very clean. I tried following two ways on ExtJS5 official website, but it doesn't work:
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
// here 1
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
border: 0, // set border = 0 or false
hideBorders: true
}, {
// here 2
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
style: 'border: none;background-image:none;' // set style border none
}]
});
Results:
Anybody who have any idea? Thanks.
If you absolutely need to use the textfield xtype, you can remove the border by clearing the inputWrapCls config. Some Ext JS themes add a border to the div wrapping the input element (and any trigger buttons), so you may have to clear the triggerWrapCls config as well.
You will likely also want to modify the fieldStyle config to remove the input element's background:
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
// remove default styling for element wrapping the input element
inputWrapCls: '',
// remove default styling for div wrapping the input element and trigger button(s)
triggerWrapCls: '',
// remove the input element's background
fieldStyle: 'background:none'
}
Try with displayfiled in place of textfiled
for reference go through the link. http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.form.field.Display.html
In EXTJS, is there anyway we can add a fieldLabel inside a field? Something like an emptyText but should not disappear on editing the field.
As for as i understand you want to display some content inside field that can not be editable.
What you can do is display content just besides the text field
{
xtype: 'textfield',
fieldLabel:'<span>Scale <span class="help_text">your static content goes here</span></span>',
labelWidth: 170,
value: appName ,
name : "appName",
readOnly: true,
allowBlank: false
}
I have ExtJs text box. I want to view text box value as URL. but url view as pain text. I want to view url inside the text box. my text filed is below
MyTextField3Ui = Ext.extend(Ext.form.TextField, {
fieldLabel: 'Web Site',
anchor: '100%',
boxMaxWidth: 500,
readOnly: true,
id: 'website',
initComponent: function() {
MyTextField3Ui.superclass.initComponent.call(this);
}
});
I'm very new to ExtJs sorry for ask every small question. please help to me. Thankx
The best way is to define a widget from Ext.BoxComponent instead of Ext.form.TextField
and register some xtype like this.
Ext.reg('hreffield', "extended class name will go here");
and into extended class define a property
defaultAutoCreate : {tag: "div"/"text" whatever you like},
This will allow you to change.
usage will be
xtype: "hreffield",
id: "myid",
fieldLabel: "link",
width: 200,
tabIndex: 1,
value: "google.com"
I have a formPanel set up with a text field. When a button is pressed, I would like it to change the disabled property of the text field from true to false, allowing it to be editable. The problem is that I don't know how to make this stick. Here's the form code:
myApp.views.formContainer = new Ext.form.FormPanel({
id: 'inspectionForm',
layout: 'vbox',
width: '100%',
items: [{
xtype: 'textfield',
name: 'myText',
id: 'myText',
label: 'License Plate',
width: '90%'
},
{
xtype: 'button',
text: 'Submit',
height: 40,
ui: 'confirm-round',
handler: function()
{
Ext.get('myText').disabled = false;
}
}]
});
The thing about Ext.get('mytext'),disabled = false; is that it works. Checking it later shows that the disabled attribute is set to false. But you still can't edit it. Does anyone know how to do this?
By calling Ext.getCmp('mytext').disabled = false; you only change the initial config property. To actually modify the component use Ext.getCmp('mytext').enable(); and Ext.getCmp('mytext').disable();