ext基本属性

3.面板常用的配置属性

    Ext.panel.Panel
        (1) closable:true //启用关闭功能
        (2) closeAction:'destroy' //设置关闭窗口后的对象处理[destroy销毁面板|hide隐藏面板]
        (3) hideCollapsible:true  //启用面板隐藏面板体功能

        (4) collapsible:true      //是否展开面板体

2.表单的容器
      Ext.form.panel
      容器自动关联 Ext.form.Basic的实例对象,更方便的进行字段的配置
      重要属性

          defautType : "" （设置默认子项的xtype）

   Ext.form.field.Text 文本框(xtype:textfield)
          重要配置项
              width:156,
              allowBlank:false,//不能为空
              labelAlign:'left',
              msgTarget:'side' //在字段的幼斌展示提示信息
              grow:false,//是否在这个表单字段规定长度内，自动根据文字的内容进行伸缩
              selectOnFocus：true, //当字段的内容得到焦点的时候，选择所有文本
              regex : /\d+/g,
              regexText : '请输入数字',
              inputType:'password',//其它类型：email、url等。默认text
              //vType:'IPAddress'用于数据校验,Ext.form.field.VTypes
              //如果校验不是你想要的，可以自定义，如下：
              //custom Vtype for vtype:'IPAddress'
                Ext.apply(Ext.form.field.VTypes, {
                    IPAddress:  function(v) {
                        return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
                    },
                    IPAddressText: 'Must be a numeric IP address',
                    IPAddressMask: /[\d\.]/i //不符合正则的，键盘整么输入，都不起作用
                });
      Ext.form.field.Number
          重要的配置项
              allowDecimals：false,//不能输入小数
              hideTrigger:true,//隐藏框帮边的调节按钮    
              decimalPrecision : 3,//自动四舍五入,保留小数位为3位。
              emptyText：'请输入小数'//默认框内灰色提醒
              //指定范围
              minValue:10,
              maxValue:100,    
              baseChars:'01',//表示框内只能输入0和1        

              step:'0.8',//指定步长

      Ext.form.field.ComboBox
          Ext.view.BoundList 约束列表
          重要属性
              listConfig：{
                //规划下拉框到底是什么样的样式
                //这里面的值是根据BoundList里面的属性进行初始化的
                getInnerTpl:function()
                {
                    return "<div style='color:red'>${name}</div>";//动态改变下拉框内容样式
                }
              } 
              queryMode:'remot', //local(本地数据)|remot(远程数据)
              valueFiled:'id',//后台需要
              displayField:'name'//页面显示的
              forceSelection:true, //必须选中数据集合中有的数据
              minChars:2,//表示输入2个字符的的时候，就到后台请求数据
              queryDelay:400,
              queryParam:'name',//指定往后台传入的参数名称,对应的参数值是你输入的参数
              multiSelect:true, //允许多选
              typeAhead:true,   //自动补全
      Ext.form.field.Date
          重要属性

              disableDays:[0,6] //周日与周六不能选为灰色

7.常用事件
      当字段类型为xtype:'triggerfield',它具有onTriggerClick事件，
      经常用于从其它弹出表格中选择某个值。              
                  
8.常用操作    
      获取表单中某项的值
          var fieldValue = Ext.getCmp('表单id').getForm().findField('字段名称').getValue();     
          
      自动填充表单的各项值
        loadRecord( Ext.data.Model record) : Ext.form.Basic

        Loads an Ext.data.Model into this form by calling setValues with the record data. See also trackResetOnLoad.

  renderTo 渲染到什么地方

重要事件

        itemclick:function(tree,record,item,index,e,options)

3. Ext.data.TreeStore
    重要属性

        defaultRoodId  //指定根节点

renderTo : Mixed 把表格渲染到什么地方，即展示到那个元素里面

frame : Boolean 是否填充渲染这个Panel（渲染的比较好看）

forceFit : true 设定表格列的长度是否自动填充

   （9）tbar: [] 头部工具栏，里面可以放置各种按钮
       （10）bbar：[] 底部操作栏，一般放分页面板 

       （11）dockedItems : Object/Array 更具有位置的灵活性,当你用这个属性时, 可以指定工具条停靠在表格中上下左右位置；可以用来替换tbar与bbar。 

      （12）selType : 'checkboxmodel'/'rowmodel'/'cellmodel',

                             选择模式即选中记录方式：选择框/鼠标单击或双击行选择/鼠标单击或双击单元格选择

                            （用多选框模式时,forceFit属性最好不启用，或则样式不好看）

       （13）multiSelect :true,//允许多选 与上面属性联合属性

  （1）选择模式的根类Ext.selection.Model (通过选择模式里面提供的方法进行操作行的选择)
           重要方法：
                撤销选择 deselect( Ext.data.Model/Index records, Boolean suppressEvent ) : void
                得到选择的数据getSelection( ) : Array
                得到最后被选择数据getLastSelected( ) : void
                判断你指定的数据是否被选择上isSelected( Record/Number record ) : Boolean
                选择你指定的行selectRange( Ext.data.Model/Number startRow, Ext.data.Model/Number endRow, [Boolean keepExisting], Object dir ) : void

                keepExisting true保留已选则的项,false重新选择，不保留已选则的项

 （4）Ext.selection.RowModel      rowmodel 行选择器（通过鼠标单击表的行记录进行选择）
         重要属性
              multiSelect 允许多选
              simpleSelect 单选选择功能

              enableKeyNav 允许使用键盘上下键选择

//json格式的数据
var jsondata = "{id:'01',name:'uspcat.com','age':26,email:'yunfengcheng2008@126.com'}";
//xml格式的数据
var xmldata = "<user><name>mlmlml</name><age>19</age></user>";
//构建Ext的Ajax请求
Ext.Ajax.request({
 url : 'person.jsp',
 method : 'POST',
 timeout :3000,
 
 //请求的参数值
 params:{id:'01'},

 //可以提交form表单，只需要写表单的ID
 form:"myform",
 
 //下面是两种不同格式的请求参数
 jsonData:jsondata,

 xmlData：xmldata,

//get通过dom元素的id方式获得的是元素的对象
//getCmp通过定义对象ID的方式获得的是定义的对象，而不是简简单单的元素了 
//getDom通过dom元素的id方式获得的是dom元素

var time = Ext.get("time").getLoader();

（1）给对象加事件：

Ext.get("元素ID").on("click",function(){
      //函数处理部分

});

Ext.form.TextField基本用法

var textfieldName = new Ext.form.TextField
        ({
              id:"textfieldName",
              
              allowBlank:false,//默认是true,如果是false,就是不允许空
              
              //假如不为空时，定义提示信息　默认的提示信息是：This field is required
              //要使提示内容出现，需要添加 Ext.QuickTips.init();
              blankText:"请输入数据",
              
              disabled:false,//默认是false
              
              emptyText:"请正确输入数据",//默认是null
              
              fieldLabel:"用户名称",//默认是""
              
              height:"auto",//默认是auto
              
              hidden:false,//默认是false
              
              hideLabel:false,//默认是false
              
              hideMode:"offsets",//默认display,可以取值：display，offsets，visibility
              
              inputType:"text",//输入类型 这个很重要，可以是radio, text, password, file 默认是text
              
              invalidText:"invalidText：只能够输入数字",//默认是：The value in this field is invalid
              
              maxLength:100,//能够输入的内容的最大长度
              
              maxLengthText:"输入内容太长了",//超出最大长度的设置信息
              
              minLength:2,//能够输入的内容的最小长度
              
              maxLengthText:"输入内容太短了",//没有达到最小长度的设置信息
              
              readOnly:false,//内容是否只读，默认false
              
              regex:/^\d$/, //正则表达式　这里假设只允许输入数字　如果输入的不是数字　就会出现下面定义的提示信息
              
              regexText:"regexText：只能够输入数字", //定义不符合正则表达式的提示信息
              
              validateOnBlur:true,//默认是true,失去焦点时验证
              
              validationDelay:300,//默认是250,验证延迟时间,毫秒数
              
              validationEvent:"click", //验证事件　默认是keyup　可以是String/Boolean
              
              //自定义的验证函数　当输入的数据不符合正则表达式的要求时，就会执行这个函数
              validator:function(){Ext.Msg.alert("提示信息","只能够输入数字");},
              
              value:"",//自定义的信息　默认是：undefined             
              
              //x:number,y:number,在容器中的x,y坐标    
              
              width:"auto",//默认是auto
              
              renderTo:"Bind_TextField"
            

        });