ext

转自：http://blog.opendigest.org/show-162-1.html

Extjs 中的xtype与类的对应关系及功能




xtype                  Class           
基本组件：                                                                
box                    Ext.BoxComponent                      具有边框属性的组件
button                Ext.Button                                      按钮
colorpalette      Ext.ColorPalette                            调色板
component       Ext.Component                            组件
container          Ext.Container                                容器
cycle                 Ext.CycleButton
dataview          Ext.DataView                                数据显示视图
datepicker       Ext.DatePicker                              日期选择面板
editor                Ext.Editor                                       编辑器
editorgrid         Ext.grid.EditorGridPanel              可编辑的表格
grid                   Ext.grid.GridPanel                         表格
paging              Ext.PagingToolbar                         工具栏中的间隔
panel                Ext.Panel                                        面板
progress          Ext.ProgressBar                            进度条
splitbutton        Ext.SplitButton                               可分裂的按钮
tabpanel           Ext.TabPanel                                 选项面板
treepanel         Ext.tree.TreePanel                         树
viewport           Ext.ViewPort                                  视图
window             Ext.Window                                   窗口
工具栏组件：
toolbar              Ext.Toolbar                                    工具栏
tbbutton            Ext.Toolbar.Button                         按钮
tbfill                   Ext.Toolbar.Fill                               文件
tbitem               Ext.Toolbar.Item                            工具条项目
tbseparator      Ext.Toolbar.Separator                  工具栏分隔符
tbspacer          Ext.Toolbar.Spacer                       工具栏空白
tbsplit               Ext.Toolbar.SplitButton                 工具栏分隔按钮
tbtext                Ext.Toolbar.TextItem                     工具栏文本项
表单及字段组件：
form                  Ext.FormPanel Form                     面板
checkbox         Ext.form.Checkbox checkbox       录入框
combo             Ext.form.ComboBox combo         选择项
datefield          Ext.form.DateField                        日期选择项
field                  Ext.form.Field                                 表单字段
fieldset            Ext.form.FieldSet                           表单字段组
hidden             Ext.form.Hidden                             表单隐藏域
htmleditor        Ext.form.HtmlEditor html               编辑器
numberfield     Ext.form.NumberField                   数字编辑器
radio                Ext.form.Radio                               单选按钮
textarea           Ext.form.TextArea                          区域文本框
textfield            Ext.form.TextField                          表单文本框
timefield           Ext.form.TimeField                         时间录入项
trigger              Ext.form.TriggerField                      触发录入项
Tags: extjs




form表单：转自http://zxe-llh-163-com.iteye.com/blog/833135

Ext.onReady(function(){
 //提示信息初始化
 Ext.QuickTips.init();
 /*//创建一个窗口，将注册窗口放到里面去
 var panel = new Ext.Window({
  bodyStyle:"center",
  renderTo:Ext.getBody()
 });*/
 
 var jsons = [
              {cid:1,cname:"长沙"},
              {cid:2,cname:"株洲"},
              {cid:3,cname:"湘潭"},
              {cid:4,cname:"衡阳"}
             ];
 
 //创建代理
 var proxy1 = new Ext.data.MemoryProxy(jsons);
 
 var city = Ext.data.Record.create([
       {name:"cid",type:"int",mapping:"cid"},
       {name:"cname",type:"String",mapping:"cname"}
 ]);
 
 //创建reader
 var reader1 = new Ext.data.JsonReader({},city);
 
 //远程调用的JSON数据
 var reader = new Ext.data.JsonReader({},
   [{name:"username",type:"String",mapping:"username"},
   {name:"password",type:"String",mapping:"password"},
   {name:"sex",type:"String",mapping:"sex"},
   {name:"love",type:"String",mapping:"love"}]
 );
 //创建Store
 var store1 = new Ext.data.Store({
  proxy:proxy1,
  reader:reader1,
  autoLoad:true
 });
 
   var combobox = new Ext.form.ComboBox({
  //renderTo:Ext.getBody(),
  triggerAction:"all",
  store:store1,
  displayField:"cname",
  valueField:"cid",
  mode:"local",
  emptyText:"请选择湖南城市"
 });
 //panel的子类formPanel,做一个登录的窗口==================================================
 var formPanel = new Ext.form.FormPanel({
  //url:'',//表单提交的地址
  method:"post",
  baseParams:{extra:"中华人民共和国",id:100},//隐藏表单域传值
  defaultType:"textfield",//下面的items没有定义xtype属性时，默认为textfield
  title:"会员注册",//标题
  width:500,//宽度
  height:400,//高度
  bodyStyle:"padding:6px",//正文区域样式
  frame:true,
  labelAlign:"right",
  items:[
       //文本域
       new Ext.form.TextField({
          name:"username",
          allowBlank:false,
          width:200,
          fieldLabel:"用户名",
          labelAlign:"right"
          //regex:/^\w{6,}$/自定义的规则
         }),
      //密码域
         {
          name:"password",//密码
          width:200,
          allowBlank:false,//是否允许为空
          inputType:"password",//输入类型
          xtype:"textfield",//相当于new Ext.form.textField
          fieldLabel:"密码",//文本框提示信息
          labelAlign:"right"
         },
      //单选按钮组
      new Ext.form.RadioGroup({
          name:"sex",
         fieldLabel:"性别",
         items:[
              new Ext.form.Radio({
               name:"radSex",//单选按钮的属性
               checked:true,//是否被选中
               boxLabel:"男",//显示值
               inputValue:"man"//实际值
              }),
              new Ext.form.Radio({
               name:"radSex",//单选按钮的属性
               boxLabel:"女",
               inputValue:"woman"
              })
         ],
         width:100
        }),
      //复选框组
      new Ext.form.CheckboxGroup({
       name:"love",
       fieldLabel:"我的爱好",
       items:[
            new Ext.form.Checkbox({
             name:"lovely",
             boxLabel:"看EXT",
             inputValue:"girl",
             checked:true
            }),  
            new Ext.form.Checkbox({
             name:"lovely",
             boxLabel:"上网",
             inputValue:"internet"
            }), 
            new Ext.form.Checkbox({
             name:"lovely",
             boxLabel:"钓鱼",
             inputValue:"fish"
            }), 
            new Ext.form.Checkbox({
             name:"lovely",
             boxLabel:"打牌",
             inputValue:"card"
            })
       ],
       width:300
      }),
      //数字框
      new Ext.form.NumberField({
       fieldLabel:"最喜欢的数字",
       width:200,
       name:"numName"
      }),
       new Ext.form.TextField({
        name:"urladdress",
        allowBlank:false,
        width:200,
        fieldLabel:"个人喜欢的网站",
        labelAlign:"right",
        vtype:"url"
        
       }),
       new Ext.form.TextField({
        name:"email",
        width:200,
        allowBlank:false,
        fieldLabel:"个人邮箱",
        labelAlign:"right",
        vtype:"email"
        
       }),
      //下拉选项
      combobox
      ,
      //家庭地址，文本域
      new Ext.form.TextArea({
       name:"familyAddress",
       fieldLabel:"家庭地址",
       width:250,
       height:50
      }),
      //时间点选择器
      new Ext.form.TimeField({
       name:"workTime",
       xtype:"timefield",
       fieldLabel:"上班时间",
       increment:30,//增长间隔
       format:"H:i",//格式
       minValue:"6:00",//最小时间
       maxValue:"21:00"//最晚时间
      }),
      //在线编辑器
     /* new Ext.form.HtmlEditor({
       name:"htmlEdit",
       fieldLabel:"在线编辑器",
       height:150,
       enableLists:false,
       enableSourceEdit:false
      }),*/
      //上传文件域
      new Ext.form.TextField({
       name:"photo",
       fieldLabel:"上传照片",
       inputType:"file",
       width:"300px"
      })
  ],
  buttons:[{
   text:"用户注册",
   tooltip:"点击此按钮<br>进行用户注册",
   tooltipType:"qtip",
   handler:function(){
    var username = formPanel.getForm().findField("username").getValue();
    var password = formPanel.getForm().findField("password").getValue();
    Ext.MessageBox.alert("提示信息",username+"正在登录,密码为:"+password);
    //提交表单是以AJAX提交的(默认)
    /*formPanel.getForm().submit({
     success:function(){
     },
     failure:function(){
     }
    });*/
   }
  },{
   text:"重置",
   tooltip:"点击此按钮,<br>您填写的值将会被清空",
   tooltipType:"qtip",
   handler:function(){
       formPanel.getForm().reset();//重置表单
   }
  },{//用本地的数据初始化
   text:"本地数据",
   tooltip:"点击此按钮,<br>表格将会被本地数据初始化",
   tooltipType:"qtip",
   handler:function(){
    var json = {
      username:"朱湘鄂",
      password:"123123",
      sex:"woman",//单选按钮不支持中文
      love:"card"
    };
       formPanel.getForm().setValues(json);//重置表单
   }
  },{//用本地的数据初始化
   text:"远程数据",
   tooltip:"点击此按钮,<br>表格将会远程数据被初始化",
   tooltipType:"qtip",
   handler:function(){
       formPanel.getForm().reader = reader;//
       formPanel.load({url:"../formJson"});
   }
  }],
  buttonAlign:"center",
  renderTo:Ext.getBody()
 });
 
 
});