PHP Code:
Form.Person = function(pRender,....){
var form1=new Ext.form.FormPanel({
id:2,
url:'Person.htm',
trackResetOnLoad:true,
bodyStyle:'padding:5px 5px 0',
reader: new Ext.data.JsonReader({
root: 'rows',
id: 'id',
totalProperty: 'results'
},[
{name: 'INTN_ID', mapping: 'INTN_ID'},
.........
.........
]),
items:[
new Ext.form.FieldSet({
title:'Address Data',
labelAlign: 'top',
labelSeparator:'',
bodyStyle:'padding:5px 5px 0',
height:340,
width:460,
items:[
//New Line
{
layout:'column',
border:false,
items:[
{
width:125,
layout:'form',
border:false,
items:[
new Ext.form.TriggerField({
fieldLabel: 'SSN',
triggerClass :'x-form-search-trigger',
name: 'SSN',
allowBlank:true,
width:100,
labelSeparator:'',
maxLength : 20,
ctCls :'x-form-item',
onTriggerClick:function(){
}
})
]},
{
width:145,
layout:'form',
id:'relationship',
border:false,
items:[
{
xtype:'combo',
fieldLabel: 'Relationship To Ppt',
name: 'RLTN_TO_PART',
displayField:'RLTN_TO_PART_DSCR',
valueField:'RLTN_TO_PART',
hiddenName:'RLTN_TO_PART',
labelSeparator:'',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Pick One',
allowBlank:false,
selectOnFocus:true,
forceSelection:true,
width:140,
ctCls :'x-form-item'
}
]},
{
width:120,
layout:'form',
border:false,
items:[
{
xtype:'checkbox',
boxLabel : 'Confidential',
labelSeparator:'',
name: 'CNFDTL',
id:'cnfdtl',
ctCls :'x-form-item'
}
]}
]
},
//New Line
{
id:"Name",
layout:'column',
border:false,
items:[
{
width:50,
layout:'form',
border:false,
items:[
{
xtype:'combo',
displayField:'title',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'',
allowBlank:true,
selectOnFocus:true,
fieldLabel: 'Title',
name: 'FRST_NM_PFX',
labelSeparator:'',
forceSelection:true,
width:45,
ctCls :'x-form-item'
}
]},
{
width:75,
layout:'form',
border:false,
items:[
{
xtype:'textfield',
fieldLabel: 'First',
allowBlank:true,
name: 'FRST_NM',
labelSeparator:'',
width:70,
maxLength : 50,
ctCls :'x-form-item'
}
]},
{
width:75,
layout:'form',
border:false,
items:[
{
xtype:'textfield',
fieldLabel: 'Middle',
name: 'MID_INIT',
labelSeparator:'',
width:70,
maxLength : 50,
ctCls :'x-form-item'
}
]},
{
width:110,
layout:'form',
border:false,
items:[
{
xtype:'textfield',
fieldLabel: 'Last',
name: 'LAST_NM',
allowBlank:true,
labelSeparator:'',
width:105,
maxLength : 50,
ctCls :'x-form-item'
}
]},
{
width:45,
layout:'form',
border:false,
items:[
{
xtype:'combo',
displayField:'suffix',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'',
selectOnFocus:true,
fieldLabel: 'Suffix',
name: 'LAST_NM_SFX',
labelSeparator:'',
forceSelection:true,
width:40 ,
ctCls :'x-form-item'
}
]}
]
},
//New Line
{
id:"Agency",
layout:'column',
border:false,
items:[
{
width:350,
layout:'form',
border:false,
items:[
{
xtype:'textfield',
fieldLabel: 'Agency',
name: 'AGENCY',
labelSeparator:'',
width:350,
maxLength : 50,
ctCls :'x-form-item'
}
]}
]
}
,
//New Line
{ xtype:'textfield',
fieldLabel: 'Address',
name: 'ADDR_LINE_1',
labelSeparator:'',
width:265,
maxLength : 50,
ctCls :'x-form-item' //Overwrite the css to get the line higher up
},
//New Line
{ xtype:'textfield',
hideLabel: true,
name: 'ADDR_LINE_2',
labelSeparator:'',
width:265,
maxLength : 50,
ctCls :'x-form-item' //Overwrite the css to get the line higher up
},
//New Line
{ xtype:'textfield',
hideLabel: true,
name: 'ADDR_LINE_3',
labelSeparator:'',
width:265,
maxLength : 50,
ctCls :'x-form-item' //Overwrite the css to get the line higher up
},
//New Line
{ xtype:'textfield',
hideLabel: true,
name: 'ADDR_LINE_4',
labelSeparator:'',
width:265,
maxLength : 50,
ctCls :'x-form-item' //Overwrite the css to get the line higher up
},
//New Line
{ xtype:'textfield',
hideLabel: true,
name: 'ADDR_LINE_5',
labelSeparator:'',
width:265,
maxLength : 50,
ctCls :'x-form-item' //Overwrite the css to get the line higher up
},
//New Line
{
layout:'column',
border:false,
items:[
{
width:105,
layout:'form',
border:false,
items:[
{
xtype:'textfield',
fieldLabel: 'City',
name: 'CITY_NM',
labelSeparator:'',
width:100 ,
maxLength : 50,
ctCls :'x-form-item'
}
]},
{
width:55,
layout:'form',
border:false,
items:[
{
xtype:'combo',
displayField:'abbr',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'',
selectOnFocus:true,
fieldLabel: 'State',
name: 'ST_CD',
forceSelection:true,
labelSeparator:'',
width:50 ,
ctCls :'x-form-item'
}
]},
{
width:95,
layout:'form',
border:false,
items:[
{
xtype:'textfield',
fieldLabel: 'Zip + 4',
name: 'PSTL_CD',
labelSeparator:'',
width:90 ,
maxLength : 10,
ctCls :'x-form-item'
}
]},
{
width:55,
layout:'form',
border:false,
items:[
{
xtype:'combo',
displayField:'abbr',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'',
selectOnFocus:true,
fieldLabel: 'Country',
name: 'CTRY_CD',
forceSelection:true,
labelSeparator:'',
width:50 ,
ctCls :'x-form-item'
}
]},
{
width:35,
layout:'form',
border:false,
items:[
{
xtype:'textfield',
name: 'INTN_ID',
fieldLabel: 'id',
allowBlank:true,
width:35,
readOnly:true,
style:"background-color:red",
ctCls :'x-form-item'
}
]},
{
width:35,
layout:'form',
border:false,
items:[
{
xtype:'textfield',
name: 'ORDR_ID',
fieldLabel: 'oid',
allowBlank:true,
width:35,
readOnly:true,
style:"background-color:yellow",
ctCls :'x-form-item'
}
]},
{
width:35,
layout:'form',
border:false,
items:[
{
xtype:'textfield',
name: 'CLNT_ID',
fieldLabel: 'clnt',
allowBlank:true,
width:35,
readOnly:true,
style:"background-color:green",
ctCls :'x-form-item'
}
]}
]
},
//New Line
{
layout:'column',
border:false,
items:[
{
width:105,
layout:'form',
border:false,
items:[
{
xtype:'textfield',
fieldLabel: 'Phone',
name: 'PHN_NMBR',
labelSeparator:'',
width:100 ,
maxLength : 25,
ctCls :'x-form-item'
}
]},
/*{
width:70,
layout:'form',
border:false,
items:[
{
xtype:'radio',
fieldLabel: 'Gender',
boxLabel:'Female',
name: 'GDR',
id:'genderfemale',
labelSeparator:'',
inputValue: 'F',
ctCls :'x-form-item'
}
]},
{
width:70,
layout:'form',
border:false,
items:[
{
xtype:'radio',
fieldLabel: ' ',
boxLabel:'Male',
fieldLabel: ' ',
name: 'GDR',
id:'gendermale',
labelSeparator:'',
inputValue: 'M',
ctCls :'x-form-item'
}
]},*/
{
width:255,
layout:'form',
border:false,
items:[
{
xtype:'textfield',
fieldLabel: 'Email',
name: 'EMAL_ADDR',
labelSeparator:'',
width:250 ,
maxLength : 100,
ctCls :'x-form-item'
}
]}
]
}
]
})
]}
)
pform.render(Ext.get(pRender));
};
--------------------
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}), {
region:'east',
title: 'Test',
collapsible: true,
split:true,
width: 150,
minSize: 150,
maxSize: 400,
layout:'fit',
autoScroll:true,
items: new Ext.DataView({
id:'dvHist',
store: lrDS,
tpl: lrTpl ,
autoHeight:true,
autoWidth:true,
itemSelector:''
})
},
new Ext.grid.GridPanel({
region:'west',
id:'gridSearch',
title:'Search',
split:true,
width: 250,
height:500,
minSize: 250,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
stripeRows:true,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
multiSelect: false,
store: searchDS,
columns: [
{header: "Name",width:150, dataIndex: 'NAME', sortable: true},
{header: "Client",width:100, dataIndex: 'CLNT_NM', sortable: true}
] ,
tbar: [
new Ext.form.ComboBox({
id:"typSelect",
store: frmTypeTypeDS,
displayField:'code',
valueField:'code',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Type',
selectOnFocus:true,
typeAhead:true,
forceSelection:true,
width:60
}),
new Ext.form.ComboBox({
id:"cbClientSelect",
store: clientDS,
displayField:'CLNT_NM',
valueField:'CLNT_ID',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Client',
selectOnFocus:true,
typeAhead:true,
forceSelection:true,
width:100
}),' ',
new Ext.app.SearchField({
id:'searchfld',
store: searchDS,
width:90
})
] ,
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
tabPosition:'bottom',
items:[{
contentEl:'center1',
title: 'Order',
closable:false,
autoScroll:true,
layout:'anchor',
defaults: {autosize:true},
items:[{
title:'Form',
anchor:'100% 30%',
id:'pnlForm',
bodyStyle :'background-color:#f1f1f1',
tbar:[ {
text:"New",
iconCls: 'newForm',
id:'btnNewFrom'
},' ',
{text:"Edit",
iconCls: 'editForm',
id:'btnEditForm',
disabled:'true'
},' ',
{text:"IP",
iconCls: 'ticon',
id:'btnIParty',
disabled:'true'
},' ',
{text:"Ordr",
iconCls: 'newoerd',
id:'btnNewordr',
disabled:'true'
},
{
xtype:'tbseparator',
id:'sptAdmin'
}
,
user_admin =="Y" ?
{text:"Admin",
iconCls: 'settings',
id:'btnClient'
} : ""
],
items: new Ext.DataView({
id:'dvOrder',
store: orderDS,
prepareData:this.prepareOrderData,
tpl: orderTpl ,
autoHeight:true,
autoWidth:true,
itemSelector:''
})
}
,{
title:'AAa',
anchor:'100% 35%',
header:false,
frame:false,
bodyStyle :'background-color:#f1f1f1',
layout:'column',
height:'100%',
id:'layoutAAG',
defaults: {frame:true,autosize:true},
items:[{
iconCls:'picon',
title:'Form1',
id:'pnlfrm',
header:true,
columnWidth: 0.33,
items: new Ext.DataView({
id:'dvPpt',
store: orderDS,
prepareData:this.prepareOrderData,
tpl: pTpl ,
height:'100%',
itemSelector:''
})
},{
iconCls:'aicon',
title:'Form2',
id:'pnlfrm2',
header:true,
columnWidth: 0.33 ,
items: new Ext.DataView({
id:'dvAlt',
store: orderDS,
prepareData:this.prepareOrderData,
tpl: aTpl ,
height:'100%',
itemSelector:''
})
},{
iconCls:'xicon',
title:'frm3',
header:true,
id:'pnlfrm3',
columnWidth: 0.34 ,
items: new Ext.DataView({
id:'dv',
store: DS,
prepareData:this.preparehhData,
tpl: qTpl ,
height:'100%',
itemSelector:''
})
}
]
},{
title:'Parties',
id:'pnlIParty',
bodyStyle :'background-color:#f1f1f1',
iconCls:'ticon',
frame:false,
anchor:'100% 35%',
header:true,
autoScroll:true,
items: new Ext.DataView({
id:'dvTp',
store: iPrtyDS,
prepareData:this.prepareIPartyData,
tpl: iPartyTpl ,
autoHeight:true,
autoWidth:true,
itemSelector:''
})
}]
}/*,{
contentEl:'center2',
title: 'History',
autoScroll:true
}*/]
})
]
});
Form fieldset layout issue
Originally Posted by jgarcia@tdg-i.com
Reply With Quote
