ext--formPanel之column布局

/**
* myuser综合示例测试
*/
 
    Ext.onReady(function(){
    Ext.QuickTips.init();
    //定义序号
         var rownum =new Ext.grid.RowNumberer({header:'NO',width:28});
        
         //定义列模型
         var cm = new Ext.grid.ColumnModel([
             {header:'id',dataIndex:'id',sortable:true,width:200,hidden:true},//隐藏ID列
     rownum,
    {header:'姓名',dataIndex:'name',sortable:true,width:200},
    {header:'爱好',dataIndex:'hobby',sortable:true,width:300},
    {header:'性别',dataIndex:'sex',width:100},
    {header:'出生日期',dataIndex:'birthday',width:100},
    {header:'所在部门',dataIndex:'deptid',width:100}
         ]);
        
         //数据存储器
         var store = new Ext.data.JsonStore({
            url:'myuser.ered?reqCode=findAll',
            root:'ROOT',
            totalProperty:'TOTALCOUNT',
            fields:['id','name','hobby','sex','birthday','deptid']
         });
         store.load();
        
         //表格工具栏
         var tbar = new Ext.Toolbar({
            items:[
              {
                xtype:'textfield',
                id:'name',
                emptyText:'请输入姓名',
                width:150,
                enableKeyEvents:true,
                //响应回车键
                listeners:{
                     specialkey:function(field,e){
                       if(e.getKey()==Ext.EventObject.ENTER){
                         //开始查询
                       }
                     }
                }
              },{
               text:'查询',
               iconCls:'page_findIcon',
               handler:function(){}
              },{
                 text:'刷新',
                 iconCls:'page_refreshIcon',
                 handler:function(){
                    store.reload();
                 }
              },{
               text:'新增',
               iconCls:'addIcon',
               handler:function(){
                  createForm();
                  createWin();
                  myWin.show();//显示窗口
               }
              },{
               text:'修改',
               handler:function(){}
              },{
               text:'保存',
               handler:function(){
                   var m = store.modified.slice(0);
               }
              },{
               text:'删除',
               iconCls:'deleteIcon',
               handler:function(){
               
               }
              }
            ]
         });
     
      //定义表格
      var grid = new Ext.grid.GridPanel({
        title:'myuser信息',
        height:500,
        autoScroll:true,
        frame:true,
        region:'center',
        store:store,
        stripeRows:true,//斑马线
        cm:cm ,//列模型
        tbar:tbar,//工具条
        viewConfig:{forceFit:true},//各列自动填充
        loadMask:{msg:'正在加载myuser数据,请稍等...'}
      });
      //布局模型
      var viewport = new Ext.Viewport({layout:'border',items:[grid]});
          
          
          
     //添加表单
     var myForm;
     function createForm(){
         myForm = new Ext.form.FormPanel({
        labelAlign:'right',
        labelWidth:60,
        title:'form',
        frame:true,
        width:450,
        url:'form.jsp',
        items:[
        { //行1
           layout:'column',
           items:[
               { //列1 ,xtype:'fieldset'
                  columnWidth:.5,layout:'form',title:'第一列',autoHeight:true,defaultType:'textfield',
              items:[
               {fieldLabe:'元素'},
               {fieldLabel:'元素'},
               {xtype:'panel',html:'<br>'},// 空元素，用于分割
               {xtype:'panel',html:'。。。'}
               ]
            },{//列2 ,xtype:'fieldset'
               columnWidth:.5,layout:'form',title:'第二列',autoHeight:true,style:'margin-left:20px;',defaultType:'textfield',
               items:[
                    {fieldLabel:'元素a'},
                    {fieldLabel:'元素b'},
                    {fieldLabel:'元素c'}
                 ]
            }
            ]//行1 items
        
        },{//行2,  xtype:'fieldset',
          title:'第二行唯一列',autoHeight:true,
           items:[
             //唯一列
             {width:345,height:100,xtype:'textarea',fieldLabel:'唯一元素'}
           ]
        }
        ],
        buttons:[{
         text:'按钮',
         handler:function(){
            myForm.getForm.submit();
         }
        }]
        
           });     
      }
      //创建窗口
      var myWin;
      function createWin(){
          myWin = new Ext.Window({
                title:'新增',
                collapsible:true,
                maximizable:true,
                width:500,
                height:400,
                minWidth:200,
                minHeight:100,
                layout:'fit',
                plain:true,
                bodyStyle:'padding:5px',
                buttonAlign:'center',
                constrain : true,//设置窗口是否可以溢出父容器
                items:[myForm] //指定表单
          });
      }    
          
     
    });