hello i am have this component in form and i am want edit size from fieldLabel to value, i want do it size small.
{
xtype: 'displayfield',
value: 'ABC',
itemId: 'itemNumber',
fieldLabel: 'Item Number'
},
thanks)
Hi Try adding the following 'labelWidth' to your config one like the below example
{
xtype: 'displayfield',
value: 'ABC',
itemId: 'itemNumber',
fieldLabel: 'Item Number',
labelWidth: // Give a width that suits your req
}
Hope it helps you.
Related
I wish to have an icon displayed as "value" for a form "displayfield". This is to display read-only values like true/false and yes/no with icons like "tick mark/cross mark". How to do it? There are many posts on labels but that is not what I am looking for. I need a "fieldLabel" and then the icon (it is not mandatory to use a form though, I may use any component for this).
Yes we can do that try with my example and I am attaching screenshot too.
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 200,
height: 150,
bodyPadding: 10,
title: 'Final Score',
items: [{
xtype: 'displayfield',
fieldLabel: 'home ',
name: 'home_score',
value: '<img src="home.png"></img> '
}, {
xtype: 'displayfield',
fieldLabel: 'Visitor ',
name: 'visitor_score',
value: '<img src="visitor.png"></img>'
}],
buttons: [{
text: 'Update'
}]
});
});
Just change the path of your image in your code.If you are not using form apply the same in label field.
Finally, I did the following in items of form-panel to make it work:
{
xtype: 'fieldcontainer',
fieldLabel: 'Label 1',
flex: 1,
name: 'Name 1',
items: [{
xtype: 'image',
glyph: 'something#FontAwesome'
}]
},{
xtype: 'fieldcontainer',
fieldLabel: 'Label 2',
flex: 1,
name: 'Name 2',
items: [{
xtype: 'image',
glyph: 'something#FontAwesome'
}]
}
I put Ext.Img in 'requires' of form-panel class.
I have following code-
{ fieldLabel: 'Date', name: 'Date', xtype: 'datefield' }
{ fieldLabel: 'Name', name: 'PerName', xtype: 'textfield' },
{
xtype: 'panel',
layout: 'form',
border: false,
labelWidth: 200,
items: [
this.fields.check1 = { xtype: 'checkbox', name: 'Check1', fieldLabel: 'Checkbox 1', width: 320 },
this.fields.check2 = { xtype: 'checkbox', name: 'Check2', fieldLabel: 'Checkbox 2', width: 320 }
]
}
Here, I am taking the checkboxes inside a panel as I need to increase the label width.
The label is showing but checkbox is not displaying .
What I am doing wrong
How about you add your checkboxes inside a FormPanel something like this:
var myPanel = new Ext.form.Panel({
alias: 'widget.myformPanel',
renderTo: Ext.getBody(),
defaults: {
labelWidth: 100,
},
items: [{
xtype: 'checkbox',
name: 'Check1',
fieldLabel: 'Checkbox 1'
}, {
xtype: 'checkbox',
name: 'Check2',
fieldLabel: 'Checkbox 2'
}]
});
In that way, you can set the labelWidth of the formPanel items.
Try to play it with jsfiddle.
Build your application with
sencha app build
It seems that you need to build only for deployment, however, development version uses production css. Therefore, anytime you add a new class you need to build the app to re-create css to include the new class styling.
I have a form panel in http://jsfiddle.net/7CLWy/
here is my important code
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
allowBlank: false,
msgTarget: 'under',
name: 'firstName'
}, {
xtype: 'datefield',
allowBlank: false,
fieldLabel: 'Start date',
msgTarget: 'under'
}],
I want change default message error in field
How to change that. Thanks
The blankText property is the validation message when a field is required, and invalidText is the text when the field generically fails validation. You can add your own custom messages in these properties. Similarly, if you happened to be doing regex-based validation with the regex property, you could use the regexText field to provide a custom validation message.
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
allowBlank: false,
msgTarget: 'under',
name: 'firstName',
blankText: 'This should not be blank!'
}, {
xtype: 'datefield',
allowBlank: false,
fieldLabel: 'Start date',
msgTarget: 'under',
invalidText: 'This value is not a valid date!'
}, {
xtype: 'textfield',
fieldLabel: 'Digits followed by A,B,or C',
msgTarget: 'under',
name: 'someText',
regex: /^\d+[ABC]$/,
regexText: 'This must be a string of digits followed by A, B, or C!'
}]
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.
reference ->ExtJS4: How to show validation error message next to textbox, combobox etc
we can use validator method and return the custom message.
{
xtype: 'textfield',
fieldLabel: 'Digits followed by A,B,or C',
msgTarget: 'under',
name: 'someText',
validator : function(value){
var regex= /^\d+[ABC]$/;
if(!regex.test(value)){
return "'This must be a string of digits followed by A, B, or C!'"
}
return true;
}
}
To change the default active error message we use setActiveError( msg ).you see the following code.
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
allowBlank: false,
id:'fn',
msgTarget: 'under',
name: 'firstName',
}, {
xtype: 'datefield',
allowBlank: false,
fieldLabel: 'Start date',
msgTarget: 'under',
}
],
renderTo: Ext.getBody()
});
var m = Ext.getCmp('fn');
m.setActiveError("important"); //can change the text
I need to set a dynamic text (units of measurement,Eg:*C,mm) beside a textfield
I declared the text field as,
{
xtype:'textfield',
hidden:true,
id:'XX',
fieldLabel:' Value',
name:'Value'
}
and label as
{
xtype:'label',
id:'X',
name:'X'
}
I could set and get the values but the alignment is the problem. Plz help me with that.
Thank you
You probably need to wrap this textfield into fieldcontainer, something like:
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Temperature',
}, {
xtype: 'displayfield',
value: '*C'
}]
}
I am having trouble making ExtJS field set elements appear correctly without overlapping. I use a FieldSet class and each row is a hbox container. My goal is to leave the layout the same but somehow make the values automatically show up on more than one line if needed.
Below is a sample of what my code looks like and a screenshot.
var genInfoFieldSet = new Ext.form.FieldSet({
title: '<b>TEST FIELD SET</b>',
height: '100%',
autoWidth: true,
items: [
//ROW 1
{
xtype: 'container',
layout: 'hbox',
defaults: { labelWidth: 120, align: 'stretch', labelStyle: 'font-weight:bold;font-size:11px', flex: 1,
fieldStyle: 'font-size:11px'
},
items: [
{
xtype: 'displayfield',
fieldLabel: 'field 1',
value: 'ABCDESDAVBABVA'
},
{
xtype: 'displayfield',
fieldLabel: 'field 2',
value: 'ZXCVZXVCZXZX'
},
{
xtype: 'displayfield',
fieldLabel: 'field 3',
value: 'ZXZXZXZX'
},
{
xtype: 'displayfield',
fieldLabel: 'field 4',
value: 'AKHAKSHASH'
}
]
},
//ROW 2
{
xtype: 'container',
layout: 'hbox',
defaults: { labelWidth: 120, align: 'stretch', labelStyle: 'font-weight:bold;font-size:11px', flex: 1,
fieldStyle: 'font-size:11px'
},
items: [
{
xtype: 'displayfield',
fieldLabel: 'field 5',
value: 'xxxxxxxxxxxxxxxxxxAAAAAAAXXX',
width: '10px'
},
{
xtype: 'displayfield',
fieldLabel: 'field 6',
value: 'AB'
},
{
xtype: 'displayfield',
fieldLabel: 'field 7',
value: 'ABC'
},
{
xtype: 'displayfield',
fieldLabel: 'field 8',
value: 'ABC'
}
]
}
]
});
You have provided flex:1 to every element (by using it in defaults). Instead of this, you should prefer providing flex:1 to one of the element, and give fixed width (or minWidth maxWidth) to others.
Giving flex:1 to every element tries to distribute the total width equally to all the elements and if the available width is not enough then the overlap occurs.
Thus, to remove the overlap, take off flex:1 from the defaults and assign flex:1 to any one element and give widths to others.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Box-cfg-flex
Hope this helps.