zoukankan      html  css  js  c++  java
  • 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,
    			//_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,_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,_perWidth,items:{xtype:'datefield',fieldLabel:'First Name',anchor:'100%'}});
            tableForm.add({colspan:1,_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,_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>
    

    第一种方式

  • 相关阅读:
    人月神话阅读笔记01
    第二周总结
    第一周总结
    软件工程课程总结
    FIR滤波器窗函数设计法详细步骤以及Matlab代码
    【转载】傅立叶变换、拉普拉斯变换、Z变换之间的联系?
    Matlab实现IIR数字滤波器设计
    数字信号滤波器的重要函数
    奇异谱分析
    字符串解码DecodeString
  • 原文地址:https://www.cnblogs.com/nikyxxx/p/1701734.html
Copyright © 2011-2022 走看看