ext的table布局的例子(个人觉得目前最适用的布局方法)
2010-03-31 21:21
381 查看
周末对ext布局进行了研究,发现以前觉得比较麻烦的东西,现在看来十分简单。ext的使用不是特别困难,但是如何才可以保证ext可以满足各种变态的页面需求的同时又可以使开发人员不去接触一堆一堆的js呢?这个问题肯定是个难题。
还是贴点代码。下面的代码实现了利用table模式布局FormPanel。解决了在非form模式下label不能显示的问题,但是还是存在问题,例如通常情况下“开始日期”和“结束日期”一般只占一个column,也就是两个元素各占半个column。
这是主要代码,源代码是网上转载来的。
我打算扩展用于三种界面显示,1:全屏的行列显示;2:局部区域的行列显示;3:嵌套于其他容器(比如window)的行列显示;
第一种方式
还是贴点代码。下面的代码实现了利用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>
我打算扩展用于三种界面显示,1:全屏的行列显示;2:局部区域的行列显示;3:嵌套于其他容器(比如window)的行列显示;
第一种方式
相关文章推荐
- ext的另一个table布局的例子
- 一个很简单的C#例子,给网友解答的,总觉得应该有更简单的方法
- html -- div table布局 -- 加 布局简单例子
- 用div实现像table一样的布局方法
- (iOS开发)tableview自带的删除方法(8.0之后适用)
- linux qt tableview 例子使用方法
- SenchaExt中的DataView实现table布局效果
- TableCellCollection.GetEnumerator 方法的C#例子
- QT中结合实际例子谈谈QTableWidget中布局控件的方法
- 务虚:大局观、方法与关键点 个人经历例子说明 一种工作应对解决的方法
- 个人总结/IPC方法的优缺点和适用场景
- Ext布局之TableLayout表格布局实例
- [导入]一个很简单的C#例子,给网友解答的,总觉得应该有更简单的方法
- ext实例:FormPanel布局例子,可以一行多列
- [html5入门-15]Html布局中简单的table的制作方法
- table中tr的display:block显示布局错乱问题解决方法
- 动态添加布局(个人觉得还算不错,查了很多资料,网上没有我要的,所以写出来)
- iOS ScrollView实现自动布局的方法(适用Swift 3.0 )
- 周末对ext布局进行了研究,发现以前觉得比较麻烦的东西,现在看来十分简单
- Ext使用form布局时 使用hide()方法或者setVisible()隐藏textfile 等组件 filedLable不隐藏问题