Extjs 学习事例四(formPanel)

Extjs 学习例子四(formPanel)

?

Ext.onReady(function(){Ext.QuickTips.init();    //Ext.form.Field是所有表单输入控件的基类,按属性和功能可以分为三大类://1)页面显示样式//2)控件参数设置//3)数据有效性检验var form = new Ext.form.FormPanel({   labelAlign:'right',   labelWidth:50,   width:600,   title:'form',   frame:true,   items:[{     layout:'column',     items:[{       columnWidth:.7,       xtype:'fieldset',       checkboxToggle:true,       title:'单纯输入',       autoHeight:true,       defaults:{width:300},       defaultType:'textfield',       items:[{  //这里{}相当于一个Field         fieldLabel:'文本',         name:'text'       },{        xtype:'numberfield',         fieldLabel:'数字',         name:'number'       },{         xtype:'combo',         fieldLabel:'选择',         name:'combo',         store:new Ext.data.SimpleStore({           fields:['value','text'],           data:[             ['value1','text1'],             ['value2','text2']           ]         }),//end store         displayField:'text',         valueField:'value',         mode:'local',         //transform:'xxx'//可以在把在HTML中id为xxx的下拉框转化为combBox         emptyText:'请选择'       }, new Ext.form.TriggerField({          fieldLabel:'选择B',          name:'name'       }),{         xtype:'datefield',         fieldLabel:'日期',         name:'date'       },{          xtype:'timefield',          fieldLabel:'时间',          name:'time'       },{          xtype:'textarea',          fieldLabel:'多行',          name:'textarea'       },{          xtype:'hidden',          name:'hidden'       }]     },{       columnWidth:.3,// .3 与 3 的区别       layout:form,       items:[{         xtype:'fieldset',         checkboxToggle:true,         title:'多选',         autoHeight:true,         defaultType:'checkbox',         hideLabel:true,         style:'margin-left:10px;',        // bodyStyle:'margin-left:20px;',         items:[{           boxLabel:'AAAAAA',           name:'check',           value:'1',           checked:true,           width:'auto'         },{           boxLabel:'BBBBBB',           name:'check',           value:'2',           checked:true,           width:'auto'         },{           boxLabel:'CCCCCC',           name:'check',           value:'3',           checked:true,           width:'auto'         },{           boxLabel:'DDDDDD',           name:'check',           value:'4',           checked:true,           width:'auto'         }]       },{          xtype:'fieldset',          checkboxToggle:true,          title:'单选',          autoHeight:true,          defaultType:'radio',          hideLabels:true,          style:'margin-left:10px;',          //bodyStyle:'margin-left:20px',          items:[{          boxLabel:'单选1',          name:"rad",          value:'1',          checked:'true',          width:'auto'          },{            boxLabel:'单选2',          name:"rad",          value:'1',          //checked:'true',          width:'auto'          }]       }]     }]   },{     layout:'form',     labelAlign:'top',     autoWidth:true,     height:200,     items:[{       xtype:'htmleditor',       fieldLabel:'在线编辑器',       id:'editor',       anchor:'98%'     }]   }],   buttons:[{     text:'保存'   },{     text:'读取'   },{     text:'取消'   }]});//建立一个表格var grid = new Ext.grid.GridPanel({  width:300,  autoHeight:true,  title:'grid',  store:new Ext.data.SimpleStore({    data:[      ['name1','male','descn1'],      ['name2','female','descn2']    ],    fields:['name','sex','descn']  }),  columns:[   {header:'姓名',dataIndex:'name'},   {header:'性别',dataIndex:'sex'},   {header:'描述',dataIndex:'descn'}  ],  viewConfig:{    forceFit:true  }});var selectMenu = new Ext.menu.Menu({ // items:[new Ext.menu.Adapter(grid)]//引入Adapter.js});form.render("myid");});