ext的table布局的例子(个人觉得目前最适用的布局方法)

 

周末对ext布局进行了研究，发现以前觉得比较麻烦的东西，现在看来十分简单。ext的使用不是特别困难，但是如何才可以保证ext可以满足各种变态的页面需求的同时又可以使开发人员不去接触一堆一堆的js呢？这个问题肯定是个难题。

   还是贴点代码。下面的代码实现了利用table模式布局FormPanel。解决了在非form模式下label不能显示的问题，但是还是存在问题，例如通常情况下“开始日期”和“结束日期”一般只占一个column，也就是两个元素各占半个column。

 

这是主要代码，源代码是网上转载来的。

 

<script type="text/javascript">
    function getBodyWidth(){
        return document.body.clientWidth-15;
    }
    
    function func_submit_onclick(){
        alert('hello');
    }
    var _bodyWidth = getBodyWidth();
	//var _bodyWidth=900;
    var _columns = 3 * 2;
    var _perWidth = _bodyWidth/_columns;
    
    Ext.onReady(function(){
        
        Ext.QuickTips.init();
        var tableForm=new Ext.FormPanel({
            name:'tableForm',
            id:'tableForm',
            frame:true,
			//width:_bodyWidth+30,
            layout:'table', 
            style:'height:100%',
			//bodyStyle: 'padding:8px 0 0 0;' ,    //上－右－下－左
            layoutConfig: {columns:_columns},
            title:'TableForm',
            defaults:{border:false,bodyStyle: 'padding:8px 0 0 0;',
					  layout:'form',frame:false,labelAlign:'right',labelWidth:75,width:_perWidth*2,height:30
			} 
        });
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});

        tableForm.add({colspan:1,width:_perWidth,items:{xtype:'datefield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:1,width:_perWidth,labelAlign:'center',items:{xtype:'datefield',fieldLabel:'to',anchor:'100%'}});
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});

		tableForm.add({colspan:2,items:{xtype:'hidden',fieldLabel:'First Name',anchor:'100%'}}); //隐藏列，用于空白列布局
        tableForm.add({colspan:4,width:_perWidth*4,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>

 

第一种方式

posted @ 2010-03-31 21:21  niky  阅读(10527)  评论(0)    收藏  举报