注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我的博客

 
 
 

日志

 
 
关于我

风流茶说合,酒是色媒人,古往今来,浪涛依旧,我辈今朝,叱咤风云,

网易考拉推荐

ext的另一个table布局的例子  

2010-03-31 11:10:40|  分类: ext |  标签: |举报 |字号 订阅

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"><!-- GC -->
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    function getBodyWidth(){
        return document.body.clientWidth-15;
    }
   
    function func_submit_onclick(){
        alert('hello');
    }
    var _bodyWidth = getBodyWidth();
    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,
            layout:'table',
            style:'height:100%',
            layoutConfig: {columns:_columns},
            title:'TableForm',
            defaults:{border:false,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: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>
    </body>
</html>
  评论这张
 
阅读(238)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017