ext

最新推荐文章于 2025-10-27 00:00:37 发布

原创最新推荐文章于 2025-10-27 00:00:37 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext

ext 专栏收录该内容

1 篇文章

订阅专栏

转自：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()
 });


});