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
}
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
I need to add a little blip about an update to a form and I'm making it unnecessarily hard on myself. How do I add a text field that simply says Notice: XYZ underneath the Transfer date field? Is it a certain xtype I need to implement?
There are many possible way to add textfield/ displayfield in your form. Get hold of form and then add the textfield. Or simply add the textfield in form panel.
I created a fiddler for you in that I am adding next to 'Transfer Date' by this way.
{
xtype :'textfield',
name: 'last',
editable :false,
allowBlank: false,
fieldLabel: 'Notice',
value: 'xyz'
}
Since you asked for textfield so we can do like that and make editable :false, but the easier option is to achieve this is
{
xtype: 'displayfield',
fieldLabel: 'Notice',
value: 'xyz'
}
Both type of solution is available in fiddler. Have a look and choose as per your choice. Fiddle
Add in your form object
formPanel.add({
xtype: 'displayfield',
fieldLabel: 'Notice',
value: 'xyz'
})
try adding a new component of xtype: label to your form panel.
for example:
formPanel.add({
xtype: 'label',
text: 'Notice: XYZ'
});
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"
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;
I need to implement validation messages that appear right next to invalid field. Any help would be appreciated.
msgTarget: 'side' will Add an error icon to the right of the field, displaying the message in a popup on hover only.
if you read the documentation carefully, one more option is there for msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget
[element id] Add the error message directly to the innerHTML of the specified element.
you have to add a "td" to the right side of the control dynamically with the id. then if you specify msgTarget: 'element id' it will work.
The msgTarget: 'elementId' can work, but it seem very limited, particularly when you want multiple instances of one reusable ExtJs component (and therefor multiple instances of the same msgTarget element). For example I have an MDI style editor where you can open multiple editors of one type in a tab interface. It also doesn't seem to work with itemId or recognize DOM/container hierarchy.
I therefor prefer to turn off the default handling if I don't want exactly one of the built in message display options by setting msgTarget: none and then performing my own message display by handling the fielderrorchange event which is designed for exactly this scenario. In this case I can now respect hierarchy of my forms even with multiple instances of the same editor form as I can select the error display element relative to the editor.
Here's how I do it:
{
xtype: 'fieldcontainer',
fieldLabel: 'My Field Label',
layout: 'hbox', // this will be container with 2 elements: the editor & the error
items: [{
xtype: 'numberfield',
itemId: 'myDataFieldName',
name: 'myDataFieldName',
width: 150,
msgTarget: 'none', // don't use the default built in error message display
validator: function (value) {
return 'This is my custom validation message. All real validation logic removed for example clarity.';
}
}, {
xtype: 'label',
itemId: 'errorBox', // This ID lets me find the display element relative to the editor above
cls: 'errorBox' // This class lets me customize the appearance of the error element in CSS
}],
listeners: {
'fielderrorchange': function (container, field, error, eOpts) {
var errUI = container.down('#errorBox');
if (error) {
// show error element, don't esape any HTML formatting provided
errUI.setText(error, false);
errUI.show();
} else {
// hide error element
errUI.hide();
}
}
}
}
See the msgTarget config of the control. msgTarget: 'side' would put the validation message to the right of the control.
Use msgTarget 'side' for validation in right side and msgTarget 'under' for bottom
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
allowBlank: false,
name: 'name',
msgTarget: 'side',
blankText: 'This should not be blank!'
}]
You can use 'msgTarget: [element id]'. You have to write html in order to use element id instead of itemId. The validation function adds a list element under an element that you set as 'msgTarget'.
In case you want to show elements that you want for the validation, you can pass html instead of just a text.
{
xtype: 'container',
items: [
{
xtype: 'textfield',
allowBlank: false,
msgTarget: 'hoge'
blankText: '<div style="color:red;">validation message</div>', // optional
},
{
xtype: 'box',
html: '<div id="hoge"></div>' // this id has to be same as msgTarget
}
]
}
To show the error message under/side the input text box, msgTarget property will work only in case of you are using the form layout.
To work around this in other than form layout we need to wrap the element in "x-form-field-wrap" class.
you can find more on thread :
https://www.sencha.com/forum/showthread.php?86900-msgTarget-under-problem