Form display with column layout
January 6th, 2009
Here I want to display column layout in my form.
I have one window in which half portion is form and another is grid.
But I can not display form with column layout. Below is my code.
// Example form start here (Device Form)
Ext.ns('Example');
Example.Form = Ext.extend(Ext.form.FormPanel, {
// configurables
border:false
,frame:true
,labelWidth:150
,bodyStyle:'padding:5px 5px 0'
,url:script_path + 'managedevice/managedevice.php'
,initComponent:function()
{
// configure ourselves
Ext.apply(this, {
defaultType:'textfield'
,defaults:{anchor:'-24',
msgTarget: 'side'
}
,monitorValid:true
,buttonAlign:'right'
,items:
[{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
border: false,
items: [{
xtype:'textfield',
fieldLabel: 'Account Number',
layout:'form',
anchor:'95%'
}, {
columnWidth:.5,
xtype:'textfield',
fieldLabel: 'Name 1',
layout:'form',
anchor:'95%'
}]
}, {
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
}]
,buttons:[{
text:'Apply Template'
,scope:this
,iconCls:'icon-ok'
,handler:this.commitChanges
}]
}); // eo apply
// call parent
Example.Form.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
/**
* Form onRender override
*/
,onRender:function()
{
// call parent
Example.Form.superclass.onRender.apply(this, arguments);
// set wait message target
this.getForm().waitMsgTarget = this.getEl();
} // eo function onRender
/**
* Load button click handler
*/
,onLoadClick:function()
{
this.load({
url:this.url
,waitMsg:'Loading...'
,params:{cmd:'load'}
});
// any additional load click processing here
} // eo function onLoadClick
/**
* Submits the form. Called after Submit buttons is clicked
* @private
*/
/*,submit:function()
{
this.commitChanges();
}*/ // eo function submit
//{{{ Function commitChanges called when Save button clicked
,commitChanges:function() {
// For getting parent form elements and it's value
winname = form_grid_win.items.get(0);
basicForm = winname.getForm()
var x = basicForm.items;
// Form validated or not
if (!basicForm.isValid()) {
this.showError('Enter all required fields');
return;
}else{
var data = ;
var o = new Object()
for(i=0;i< x.getCount(x);i++){
//alert(x.get(i).getName() + "= " + x.get(i).getValue());
o.newRecord = true;
// For device_created
var d = new Date();
var month = d.getMonth() + 1;
var year = d.getFullYear();
var day = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var seconds = d.getSeconds();
o.device_created = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + seconds;
// For device_define
o.device_define = 'DeviceTemplate';
o[x.get(i).getName()] = x.get(i).getValue();
}
// push data into array
data.push(o);
var o = {
url:this.url
,method:'post'
,callback:this.requestCallback
,scope:this
,params:{
mode:'saveDevice'
,objName:'device'
,data:Ext.encode(data)
}
};
Ext.Ajax.request(o);
}
} //}}} eo function commitChanges
//{{{ Function for request call back
,requestCallback:function(options, success, response) {
if(true !== success) {
this.showError(response.responseText);
return;
}
try {
var o = Ext.decode(response.responseText);
if(true !== o.success){
this.showError(o.error, 'Error');
return;
}else{
//this.store.reload({params:{start:0,limit:number_of _records}});
this.showMessage('Record saved successfully.', 'Confirmation');
return;
Ext.getCmp("winadd").close();
}
}
catch(e) {
this.showError(response.responseText, 'Cannot decode JSON object');
return;
}
if(true !== o.success) {
this.showError(o.error 'Unknown error');
return;
}
switch(options.params.mode) {
case 'saveDevice':
var records = this.store.getModifiedRecords();
Ext.each(records, function(r, i) {
if(o.insertIds && o.insertIds[i]) {
r.set(this.idName, o.insertIds[i]);
delete(r.data.newRecord);
}
});
this.store.commitChanges();
break;
case 'deleteData':
break;
}
} //}}} eo function requestCallback
//{{{ Fucntion for displaying message
,showMessage:function(msg, title) {
Ext.Msg.show({
title:title 'Confirmation'
,msg:Ext.util.Format.ellipsis(msg, 2000)
,icon:Ext.Msg.INFO
,buttons:Ext.Msg.OK
,minWidth:1200 > String(msg).length ? 360 : 600
});
} //}}} eo function showMessage
/**
* Success handler
* @param {Ext.form.BasicForm} form
* @param {Ext.form.Action} action
* @private
*/
,onSuccess:function(form, action)
{
window.location.href = "index.php";
} // eo function onSuccess
/**
* Failuer handler
* @param {Ext.form.BasicForm} form
* @param {Ext.form.Action} action
* @private
*/
,onFailure:function(form, action)
{
window.location.href = "index.php";
} // eo function onSuccess
/**
* Shows Message Box with error
* @param {String} msg Message to show
* @param {String} title Optional. Title for message box (defaults to Error)
* @private
*/
,showError:function(msg, title)
{
title = title 'Error';
Ext.Msg.show({
title:title
,msg:msg
,modal:true
,icon:Ext.Msg.ERROR
,buttons:Ext.Msg.OK
});
} // eo function showError
}); // eo extend
Thanks
Hiral
Then, have two column Containers configured with autoEl:{} and layout: 'form'
Your Fields should be in these tow column Containers.
What is the problem you are having?
apply layout:' column' directly to the FormPanel, and have the columns as direct child items.
here I paste latest code.
// Example form start here (Device Form)
Ext.ns('Example');
Example.Form = Ext.extend(Ext.form.FormPanel, {
// configurables
border:false
,labelAlign: 'top'
,frame:true
,labelWidth:140
,bodyStyle:'padding:5px 5px 0px'
,layout:'column'
,url:script_path + 'managedevice/managedevice.php'
,initComponent:function()
{
// For device model
this.LookupRecordModel = Ext.data.Record.create([
{name: 'devicemodel_id'},
{name: 'devicemodel_name'}
]);
//Store for combo box of device model
this.devicemodelcombo = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: this.url})
,baseParams:{mode:'deviceModel', objName:"devicemodel"}
,reader: new Ext.data.JsonReader({
id:'devicemodel_id',
root:'rows',
totalProperty:'totalCount'
},this.LookupRecordModel)
});
// For device layer
this.devicelayercombo = new Ext.data.SimpleStore({
fields: ['device_layer','layeraction'],
data : [['aorta','Aorta'],['access','Access'],['cpe','Cpe'],['aspan','Aspan'],['unknown','Unknown']]
});
// For Up Down
this.deviceupdowncombo = new Ext.data.SimpleStore({
fields: ['device_up_down','updownaction'],
data : [['up','Up'],['down','Down']]
});
// For SNMP Version
this.devicesnmpcombo = new Ext.data.SimpleStore({
fields: ['device_snmpversion','snmpaction'],
data : [['SNMP1','SNMP1'],['SNMP2','SNMP2'],['SNMP3','SNMP3']],
width:50
});
// For Device Status
this.devicestatuscombo = new Ext.data.SimpleStore({
fields: ['device_status','statusaction'],
data : [['Active','Active'],['Down','Down'],['AdminDown','Admin Down'],['Unknown','Unknown']]
});
// For Site
this.LookupRecordSite = Ext.data.Record.create([
{name: 'site_id'},
{name: 'site_name'}
]);
//Store for combo box of device model
this.sitecombo = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: this.url})
,baseParams:{mode:'site', objName:"site"}
,reader: new Ext.data.JsonReader({
id:'site_id',
root:'rows',
totalProperty:'totalCount'
},this.LookupRecordSite)
});
// For Coustomer
this.LookupRecordCustomer = Ext.data.Record.create([
{name: 'customer_id'},
{name: 'customer_fullname'}
]);
//Store for combo box of device model
this.customercombo = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: this.url})
,baseParams:{mode:'customer', objName:"customer"}
,reader: new Ext.data.JsonReader({
id:'customer_id',
root:'rows',
totalProperty:'totalCount'
},this.LookupRecordCustomer)
});
// For Cacti server reference
this.LookupRecordModel = Ext.data.Record.create([
{name: 'cactiserverreference_id'},
{name: 'cactiserverreference_id'}
]);
//Store for combo box of device model
this.cactiservercombo = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: this.url})
,baseParams:{mode:'cactiServerReference', objName:"cactiserverreference"}
,reader: new Ext.data.JsonReader({
id:'cacti_server_reference_id',
root:'rows',
totalProperty:'totalCount'
},this.LookupRecordModel)
});
var txtFirstName = new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
anchor: '98%'
});
// configure ourselves
Ext.apply(this, {
defaultType:'textfield'
,defaults:{anchor:'-24',
msgTarget: 'side'
}
,monitorValid:true
,buttonAlign:'right'
,items:
[
new Ext.form.ComboBox({
store: this.devicemodelcombo,
fieldLabel:'Device Model',
displayField:'devicemodel_name',
valueField:'devicemodel_id',
name:'devicemodel_id',
typeAhead: true,
mode: 'remote',
emptyText: 'Select Device Model',
triggerAction: 'all',
editable:false,
selectOnFocus:true,
allowBlank:false
}),{
fieldLabel:'Device Name'
,name:'device_name'
,allowBlank:false
,vtype:'alphanumspace'
}, new Ext.form.TextArea({
fieldLabel:'Device Description'
,name:'device_description'
}), {
fieldLabel:'IPV4'
,name:'device_ipv4'
,allowBlank:false
},{
fieldLabel:'IPV6'
,name:'device_ipv6'
,allowBlank:false
},{
fieldLabel:'Netmask'
,name:'device_netmask'
},new Ext.form.ComboBox({
store: this.devicelayercombo,
fieldLabel:'Device Layer',
displayField:'layeraction',
valueField:'device_layer',
name:'device_layer',
typeAhead: true,
mode: 'local',
emptyText: 'Select Device Layer',
triggerAction: 'all',
editable:false,
selectOnFocus:true,
width:100
}),{
fieldLabel:'Host Name'
,name:'device_hostname'
},{
fieldLabel:'Read Community'
,name:'device_readcommunity'
},{
fieldLabel:'Write Community'
,name:'device_writecommunity'
},{
fieldLabel:'Serial'
,name:'device_serial'
},{
fieldLabel:'Nagios Code'
,name:'device_nagioscode'
},{
fieldLabel:'Gateway'
,name:'device_gateway'
},new Ext.form.ComboBox({
store: this.sitecombo,
fieldLabel:'Site',
displayField:'site_name',
valueField:'site_id',
name:'site_id',
typeAhead: true,
mode: 'remote',
emptyText: 'Select Site',
triggerAction: 'all',
editable:false,
selectOnFocus:true,
width:100,
allowBlank:false
}),new Ext.form.ComboBox({
store: this.customercombo,
fieldLabel:'Customer',
displayField:'customer_fullname',
valueField:'customer_id',
name:'customer_id',
typeAhead: true,
mode: 'remote',
emptyText: 'Select Customer',
triggerAction: 'all',
editable:false,
selectOnFocus:true,
width:100,
allowBlank:false
}),new Ext.form.ComboBox({
store: this.cactiservercombo,
fieldLabel:'Cacti Server Reference',
displayField:'cacti_server_reference_id',
valueField:'cactiserverreference_id',
name:'cactiserverreference_id',
typeAhead: true,
mode: 'remote',
emptyText: 'Select Cacti Server Reference',
triggerAction: 'all',
editable:false,
selectOnFocus:true,
width:100
}),new Ext.form.ComboBox({
store: this.devicesnmpcombo,
fieldLabel:'SNMP Version',
displayField:'snmpaction',
valueField:'device_snmpversion',
name:'device_snmpversion',
typeAhead: true,
mode: 'local',
emptyText: 'Select SNMP Version',
triggerAction: 'all',
editable:false,
selectOnFocus:true,
width:100
}),new Ext.form.ComboBox({
store: this.deviceupdowncombo,
fieldLabel:'Device Up Down',
displayField:'updownaction',
valueField:'device_up_down',
name:'device_up_down',
typeAhead: true,
mode: 'local',
emptyText: 'Select Device Up Down',
triggerAction: 'all',
editable:false,
selectOnFocus:true,
width:100
}),new Ext.form.ComboBox({
store: this.devicestatuscombo,
fieldLabel:'Device Status',
displayField:'statusaction',
valueField:'device_status',
name:'device_status',
typeAhead: true,
mode: 'local',
emptyText: 'Select Device Status',
triggerAction: 'all',
editable:false,
selectOnFocus:true,
width:100
}),new Ext.form.Checkbox({
fieldLabel:'Is Active'
,name:'device_active'
}),new Ext.form.Checkbox({
fieldLabel:'Export to Cacti'
,name:'device_exporttocacti'
}),new Ext.form.Checkbox({
fieldLabel:'Export to UPCDB'
,name:'device_exporttocactiupcmysql'
}),new Ext.form.Checkbox({
fieldLabel:'Export Rancid'
,name:'device_exportrancid'
}),new Ext.form.Checkbox({
fieldLabel:'Import from CVS'
,name:'device_importfromcvs'
})
]
,buttons:[{
text:'Apply Template'
,scope:this
,iconCls:'icon-ok'
,handler:this.commitChanges
}]
}); // eo apply
// call parent
Example.Form.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
/**
* Form onRender override
*/
,onRender:function()
{
// call parent
Example.Form.superclass.onRender.apply(this, arguments);
// set wait message target
this.getForm().waitMsgTarget = this.getEl();
} // eo function onRender
/**
* Load button click handler
*/
,onLoadClick:function()
{
this.load({
url:this.url
,waitMsg:'Loading...'
,params:{cmd:'load'}
});
// any additional load click processing here
} // eo function onLoadClick
/**
* Submits the form. Called after Submit buttons is clicked
* @private
*/
/*,submit:function()
{
this.commitChanges();
}*/ // eo function submit
//{{{ Function commitChanges called when Save button clicked
,commitChanges:function() {
// For getting parent form elements and it's value
winname = form_grid_win.items.get(0);
basicForm = winname.getForm()
var x = basicForm.items;
// Form validated or not
if (!basicForm.isValid()) {
this.showError('Enter all required fields');
return;
}else{
var data = ;
var o = new Object()
for(i=0;i< x.getCount(x);i++){
//alert(x.get(i).getName() + "= " + x.get(i).getValue());
o.newRecord = true;
// For device_created
var d = new Date();
var month = d.getMonth() + 1;
var year = d.getFullYear();
var day = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var seconds = d.getSeconds();
o.device_created = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + seconds;
// For device_define
o.device_define = 'DeviceTemplate';
o[x.get(i).getName()] = x.get(i).getValue();
}
// push data into array
data.push(o);
var o = {
url:this.url
,method:'post'
,callback:this.requestCallback
,scope:this
,params:{
mode:'saveDevice'
,objName:'device'
,data:Ext.encode(data)
}
};
Ext.Ajax.request(o);
}
} //}}} eo function commitChanges
//{{{ Function for request call back
,requestCallback:function(options, success, response) {
if(true !== success) {
this.showError(response.responseText);
return;
}
try {
var o = Ext.decode(response.responseText);
if(true !== o.success){
this.showError(o.error, 'Error');
return;
}else{
//this.store.reload({params:{start:0,limit:number_of _records}});
this.showMessage('Record saved successfully.', 'Confirmation');
return;
Ext.getCmp("winadd").close();
}
}
catch(e) {
this.showError(response.responseText, 'Cannot decode JSON object');
return;
}
if(true !== o.success) {
this.showError(o.error 'Unknown error');
return;
}
switch(options.params.mode) {
case 'saveDevice':
var records = this.store.getModifiedRecords();
Ext.each(records, function(r, i) {
if(o.insertIds && o.insertIds[i]) {
r.set(this.idName, o.insertIds[i]);
delete(r.data.newRecord);
}
});
this.store.commitChanges();
break;
case 'deleteData':
break;
}
} //}}} eo function requestCallback
//{{{ Fucntion for displaying message
,showMessage:function(msg, title) {
Ext.Msg.show({
title:title 'Confirmation'
,msg:Ext.util.Format.ellipsis(msg, 2000)
,icon:Ext.Msg.INFO
,buttons:Ext.Msg.OK
,minWidth:1200 > String(msg).length ? 360 : 600
});
} //}}} eo function showMessage
/**
* Success handler
* @param {Ext.form.BasicForm} form
* @param {Ext.form.Action} action
* @private
*/
,onSuccess:function(form, action)
{
window.location.href = "index.php";
} // eo function onSuccess
/**
* Failuer handler
* @param {Ext.form.BasicForm} form
* @param {Ext.form.Action} action
* @private
*/
,onFailure:function(form, action)
{
window.location.href = "index.php";
} // eo function onSuccess
/**
* Shows Message Box with error
* @param {String} msg Message to show
* @param {String} title Optional. Title for message box (defaults to Error)
* @private
*/
,showError:function(msg, title)
{
title = title 'Error';
Ext.Msg.show({
title:title
,msg:msg
,modal:true
,icon:Ext.Msg.ERROR
,buttons:Ext.Msg.OK
});
} // eo function showError
}); // eo extend
Thanks
What should I use to empty one cell like below?
cell11 cell12
cell21 cell22
cell31 empty
cell41 cell42
cell51 cell52
Here I change the ,layout:'column' in formPanel. But the other things I kept as it is. So I get the layout same as my posted image. How I should change other things so I can get proper lay out?
I need some thing like..
Label1 : [textbox1] Label4 : [textbox4]
Label2 : [textbox2] [textbox5]
Label3 : [dropdown1]
Thanks in advance
Hiral
Can you give example for this? When I try to do it, it shows me like attached image.
Thanks
I am new in Ext JS.
I am facing one problem in column layout.
Here i want to display column layout in my form.
I wants to display four textfield in a one row followed by Label.
But I am not getting proper layout. Below is my code.
var form = new Ext.FormPanel({
baseCls: 'x-plain',
labelAlign: 'left',
labelWidth:120,
bodyStyle:'padding:20px',
items: [{
layout:'form',
anchor: '100%',
baseCls: 'x-plain',
border: false,
items: [txtTemplate]
},{
layout:'form',
anchor: '100%',
baseCls: 'x-plain',
border: false,
items: [cmbModule]
},//End of Template
{
xtype:'fieldset',
checkboxToggle:true,
title: 'Threshold',
autoHeight:true,
defaults: {width: 50},
/*defaultType: 'textfield',*/
collapsed: true,
layout: 'column',
items:
[{
columnWidth:.1,
layout: 'form',
baseCls: 'x-plain',
border: false,
fieldLabel:'IP4 Start'
},{
columnWidth:.1,
layout: 'form',
baseCls: 'x-plain',
border: false,
xtype:'textfield',
fieldLabel: 'Fax',
name: 'fax',
allowBlank: false
/*items: [txtIPv41]*/
},{
columnWidth:.1,
layout: 'form',
baseCls: 'x-plain',
border: false,
xtype:'textfield',
fieldLabel: 'Fax',
name: 'fax',
allowBlank: false
/*items: [txtIPv43]*/
},{
columnWidth:.1,
layout: 'form',
baseCls: 'x-plain',
border: false,
xtype:'textfield',
fieldLabel: 'Fax',
name: 'fax',
allowBlank: false
/*items: [txtIPv44]*/
},{
columnWidth:.1,
layout: 'form',
baseCls: 'x-plain',
border: false,
xtype:'textfield',
fieldLabel:':',
/* items: [txtIPv42]*/
}]
},//End of Module
/*
{
layout: 'column',
baseCls: 'x-plain',
anchor: '100%',
border: true,
items:
[
{
columnWidth:.4,
layout:'form',
baseCls:'x-plain',
border:false,
items:[txtIPv61]
}
,
{
columnWidth:.2,
layout:'form',
baseCls:'x-plain',
border:false,
items:[txtIPv62]
}
,
{
columnWidth:.2,
layout:'form',
baseCls:'x-plain',
border:false,
items:[txtIPv63]
}
,
{
columnWidth:.2,
layout:'form',
baseCls:'x-plain',
border:false,
items:[txtIPv64]
}
]
}
*/
] //Panel Form Items End
});
var window = new Ext.Window({
title: 'Interface',
width: 450,
height: 280,
iconCls:'icon-prefs',
resizable: false,
layout: 'fit',
plain:true,
draggable:false,
buttonAlign:'center',
closeAction:'hide',
items: [form]
});
window.show();
And my output looks like attached file
I am not getting label at the beginning of that textfield.
Please help me.
Thanks in Advance
Ext.namespace('customersForm');
customersForm.Form = Ext.extend(Ext.form.FormPanel, {
locationId: 0,
constructor: function(config){
config = Ext.apply({
xtype: "form",
layout: 'column',
border: false,
url: 'data/form.json.php',
monitorValid: true,
baseParams: {
form: 'client',
filter: this.locationId
},
reader: new Ext.data.JsonReader({
root: 'data',
successProperty: 'success',
id: 'id'
}, Ext.data.Record.create([{
name: 'id'
}, {
name: 'company',
type: 'string'
}, {
name: 'phone'
}, {
name: 'phone_ext'
}, {
name: 'fax',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'url'
}, {
name: 'terms'
}, {
name: 'purchaseOrderRequired'
}, {
name: 'client_class_id'
}, {
name: 'client_statuses_id'
}])),
items: [{
columnWidth: .5,
border: false,
layout: 'form',
defaultType: 'textfield',
defaults: {anchor: "95%"},
items: [{
fieldLabel: "Company",
name: "company"
}, {
fieldLabel: "Phone",
name: "phone"
}, {
fieldLabel: "Phone Ext",
name: "phone_exe"
}, {
fieldLabel: "Fax",
name: "fax"
}, {
fieldLabel: "Email",
name: "email"
}]
}, {
columnWidth: .5,
border: false,
layout: 'form',
defaultType: 'textfield',
defaults: {anchor: "95%"},
items: [{
fieldLabel: "Url",
name: "url"
}, {
fieldLabel: "Terms",
name: "terms"
}, {
xtype: "checkbox",
fieldLabel: "PO# Required",
boxLabel: "Check for Yes",
name: "purchaseOrderRequired"
}, {
fieldLabel: "client_class_id",
name: "client_class_id"
}, {
fieldLabel: "client_statuses_id",
name: "client_statuses_id"
}]
}],
keys: {
key: [10, 13],
fn: this.submitForm,
scope: this
},
buttons: [{
text: 'Update',
handler: this.submitForm,
scope: this
}]
}, config);
customersForm.Form.superclass.constructor.call(thi s, config);
},
submitForm: function(){
this.getForm().submit({
method: 'POST',
url: 'data/form.json.save.php',
waitTitle: 'Connecting',
waitMsg: 'Sending data...',
success: function(form, action){
alert('success');
},
failure: function(form, action){
alert('fail');
form.reset();
},
scope: this
});
},
onRender: function(){
// call parent
customersForm.Form.superclass.onRender.apply(this, arguments);
this.baseParams.filter = this.locationId;
this.getForm().load();
} // eo function onRender
});
Ext.reg('customersForm', customersForm.Form);
#If you have any other info about this subject , Please add it free.# |
