Creating Label and TextBox over the window

[Pravin.Pawar]

Hi,

I'm new to ExtJS and NOT sure how to create Label and TextBox control over the window using ExtJS 4.1.

I could able to show window using following code -

var win;
if (!win) {
win = new Ext.Window({
applyTo: 'hello-win',
layout: 'fit',
width: 500,
height: 300,
closeAction: 'hide',
plain: true,
textArea: [{ text: 'NEW'}],
buttons: [{
text: 'Submit',
disabled: true
}, {
text: 'Close',
handler: function () {
win.hide();
}
}]
});
win.show();
}

Above code do NOT show textbox over the window and shows only Submit and Close buttons. Please let me know how should I display Labels and input TextBox.

Regards, Pravin

[sword-it]

Hi,

Use items config to add component into window, like


{
..............
items:[
{
xtype:'form',
items:[
{
xtype:'textfield',
fieldLabel: 'Name'
},
{
xtype:'textfield',
fieldLabel: 'Age'
}
]
}
]
...................
}




Read API -http://docs.sencha.com/ext-js/4-1/#!/api/Ext.window.Window-cfg-items

[Pravin.Pawar]

what will be the xtype for Label? plz let me know if there is any place where I will get list of the xtype available in ExtJS

[sword-it]

Don't use any xtype for display Label if you use form component, "fieldLabel" config of form component automatically create label.
Here is working example - http://jsfiddle.net/DDeHP/

Y (http://jsfiddle.net/DDeHP/)ou can find more xtype here http://docs.sencha.com/ext-js/4-1/

[Pravin.Pawar]

We can use following code-

var form = Ext.widget('form', {
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,

fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
items: [{
xtype: 'fieldcontainer',
id: 'milestoneName',
fieldLabel: milestoneName,
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'textfield',

fieldDefaults: {
labelAlign: 'top'
},

items: [{
flex: 1,
fieldLabel: 'From Date',
xtype: 'datefield',
name: 'dtStartSchedule',
//beforeLabelTextTpl: required,
id: 'dtStartSchedule',
format: 'm/d/Y',
value: fromDate,
editable: false,
allowBlank: false
},
{
flex: 1,
fieldLabel: 'To Date',
xtype: 'datefield',
name: 'dtStopSchedule',
//beforeLabelTextTpl: required,
id: 'dtStopSchedule',
format: 'm/d/Y',
value: toDate,
editable: false,
allowBlank: false
}]
}],

buttons: [{
text: 'Cancel',
handler: function () {
this.up('form').getForm().reset();
this.up('window').hide();
}
}, {
text: 'Submit',
handler: function () {
if (this.up('form').getForm().isValid()) {
// In a real application, this would submit the form to the configured url
// this.up('form').getForm().submit();
this.up('form').getForm().reset();
this.up('window').hide();
Ext.MessageBox.alert('Status', 'Record saved successfully.');
}
}
}]
});

win = Ext.widget('window', {
title: title,
closeAction: 'hide',
width: 350,
height: 200,
layout: 'fit',
resizable: true,
modal: true,
items: form
});
win.show();