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'
}]
}
Related
I have a fieldset with textfield checkbox pairs, how do i align them in rows so that i have like below, thanks in advance.
[CHECKBOX] [TEXTBOX]
[CHECKBOX] [TEXTBOX]
[CHECKBOX] [TEXTBOX]
You should use fieldContainer with layout: 'hbox' configuration.
For example:
var formConfig = {
xtype: 'form'
// Your form configuration here
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'My pair label', // If you want a label for both fields, or you can put fieldLabel to either/both/none fields
layout: {
type: 'hbox',
align: 'middle', // or any other align of your choosing
},
items: [
{
xtype: 'checkbox',
// your checkbox configuration here, i.e. hideLabel: true or fieldLabel: 'checkbox label'
},
{
xtype: 'textfield',
// your textfield configuration here
}
]
}
]
}
I am trying to design a layout like the one shown in the image. I tried the following code
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
defaults: {
// applied to each contained panel
bodyStyle: 'padding:20px'
},
items: [{
// This is the component A in layout image
xtype: 'textfield',
fieldLabel: 'Text-1'
},{
// This is the component B in layout image
xtype: 'textfield',
fieldLabel: 'Text-2'
},{
// This is the component C in layout image
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
colspan: 2
}],
layout: {
type: 'table',
columns: 2,
align:'stretch'
},
});
}
});
But I'm not able to make the colspan work for the textarea field. The output of the above code looks something like this.
Can anyone please help me to make this one work?
PS: I tried emulating the table layout by creating a container - Hbox layout combination. That one works. But I still need to get this one working.
As #qmat suggests, you need to assign a percentage width to your textareafield, in order to give it the full width. The colspan is working as intended, but the textarea uses its standart width.
{
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
width: "100%", // <- gives the textarea the full width
colspan: 2
}
The align:'stretch' config has no effect, it is not an actual config of the table layout.
See the ExtJs 4.2.5 docs and the working Sencha Fiddle.
Hope This will work for you.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
// This is the component A in layout image
xtype: 'textfield',
width:250,
emptyText :'A'
},{
// This is the component B in layout image
xtype: 'textfield',
width:250,
emptyText :'B'
},{
// This is the component C in layout image
xtype: 'textfield',
width:500,
colspan:2,
emptyText :'C'
}],
layout: {
type: 'table',
columns: 2
},
});
}});
You can check the link below and adjust width size as your requirment. Also add css if you want.
https://fiddle.sencha.com/#fiddle/1at3
Is it possible to position some of my items in my panel to the left, and the last items all the way to the right? So that there is an empty space in the middle. Right now I am using hbox layout, and put an empty container in the middle and flex it like this:
items: [{
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'label',
text: 'Filter on vehicle'
},{
xtype:'textfield'
},{
xtype: 'button',
text: '...'
},{
xtype: 'container',
flex:1
},{
xtype: 'button',
text: 'New'
},{
xtype:'button',
text: 'Edit'
},{
xtype: 'button',
text: 'Delete'
}]
}]
Any better way to do this?
Don't know if it is a better solution or not.But DOM wise it will be lighter.
We can use tbfill xtype instead of inserting a container.
{
xtype: 'container',
layout: 'border',
items: [{
xtype: 'label',
text: 'Filter on vehicle',
},{
xtype:'textfield',
},{
xtype: 'button',
text: '...',
},
{
xtype:'tbfill'
},{
xtype: 'button',
text: 'New',
},{
xtype:'button',
text: 'Edit',
},{
xtype: 'button',
text: 'Delete',
}],
}
Working Example
If you want to use elements like button, textfield, label, combobox... You can use Ext.toolbar.Toolbar xtype: toolbar. So if you need to put items to the right you can easy do this with '->', also you can use '|' to put vertical separator to the tollbar.
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [
{
xtype: 'toolbar',
layout: 'hbox',
items: [
{
xtype: 'label',
text: 'Filter on vehicle'
},
{
xtype: 'textfield'
},
{
xtype: 'button',
text: '...'
},
{
xtype: 'button',
text: 'New'
},
'->',
{
xtype: 'button',
text: 'Edit'
},
{
xtype: 'button',
text: 'Delete'
}
]
}
]
});
What you're doing is fine, and arguably the best solution with 1 minor suggestion. Use 'component' instead of 'container' as that will be slightly lighter.
The previous answers of 'tbfill' and '->' are actually the same thing as what you're doing. '->' is a shorthand for 'tbfill' and 'tbfill' is literally a flex:1 component.
All 3 solutions should work fine but I like using a flex:1 component because using tbfill depends on knowing an implementation detail of toolbar, namely that is uses hbox. Sencha is free to change how toolbar and tfill work in a future release, at which point your code (if it uses tbfill) is broken.
I have small query,i have two text fields.here my query is if i enter a value in second text field,If the value is greater than first text field it's show pop up message box,
how can i implement this requirement.Any one can u please help to me.
Here is an example:
working fiddle here : https://fiddle.sencha.com/#fiddle/osl
Ext.create('Ext.form.Panel', {
title: 'Check Fields',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Number1',
xtype: 'numberfield',
id: 'num1'
}, {
xtype: 'textfield',
name: 'text2',
fieldLabel: 'Number2',
xtype: 'numberfield',
listeners:{
change: function( me, newValue, oldValue, eOpts ){
if (Ext.getCmp("num1").getValue() > newValue){
Ext.Msg.alert('Status', 'Field 1 greater than Field2');
}
}
}
}],
});
There are many ways to implement that. One possible way would be:
Ext.widget({
xtype: 'container',
defaults: {
xtype: 'textfield'
},
items: [
{
fieldLabel: 'Field 1',
name: 'f1'
},
{
fieldLabel: 'Field 2',
listeners: {
'change': function() {
if (this.getValue() > this.ownerCt.down('textfield[name="f1"]').getValue()) {
Ext.Msg.alert('Attention', 'The value of the second field is greater than the value of the first one');
}
}
}
}
],
renderTo: Ext.getBody()
});
(I'm using jquery for example)
first text field id=A
second text field id=B
var a=$('#A');
var b=$('#B');
$("#B").on(function() {
if(a>b){
alert("B number is greater than A number");
}
});
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.