I have a panel like http://jsfiddle.net/7kKVc/
I try to move displayfield like below
I try hideLabel: true, but that's wrong :(
How to make that thanks
Try this:
var filterPanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5, // Don't want content to crunch against the borders
width: 300,
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
hideEmptyLabel: false,
xtype: 'displayfield',
value: 'Limit: my value'
}],
renderTo: Ext.getBody()
});
Related
I have a panel holding a form. The form has fieldsets enclosing it. However, the fieldset is displaying as the same size of the panel holding the form even when the form contents are much smaller than the panel. I won't the fieldset to not stretch to the containing panel. I only want fieldset to be only as big as the form it is enclosing. However the fieldset takes the whole width of it's containing panel.
--Container for FormPanel
var win = new Ext.FormPanel({
xtype: 'form',
layout: 'form',
height: 200,
width: 300,
title: 'Testing',
items: [{
xtype: 'fieldset',
layout: 'hbox',
autoHeight:true,
autoWidth: false,
title: 'Fieldset',
defaults: {
border: false,
layout: 'form',
labelAlign: 'top',
labelSeparator: ''
},
items: [{
items: new Ext.form.TextField({
fieldLabel: 'Col1',
name: 'col1',
value: 'nothing',
})
}, {
items: new Ext.form.TextField({
fieldLabel: 'Col2',
name: 'col2',
value: 'something'
})
}]
},
new Ext.form.TextField({
fieldLabel: 'Col3',
name: 'col3',
value: 'anything'
})
]
}).show();
I have a windows with a items include 2 items like
var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
border: false,
hidden: true,
items: [{
xtype: 'textfield',
fieldLabel: '1'
},{
xtype: 'textfield',
fieldLabel: '2'
}]
}
}).show();
I make a button and i want show/hide first item (fieldLabel : '1') in my window like
Ext.create('Ext.Button', {
text: 'Show first item',
visible: false,
renderTo: Ext.getBody(),
handler: function() {
win.down('form').items.items[0].show(); // not working
}
});
But that's not working. How to fix that thanks
ps: I don't want to use id to get comp, b/c my form is dynamic thanks
here is my full code http://jsfiddle.net/aMKjN/
Try this. It will show only the first textfield.
Ext.create('Ext.Button', {
text: 'Show first item',
visible: false,
renderTo: Ext.getBody(),
handler: function() {
win.items.items[0].show();
win.items.items[0].items.items[1].hide();
}
});
try this it will show only textfield 1
Ext.onReady(function () {
var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
border: false,
// hidden: true,
items: [{
xtype: 'textfield',
id:'first',
hidden: true,
fieldLabel: '1'
},{
xtype: 'textfield',
fieldLabel: '2'
}]
}
}).show();
Ext.create('Ext.Button', {
text: 'Show first item',
visible: false,
renderTo: Ext.getBody(),
handler: function() {
Ext.getCmp('first').setVisible(true)
}
});
});
I want to display the label on top of text field, but it is not displaying. Below is the code.(in fact the below code displays the label at the right side of text field).I am using extjs 3.4, note : Using form panel is also not working as expected (have pasted the code below)
Any help is much appreciated.
Ext.onReady(function () {
var contentsPanel = new Ext.Panel({
labelAlign: 'top',
renderTo: Ext.getBody(),
layout: 'form',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first'
}]
});
contentsPanel.show();
});
Ext.onReady(function () {
var contentsPanel = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
defaultType: 'textfield',
labelAlign: 'top',
items: [{
fieldLabel: 'First Name',
name: 'first',
labelAlign: 'top'
}]
});
contentsPanel.show();
});
labelAlign is a property of field, not panel property. Need to configure field:
items:[{
fieldLabel: 'FirstName',
labelAlign: 'top',
name: 'first'
}]
If you want set labelAlign for all panel fields, you can add in panel config:
var contentsPanel = new Ext.Panel({
fieldDefaults: {
labelAlign: 'top'
},
...
I am working in extjs4. I am geting stuck at a point where I want to format items in a panel at a center position properly. But I don't know how.
Actually I want to display all items at middle position not left side..also I want display submit button at center position but it get display at left side.. I am facing this problem...
here Is my some code :
Ext.define('Am.user.Registration', {
extend:'Ext.form.Panel',
//extend:'Ext.window.Window',
id:'registationId',
alias:'widget.Registration',
title:'Registration form',
resizable:false,
buttonAlign:'center',
closable:true,
titleAlign:'center',
//autoScroll:true,
draggable:false,
//shadow:true,
height:350,
width:800,
floating:true,
bodyPadding: 30,
//collapsible:true,
requires:[
'Balaee.view.sn.user.Captcha'
],
defaults:{
//align:'center'
defaultAlign:'t1-c'
},
//bodyStyle: 'align:center',
// Ext.require(['Ext.form.field.Date']);
items:[
{
xtype:'combo',
fieldLabel:'Language',
name:'language',
emptyText: 'Language',
store: ['Marathi','Hindi','English'],
queryMode: 'local',
editable:false
},
{
xtype: 'fieldcontainer',
fieldLabel: 'Name',
layout: 'hbox',
combineErrors: true,
defaults: {
hideLabel: true
},
items: [
{xtype: 'textfield', fieldLabel: 'First', name: 'firstName', emptyText: 'First name',width: 80, allowBlank: false,margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'Middle', name: 'middleName',emptyText: 'Middle name', width: 80, allowBlank: true, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'Last', name: 'lastName', emptyText: 'Last name',width: 80, allowBlank: false,
validator: function(value) {
var password1 = this.previousSibling('[name=firstName]');
return (!(value === password1.getValue())) ? true : 'Dont give first name and last name same.'
}
}
]
},
{
xtype:'textfield',
fieldLabel:'Primary email',
name:'primaryEmail',
//anchor:'100%',
allowBlank:false,
emptyText: 'Email',
vtype:'email'
//labelAlign:'right',
},
---------------
--------------
],//End of items square
// buttons:[{
// xtype:'button',
// formBind: true,
// fieldLabel:'submitttttttt',
// action:'submitAction',
// text:'Submit',
// defaultAlign:'t1-c'
// }
// ],
bbar:
[
{
xtype:'button',
formBind: true,
fieldLabel:'submit',
action:'submitAction',
text:'Submit',
defaultAlign:'t1-c'
//flex:6,
},
],//End of buttons square
});// End of login class
You should apply an HBox layout (with pack: 'center') to your form and ditto for your toolbar.
You can see an example of how this is done for the form here. And for the toolbar:
var toolbar = new Ext.Toolbar({
dock: 'bottom',
layout:{
pack: 'center'
},
items: [{
xtype: 'button',
text: 'foobar',
handler: function(){
alert('ok');
}
}]
});
I have a form with dynamically added fields (varying sizes).
I would like to put a number of form fields in a fieldset, and have the fieldset border just large enough to contain all the fields.
Here is an (ugly) example that shows the issue:
var win = new Ext.Window({
xtype: 'form',
layout: 'form',
height: 200,
width: 500,
title: 'Testing',
items: [{
xtype: 'fieldset',
layout: 'hbox',
autoHeight:true,
autoWidth: false,
title: 'Fieldset',
defaults: {
border: false,
layout: 'form',
labelAlign: 'top',
labelSeparator: ''
},
items: [{
items: new Ext.form.TextField({
fieldLabel: 'Col1',
name: 'col1',
value: 'nothing',
})
}, {
items: new Ext.form.TextField({
fieldLabel: 'Col2',
name: 'col2',
value: 'something'
})
}]
},
new Ext.form.TextField({
fieldLabel: 'Col3',
name: 'col3',
value: 'anything'
})
]
}).show();
This is what it looks like:
I will not know the width of the contained fields beforehand, so I can't specify a width.
Thanks for any suggestions.
Not what you asked for, but adding flex: 1 to the defaults for the fieldset makes the fields arrange themselves evenly within the bounds of the fieldset.
Ok, works by changing some fieldset properties:
layout to 'table',
autoWidth to true,
adding a cls with 'float:left', (putting this in style doesn't seem to help)
and adding a dummy element to clear the float:
{
xtype: 'component',
style: 'clear:both'
}
It now shows as desired!