沉睡森林@漂在北京

          本處文章除注明“轉載”外均為原創,轉載請注明出處。

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            152 隨筆 :: 4 文章 :: 114 評論 :: 0 Trackbacks
             周末對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>



          posted on 2008-11-09 22:47 王總兵 閱讀(4488) 評論(2)  編輯  收藏 所屬分類: Ext

          評論

          # re: Ext下利用table方式布局FormPanel 2009-04-21 09:10 fas
          http://ppw308593.14.112idc.com/read.php?tid=4  回復  更多評論
            

          # re: Ext下利用table方式布局FormPanel 2010-08-02 15:12 madStone_l
          搞一張效果圖呀。  回復  更多評論
            

          主站蜘蛛池模板: 小金县| 鄯善县| 桂平市| 呼和浩特市| 景德镇市| 阿坝| 安多县| 丰台区| 正阳县| 昆明市| 棋牌| 松阳县| 丹东市| 韶山市| 清丰县| 武定县| 资兴市| 化州市| 荆州市| 庆安县| 五常市| 河北省| 江川县| 营山县| 柳河县| 汾西县| 天峨县| 松原市| 凌云县| 锡林郭勒盟| 六盘水市| 沭阳县| 阿巴嘎旗| 云浮市| 望都县| 郑州市| 化州市| 宜良县| 九寨沟县| 崇信县| 皮山县|