<script type="text/javascript">
function getBodyWidth(){
return document.body.clientWidth-15;
}
function func_submit_onclick(){
alert('hello');
}
var _bodyWidth = getBodyWidth();
var _columns = 3;
var _perWidth = _bodyWidth/_columns;
Ext.onReady(function(){
Ext.QuickTips.init();
var tableForm=new Ext.FormPanel({
name:'tableForm',
id:'tableForm',
frame:true,
layout:'table',
style:'height:100%',
layoutConfig: {columns:_columns},
title:'TableForm',
defaults:{layout:'form',labelAlign:'right',width:_perWidth}
});
tableForm.add({colspan:1,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
tableForm.add({colspan:1,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
tableForm.add({colspan:1,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
tableForm.add({colspan:1,items:{xtype:'datefield',fieldLabel:'First Name',anchor:'100%'}});
tableForm.add({colspan:1,items:{xtype:'datefield',fieldLabel:'to',anchor:'100%'}});
tableForm.add({colspan:1,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
tableForm.add({colspan:1,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
tableForm.add({colspan:1,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
tableForm.addButton({text:'submit',handler:func_submit_onclick});
tableForm.addButton({text:'cancel'});
tableForm.render(Ext.getBody());
});
</script>
原文:
<script type= "text/javascript" > |
02 | function getBodyWidth(){ |
03 | return document.body.clientWidth-15; |
06 | function func_submit_onclick(){ |
09 | var _bodyWidth = getBodyWidth(); |
12 | var _perWidth = _bodyWidth/_columns; |
14 | Ext.onReady( function (){ |
17 | var tableForm= new Ext.FormPanel({ |
25 | layoutConfig: {columns:_columns}, |
27 | defaults:{border: false ,bodyStyle: 'padding:8px 0 0 0;' , |
28 | layout: 'form' ,frame: false ,labelAlign: 'right' ,labelWidth:75,width:_perWidth*2,height:30 |
31 | tableForm.add({colspan:2,items:{xtype: 'textfield' ,fieldLabel: 'First Name' ,anchor: '100%' }}); |
32 | tableForm.add({colspan:2,items:{xtype: 'textfield' ,fieldLabel: 'First Name' ,anchor: '100%' }}); |
33 | tableForm.add({colspan:2,items:{xtype: 'textfield' ,fieldLabel: 'First Name' ,anchor: '100%' }}); |
35 | tableForm.add({colspan:1,width:_perWidth,items:{xtype: 'datefield' ,fieldLabel: 'First Name' ,anchor: '100%' }}); |
36 | tableForm.add({colspan:1,width:_perWidth,labelAlign: 'center' ,items:{xtype: 'datefield' ,fieldLabel: 'to' ,anchor: '100%' }}); |
37 | tableForm.add({colspan:2,items:{xtype: 'textfield' ,fieldLabel: 'First Name' ,anchor: '100%' }}); |
38 | tableForm.add({colspan:2,items:{xtype: 'textfield' ,fieldLabel: 'First Name' ,anchor: '100%' }}); |
40 | tableForm.add({colspan:2,items:{xtype: 'hidden' ,fieldLabel: 'First Name' ,anchor: '100%' }}); |
41 | tableForm.add({colspan:4,width:_perWidth*4,items:{xtype: 'textfield' ,fieldLabel: 'First Name' ,anchor: '100%' }}); |
43 | tableForm.addButton({text: 'submit' ,handler:func_submit_onclick}); |
44 | tableForm.addButton({text: 'cancel' }); |
46 | tableForm.render(Ext.getBody()); |