Extjs 初学者教程连接网址 http://blog.csdn.net/tiemufeng1122/article/details/11151675

时间 2019-11-10

标签 extjs 初学者教程连接网址 http blog.csdn.net blog csdn tiemufeng1122 tiemufeng article details 栏目 HTTP/TCP 繁體版

原文原文链接

学习网址连接

http://blog.csdn.net/jfok/article/details/49446195
http://www.cnblogs.com/hyfeng/tag/Extjs6/javascript

1.面板
    (1)类结构
        Ext.Base
        Ext.AbstractComponent
            Ext.Component
                Ext.Container.AbstractContainer
                    Ext.container.Container
                        Ext.panel.AbstractPanel
                            Ext.panel.Panel
    (2)常见子类
        Ext.window.Window
        Ext.form.panel ---form的panel
        Ext.panel.Table ---grid的panel
        Ext.tab.Panel   ---标签页的panel
        Ext.menu.Menu
        Ext.tip.Tip
        Ext.container.ButtonGroup
    (3)组成面板的部件
           底部工具栏,顶部工具栏,面板头部,面板底部,面板体

2.布局
    (1) Auto自动布局(Ext.layout.container.Auto)
        默认为自动布局，采用布局布局的模式与HTML流式排版相似
    (2) Fit自适应布局(Ext.layout.container.Fit)
        面板里有且只有一个其它面板资源元素，而且填满整个body
    (3) Accordion折叠(即手风琴)布局(Ext.layout.container.Accordion)
        同时会初始化多个面板，当一个面板处于打开状态时，其它面板会处于收起状态
    (4) Card卡片布局(Ext.layout.container.Card)
        它和手风琴布局相似，也有多个面板；不一样之处在于他用按钮来切换（经常使用于导航）
    (5) Anchor描点布局[Ext.layout.container.Anchor]
        根据容器的大小，自适应来为容器的子元素进行布局和定位
            A.百分比
            B.偏移量
            C.参考离边的距离定位
    (6)    多选框布局[Ext.layout.container.CheckboxGroup]
    (7) Column列布局[Ext.layout.container.Column]
        列风格的布局，每一列的宽度能够根据百分比或固定数据来控制
    (8) Table表格布局[Ext.layout.container.Table]
        和传统的HTML的Table布局方式同样，一样具备跨列，跨行的属性。
    (9) Absolute绝对布局[Ext.layout.container.Absolute]
        格局容器X、Y轴的方式绝对定位
    (10) Border边界布局[Ext.layout.container.Border]
        能够控制上、下、左、右、中 (一般用于页面框架的规划)
    (11) 盒子布局
        Ext.layout.container.Box
            Ext.layout.container.HBox 竖排
            Ext.layout.container.VBox 横排
         重要参数
            Box
                flex 具备配置flex的子项，会根据占有剩余总量的比值，来决定本身的大小
                pack 控制子元素展现的位置(start左面--这时候flex生效，center中间，end后面)
                padding 边距
            HBox
                align[top,middle,stretch,stretchmax]
            VBox
                align[left,center,stretch,stretchmax]php

3.面板经常使用的配置属性
    Ext.panel.Panel
        (1) closable:true //启用关闭功能
        (2) closeAction:'destroy' //设置关闭窗口后的对象处理[destroy销毁面板|hide隐藏面板]
        (3) hideCollapsible:true //启用面板隐藏面板体功能
        (4) collapsible:true      //是否展开面板体
        (5)
4.Ext.tab.Panel标签页，一种特殊的布局方式
    经常使用方法
        setActiveTab( Ext.Component card) 设置当前显示的标签页

chart

1.关于图表
    图表的轴(axes)
        (1) 数值轴 Ext.chart.axis.Numeric
        (2) 时间轴 Ext.chart.axis.Time
        (3) 分类轴 Ext.chart.axis.Category
        (4) 仪表轴 Ext.chart.axis.Gauge
    图表的类型
        (1) 折线图 Ext.chart.series.Line
        (2) 柱形图 Ext.chart.series.Column
        (3) 饼状图 Ext.chart.series.Pie
        (4) 条形图 Ext.chart.series.Bar
        (5) 面积图 Ext.chart.series.Area
        (6) 雷达图 Ext.chart.series.Radar
        (7) 散点图 Ext.chart.series.Scatter
        (8) 仪表图 Ext.chart.series.Gauge
    经常使用属性
        highlight高亮，label标题，tips提示，renderer格式化css

Form组件

1.根类
      Ext.form.Basic
    提供了表单组件,字段管理,表单提交,数据加载的功能
2.表单的容器
    Ext.form.panel
    容器自动关联 Ext.form.Basic的实例对象,更方便的进行字段的配置
    重要属性
          defautType : "" （设置默认子项的xtype）
3.数据交互和加载
      Ext.form.action.Action（两种表单自身的提交方式）
          Ext.from.action.Submit Ajax方式提交
              Ext.form.action.StandardSubmit 原始鼻癌单提交方法
          Ext.form,action.DirectLoad
              Ext.form.action.DirectSubmit 相似于dwr的方式提交
4.字段的类型
    Ext.form.field.Base 根类
          混入了的类[Ext.form.field.Field]获得表单的处理功能
        混入了的类[Ext.form.Labelable]获得表单标签错误信息提示功能
        Ext.form.field.Text 文本框方式的以下：
            Ext.form.field.TextArea 富文本域
            Ext.form.field.Trigger 触发器
                  Ext.form.field.Picker 触发器子类（选择器）
                      Ext.form.field.Time
                    Ext.form.field.Date
                    Ext.form.field.Number
                    Ext.form.field.file 文件上传
                    Ext.form.field.ComboBox 选择框
            Ext.form.field.Checkbox 选择框方式的
                Ext.form.field.Radio 单选框
            Ext.form.field.Hidden 特殊的--隐藏字段（数据页面不显示，但后台须要）
    Ext.form.field.HtmlEditor 特殊的--文本编辑框
5.其中夹杂布局的类
      Ext.form.FieldContainer
          Ext.form.CheckboxGroup
              Ext.form.RadioGroup
    Ext.form.Label
          Ext.form.Labelable
    Ext.form.FieldSet
    Ext.form.fieldContainer (里面能够放多个表单项，进行统一布局)
6.经常使用的组件配置
    Ext.form.Panel
          重要的配置项
              title:'',
            bodyStyle:'',
            frame:true,
            height:122,
            width:233,
            renderTo:'',
            defaultType:'',
            defaults:{
                allowBanlk:true,
                msgTarget:'side',
                pageSize:4 //配置这个参数便可在下拉框内一分页的形式操做数据
            },
            因为混入了Ext.form.labelable因此可进行以下配置；
                labelSeparator 字段的名称与值直之间的分隔符
                labelWidth 标签宽度
    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.html

Tree

1. 类结构
    Ext.panel.Panel
        Ext.panel.Table
            Ext.tree.Panel --- 他是和grid彻底同样的

2. 主要配置项
        title 标题
        width 宽
        height 高
        renderTo 渲染到什么地方
        root 控制根节点(Ext.data.Model/Ext.data.NodeInterface)
        animate : Boolean 控制收起和展开是发有动画效果
        store: store 数据集合
        rootVisible : false,//控制显隐的属性
    重要事件
        itemclick:function(tree,record,item,index,e,options)
    重要方法
        expandAll
        collapseAll
        getChecked
        appendChild

3. Ext.data.TreeStore
    重要属性
        defaultRoodId //指定根节点

4. 树形的拖拽（插件）
    Ext.tree.ViewDDPlugin
        alias ：'plugin.treeviewdragdrop'
    须要在tree的panel下面加
        viewConfig:{
            plugins:{
                ptype :'treeviewdragdrop',
                appendOnly:true //加上这个叶子节点之间拖拽时，会弹出图形警告。
            }
        }
    事件
        listeners:{
            drop: function(HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition)
            beforedrop: function(HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition, Function dropFunction)
        }

5. 关于节点的拷贝与粘贴
         重要方法
              updateInfo（把更新的节点属性值，更新显示的界面）

6. 关于删除节点操做
        重要方法
             remove（节点的方法）

7. 多列树的配置
         主要配置项
              columns（与表格同样）

8. 级联选中，以及级联不选中

9. 关于Store的Proxy里的api应用前端

Ext.define("AM.store.deptStore",{
extend:'Ext.data.TreeStore',
defaultRoodId:'root',
proxy:{
  //Proxy里面的api属性，能够存放crud的后台url，经过前台就能够取到
  api:{
   update:"/extjs/extjs!updateDept.action",
   remove:"/extjs/extjs!delDept.action"
  }
  type:'ajax',
  url:'/extjs/extjs!getDept.action',
  reader:'json',
  autoLoad:true
}
});java

Ext.define("AM.view.deptView",{
extend:'Ext.tree.Panel',
alias: 'widget.deptTree',
title : '部门树形',
width : 250,
height: 300,
padding : '5 3 3 10',
rootVisible : false,//控制显隐的属性
config：{
  copyNodes:'' //充当剪切板的做用,临时存放树节点
}
//里面得配置与表格相似
columns:[
  {
   xtype:'treecolumn',
   text:'text',
   width:150,
   dataIndex:'text'
  },{
   text:'info',
   dataIndex:'info'
  }
],
viewConfig:{
  plugins:{
   ptype :'treeviewdragdrop',
   appendOnly:true //加上这个叶子节点之间拖拽时，会弹出图形警告。
  }
  listeners:{
   drop:function(node,data,voerModel,dropPosition,options){
    alert("把："+data.records[0].get('text')+"移动到："+overModel.get('text'));
   }
   beforedrop:function(node,data,overModel,dropPosition,dropFunction){
    if(overModel.get("leaf")) //若是把一个节点拖到一个叶子节点下面时，这时我能够把叶子节点修改成费叶子节点，就能够放了。
    {
     overModel.set('leaf',true);
    }
   }
  }
}
dockedItems:[{
  xtype:'toolbar',
  dock:'left',
  //ui:'footer',
  items:[
   {xtype:'button',text:'add',id:'add'},
   {xtype:'button',text:'copy',id:'copy'},
   {xtype:'button',text:'delete',id:'delete'}
   {xtype:'button',text:'delete',id:'paste'}
  ]
},{
  xtype:'toolbar',
  items:[{
   xtype:'button',
   id:'allopen',
   text:'展开所有'
  },{
   xtype:'button',
   id:'allclose',
   text:'收起所有'
  }]
}],
store:'deptStore'
});node

Ext.define('AM.controller.deptController', {
    extend: 'Ext.app.Controller',
init:function(){
  this.control({
   "deptTree":{
    checkchange:function(node,checked,options){
     if(node.data.leaf == false)
     {
      if(checked){
       //先展开节点
       node.expand();
       //遍历子节点，若是遇到非叶子节点，将递归遍历
       node.eachChild(function(n){
        n.data.checked = true;
        n.updateInfo({checked:true});
       })
      }else
      {
       //先展开节点
       node.expand();
       //遍历子节点，若是遇到非叶子节点，将递归遍历
       node.eachChild(function(n){
        n.data.checked = false;
        n.updateInfo({checked:false});
       })
      }else
      {
       //只要有一个叶子节点没有选中,父节点都不该该选中
       if(!checked){
        node.parentNode.data.checked = false;
        node.parentNode.updateInfo({checked:false});
       }
      }
     }
     var tree = b.ownerCt.ownerCt;
     //获得选中数据集合
     var nodes = tree.getChaecked();
     for(i=0;i<nodes.length;i++)
     {
      nodes[i].remove(true); //删除该节点
     }
   },
      "deptTree button[id=delete]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     //获得选中数据集合
     var nodes = tree.getChaecked();
     for(i=0;i<nodes.length;i++)
     {
      nodes[i].remove(true); //删除该节点
      //经过ajax向后台提交删除数据

      //经过这种方式也是能够自动提交到后台的，不过数据可能不是你所须要的。
         //tree.getStore().getProxy().update(new Ext.data.Operation(
       //{action:'remove'} //你写什，它就会提交那个url，eg：{action:'update'}
      //));

      //本身组装参数Ajax的提交（经常使用）
      Ext.Ajax.request({
       //经过这种方式就能够直接获取到store里面配置的url
       //避免url处处乱写
       //其实就是利用了store的proxy里面已经有的api属性来存放url集合
       url: tree.getStore().getProxy().api['remove'],
       params: {
        id: nodes[i].data.id
       },
       success: function(response){
        var text = response.responseText;
        // process server response here
       }
      });
     }
   },
   "deptTree button[id=copy]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     //获得数据集合
     var nodes = tree.getChaecked();
     if(nodes.length>0){
      //把数据放到剪切板中
      tree.setCopyNodes(Ext.clone(nodes));
      for(i=0;i<nodes.length;i++)
      {
       nodes[i].data.checked = false; //这个只是更新节点的属性值，并无更新显示到页面
       nodes[i].updateInfo();//更新显示到页面
      }
     }
    }
   },
   "deptTree button[id=paste]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     //得到被追加孩子的节点集合
     var checkNodes = tree.getChecked();
     //去剪切板中取数据
     var nodes = tree.getCopyNodes();
     if(checkNodes.length == 1 && nodes.lenght > 0){
      // 被追加孩子的节点
      var node = checkNodes[0];

      for(i=0;i<nodes.length;i++){
       var el = nodes[i].data;
       //在这里能够进行组装数据传入后台
       node.appendChild(el);
      }react

     }else{
      alert("剪切板中没有数据或没有选中节点");
     }
    }
   },

   "deptTree button[id=allopen]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     tree.expandAll();
    }
   },
   "deptTree button[id=allclose]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     tree.collapseAll();
    }
   },
   "deptTree button[id=add]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     var nodes = tree.getChecked();
     if(nodes.length == 1){
      var node = nodes[0];
      node.appendChild({
       checked:true,
       text:'技术架构组',
       id : '0103',
       leaf:true
      });
     }else{
      alert("请您选择一个节点");
     }
    }
   },
   "deptTree":{
    itemclick:function(tree,record,item,index,e,options){
     alert(record.get('id'));
    }
   }
  });
},
views:[
  'deptView'
],
stores :[
  'deptStore'
],
models :[
]
});git

Grid组件

1. 表格面板类Ext.grid.Panel基本属性。（两个别名xtype:gridpanel, grid）github

    重要的配置参数：
       （1）columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn)
        列里面的经常使用配置参数：
                text : String 列的标题默认是""
                dataIndex : String 和Model的列一一对应的
                field: {} //配合插件使用，告诉插件在那一列起做用
                xtype:默认为gridcolumn
                renderer : function(value) //能够列里面值显示以前，作一些改变。

                                                   //参数value就是列的值，我能够在函数处理后，返回其改变后的值。
       （2）title : String 表格的标题，若是不写默认表格是没有头标题那一栏。
       （3）renderTo : Mixed 把表格渲染到什么地方，即展现到那个元素里面。
       （4）width : Number 宽
       （5）height: Number 高
       （6）frame : Boolean 是否填充渲染这个Panel（渲染的比较好看）
       （7）forceFit : true 设定表格列的长度是否自动填充
       （8）store : store 数据集合
       （9）tbar: [] 头部工具栏，里面能够放置各类按钮
       （10）bbar：[] 底部操做栏，通常放分页面板
       （11）dockedItems : Object/Array 更具备位置的灵活性,当你用这个属性时,

                                                     能够指定工具条停靠在表格中上下左右位置；能够用来替换tbar与bbar。

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

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

                            （用多选框模式时,forceFit属性最好不启用，或则样式很差看）
       （13）multiSelect :true,//容许多选与上面属性联合属性
       （14）plugins :[] 插件的形式，为表格添加一些特殊的功能（eg：单元格编辑、行编辑以及行拖拽等）

例子能够参考上面MVC里面view层里面的grid定义。

2. 经常使用表格的列都有哪些类型。

    （1）Ext.grid.column.Column xtype: gridcolumn 普通列

    （2）Ext.grid.column.Action xtype: actioncolumn
        在表格中渲染一组图标按钮,而且为他赋予某种功能，相似于连接
          altText : String 设置应用image元素上的alt
          handler : function(view,rowindex,collndex,item,e);
          icon     : 图标资源地址
          iconCls : 图标样式
          items   : 多个图标的数组   //在使用MVC的时候建议不要用若是你们有好得放大请与uspcat联系
                function(o,item,rowIndex,colIndex ,e)
          stopSelection : 设置是否单击选中不选中

   （3）Ext.grid.column.Boolean xtype: booleancolumn
          falseText,

          trueText

   （4）Ext.grid.column.Date xtype: datecolumn
          format:'Y年m月的日'

   （5）Ext.grid.column.Number xtype: numbercolumn
          format:'0,000'

   （6）Ext.grid.column.Template xtype: templatecolumn
          xtype:'templatecolumn',
          tpl :"${字段的名称}" 能够进行动态的组合字段的值，做为该字段的值。

   （7）Ext.grid.RowNumbererxtype: rownumberer    //显示行号

Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',
frame : true,//面板渲染
width : 1000,
height: 280,
columns : [ //列模式
    Ext.create("Ext.grid.RowNumberer",{}),
    {text:"Name",dataIndex:'name',width:100},
    {text:"age",dataIndex:'age',width:100},
    {text:"email",dataIndex:'email',width:200,
     field:{
      xtype:'textfield',
      allowBlank:false
     }
    },{
     text:'sex',
     dataIndex:'sex',
     width:50,
     DDName:'sy_sex',
     renderer:function(value){
      if(value){
       if(value == "女"){
        return "<font color='green'>"+value+"</font>"
       }else if(value == "男"){
        return "<font color='red'>"+value+"</font>"
       }
      }
     }
    },{
     text:'isIt',
     dataIndex:'isIt',
     xtype : "booleancolumn",
     width:50,
     trueText:'是',
     falseText:'不是'
    },{
     text:'birthday',
     dataIndex:'birthday',
     xtype : "datecolumn",
     width:150,
     format:'Y年m月d日'
    },{
     text:'deposit',
     dataIndex:'deposit',
     xtype:'numbercolumn',
     width:150,
     format:'0,000'
    },{
     text:'描述',xtype:'templatecolumn',
     tpl:'姓名是{name} 年龄是{age}',
     width:150
    },{
     text:'Action',xtype:'actioncolumn',
     id:'delete',
     icon:'app/view/image/table_delete.png',
     width:50//,
//     items :[
//     {},{}
//     ]
//     handler:function(grid,row,col){
//     alert(row+" "+col);
//     }
    }
],
tbar :[
    {xtype:'button',text:'添加',iconCls:'table_add'},
    {xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},
    {xtype:'button',text:'修改',iconCls:'table_edit'},
    {xtype:'button',text:'查看',iconCls:'table_comm'}
],
dockedItems :[{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true
}],
plugins:[
    Ext.create("Ext.grid.plugin.CellEditing",{
     clicksToEdit : 2 //单击几下
    })
],
selType:'checkboxmodel',//设定选择模式
multiSelect:true,//运行多选
store : 'Users',
initComponent:function(){
  this.callParent(arguments);
}
});

3. 选择模型Ext.selection.Model的用法（嵌套在一些高级组件使用）以及表格的一些特性功能。

选择模型Ext.selection.Model的用法

    （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从新选择，不保留已选则的项

   （2）隐藏了一个单元格的选择模式 selType: 'cellmodel'    (从这发现的Ext.grid.plugin.CellEditing)
           重要方法
                获得被选择的单元格getCurrentPosition() Object
                    Ext.JSON.encode()
                    itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object options )

                selectByPosition({"row":5,"column":6}) 很实用，选中你要特殊处理的数据单元格

   （3） Ext.selection.CheckboxModel 多选框选择器
        重要方法

   （4）Ext.selection.RowModel      rowmodel 行选择器（经过鼠标单击表的行记录进行选择）
         重要属性
              multiSelect 容许多选
              simpleSelect 单选选择功能
              enableKeyNav 容许使用键盘上下键选择

表格的一些特性功能

   （1）Ext.grid.feature.RowBody 表格的行体（在行的下面来一个空白行，显示你所须要的信息）
          重要方法
                getAdditionalData( Object data, Number idx, Ext.data.Model record, Object orig ) : void
                若是你要展现这个面板那么必须复写这个方法
                features: [
                        Ext.create("Ext.grid.feature.RowBody",{
                            getAdditionalData:function(data,idx,record,orig){
                                ......
                            }
                        })
                ],
                2.必须返回行体的对象
                var headerCt = this.view.headerCt,
                    colspan = headerCt.getColumnCount();
                return {
                    rowBody: "",
                    rowBodyCls: this.rowBodyCls,
                    rowBodyColspan: colspan
                };

   （2）Ext.grid.feature.AbstractSummary negative 可以在表格数据的最后作一些统计功能。

                                                                   （eg：统计某一列的平局值等）
          Ext.grid.feature.Summary
               实用方法是在
                    第一步
                    features: [{
                        ftype: 'summary'
                    }],
                    第二步
                    columns中配置summaryType: 'count', (count,sum,min,max,average)
                    summaryRenderer: function(value, summaryData, dataIndex) {
                       return Ext.String.format(' : '+value);
                    }
    用于对某一列，进行求平均值等。

   （3）Ext.grid.feature.Grouping
          在store中设置能够分组的属性
            groupField : ' '
          在view中增长代码
            Ext.create("Ext.grid.feature.Grouping",{
                    groupByText : "职业分组",
                    groupHeaderTpl : "职业{name} 一共{rows.length}人",
                    showGroupsText : "展现分组",
                    startCollapsed : true

            }

（4）其它功能:

重要事件
                  groupclick
          groupdblclick
          groupcontextmenu
          groupexpand
                  groupcollapse

（5）Ext.grid.feature.GroupingSummary

（6）Ext.grid.feature.Chunking

Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',
frame : true,//面板渲染
width : 1100,
height: 450,
features: [
  Ext.create("Ext.grid.feature.RowBody",{
      getAdditionalData: function(data, idx, record, orig) {
          var headerCt = this.view.headerCt,
              colspan = headerCt.getColumnCount();
          return {
              rowBody: record.get('email'),
              rowBodyCls: this.rowBodyCls,
              rowBodyColspan: colspan
          };
      }
  }),{
   ftype: 'summary'
  },Ext.create("Ext.grid.feature.Grouping",{
     groupByText : "性别分组",
     groupHeaderTpl : "性别{name} 一共{rows.length}人",
     showGroupsText : "展现分组"

  })
],
columns : [ //列模式
    Ext.create("Ext.grid.RowNumberer",{}),
    {text:"Name",dataIndex:'name',width:100},
    {text:"age",dataIndex:'age',width:100,
     summaryType:'average',
     summaryRenderer: function(value, summaryData, dataIndex) {
              return Ext.util.Format.number(value,"00.0")
           }
    },
    {text:"email",dataIndex:'email',width:200,
     field:{
      xtype:'textfield',
      allowBlank:false
     }
    },{
     text:'sex',
     dataIndex:'sex',
     width:50,
     DDName:'sy_sex',
     renderer:function(value){
      if(value){
       if(value == "女"){
        return "<font color='green'>"+value+"</font>"
       }else if(value == "男"){
        return "<font color='red'>"+value+"</font>"
       }
      }
     }
    },{
     text:'isIt',
     dataIndex:'isIt',
     xtype : "booleancolumn",
     width:50,
     trueText:'是',
     falseText:'不是'
    },{
     text:'birthday',
     dataIndex:'birthday',
     xtype : "datecolumn",
     width:150,
     format:'Y年m月d日'
    },{
     text:'deposit',
     dataIndex:'deposit',
     xtype:'numbercolumn',
     width:150,
     format:'0,000'
    },{
     text:'描述',xtype:'templatecolumn',
     tpl:'姓名是{name} 年龄是{age}',
     width:150
    },{
     text:'Action',xtype:'actioncolumn',
     id:'delete',
     icon:'app/view/image/table_delete.png',
     width:50//,
//     items :[
//     {},{}
//     ]
//     handler:function(grid,row,col){
//     alert(row+" "+col);
//     }
    }
],
tbar :[
    {xtype:'button',text:'添加',iconCls:'table_add'},
    {xtype:'button',id:'del',text:'删除',iconCls:'table_remove'},
    {xtype:'button',text:'修改',iconCls:'table_edit'},
    {xtype:'button',text:'查看',iconCls:'table_comm'},
    {xtype:'button',id:'selection',text:'selection',iconCls:'table_comm'}
],
dockedItems :[{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true
}],
plugins:[
    Ext.create("Ext.grid.plugin.CellEditing",{
     clicksToEdit : 2
    })
],
//selType:'rowmodel',//设定选择模式
selType:'cellmodel',
//multiSelect:true,//运行多选
//enableKeyNav :true,
store : 'Users',
initComponent:function(){
  this.callParent(arguments);
}
});

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
init:function(){
  this.control({
   'userlist':{
    itemclick:function(View, record, item, index, e, options ){
     var sm = View.getSelectionModel();//.getSelection();
        //alert(Ext.JSON.encode(sm.getCurrentPosition()));
     sm.selectByPosition({"row":1,"column":2});
    }
   },
   'userlist button[id=selection]':{
    click:function(o){
     var gird = o.ownerCt.ownerCt;
     var sm = gird.getSelectionModel();
     //sm.deselect(0);
     //alert(sm.getLastSelected().get('name'))
     //alert(sm.isSelected(0));
     //sm.selectRange(1,2,true);
     sm.selectByPosition({"row":2,"column":3});
    }
   },
   'userlist button[id=del]':{
    click:function(o){
     var gird = o.ownerCt.ownerCt;
      var data = gird.getSelectionModel().getSelection();
      if(data.length == 0){
       Ext.Msg.alert("提示","您最少要选择一条数据");
      }else{
       //1.先获得ID的数据(name)
       var st = gird.getStore();
       var ids = [];
       Ext.Array.each(data,function(record){
        ids.push(record.get('name'));
       })
       //2.后台操做(delet)
       Ext.Ajax.request({
        url:'/extjs/extjs!deleteData.action',
        params:{ids:ids.join(",")},
        method:'POST',
        timeout:2000,
        success:function(response,opts){
         Ext.Array.each(data,function(record){
          st.remove(record);
         })
        }
       })
       //3.前端操做DOM进行删除(ExtJs)
      }
    }
   },
   "userlist actioncolumn[id=delete]":{
    click : function(o,item,rowIndex,colIndex ,e){
     alert(rowIndex+" "+colIndex);
    }
   }
  });
},
views:[
  'List'
],
stores :[
  "Users"
],
models :[
  "User"
]
});

4.插件使用以及其它的特性使用。

（1）可编辑插件的根 Ext.grid.plugin.Editing
        Ext.grid.plugin.Editing
   Ext.grid.plugin.CellEditing 这个不讲(以前课程讲过)
             保存修改的两种办法：
             a、设立保存按钮,用户单击的时候保存数据

                st.sync(); //数据与后台进行同步，通常不用，他会把整个记录传到后台
                           //若是不写这句，下面的语句是得不到数据的
                var records = st.getUpdatedRecords();
                Ext.Array.each(records,function(model){
                    model.commit(); //前台的小红点会消失
                });

                咱们能够selectModel来得到修改的数据，组装后在日后台传入。

            b.注册edit事件
                e.record.commit(); //前台的小红点会消失
        Ext.grid.plugin.RowEditing
             使用方法:(有Bug推荐4.0.1a版本仍是不要用这个功能)
             Ext.create('Ext.grid.plugin.RowEditing', {
                    clicksToEdit: 1
       })

（2）Ext.grid.plugin.DragDrop 表格拖拽
       主意:配置有变化
       viewConfig:{
          plugins:[
            Ext.create('Ext.grid.plugin.DragDrop', {
                ddGroup:'ddTree', //拖放组的名称
                dragGroup :'userlist', //拖拽组()名称
                dropGroup :'userlist' //释放租名称
                enableDrag:true, //是否启用
                enableDrop:true
            })]
   }
      处理事件
      listeners: {
        drop: function(node, data, dropRec, dropPosition) {
              var st = this.getStore();
              for(i=0;i<st.getCount();i++){
                  st.getAt(i).set('index',i+1);
              }
        }
      }

（3）Ext.toolbar.Paging 分页组件

       //第一种经常使用分页
     dockedItems: [{
          xtype: 'pagingtoolbar',
          store: store,
          dock: 'bottom',
          displayInfo: true
      }],

      //第二种分页的形式(条状，拨动分页)
      Ext.Loader.setPath('Ext.ux', 'http://www.cnblogs.com/../extjs4/examples/ux');
      Ext.require([
          'Ext.ux.data.PagingMemoryProxy',
          'Ext.ux.SlidingPager'
      ]);
      bbar: Ext.create('Ext.PagingToolbar', {
         pageSize: 10,
         store: store,
         displayInfo: true,
         plugins: Ext.create('Ext.ux.SlidingPager', {}) ---- 重点是这
      })

（4）Ext.grid.property.Grid
      属性配置框面板
      当经过页面自动配置一些属性时候了能够考虑用

（5）列锁定
      {text:"age",dataIndex:'age',width:100,locked:true},相似于excel里的冻结功能

（6）复杂表头
       列里面又包含列(不能和字段过滤一块儿使用)
       columns：{
          text:'other',columns:[
            {text:"age",dataIndex:'age',width:100,locked: true},
            {text:"int",dataIndex:'index',width:100}]
      }

（7）字段过滤
    Ext.require([
        'Ext.ux.grid.FiltersFeature'
    ]);
    Ext.define("AM.class.filters",{
        alias: 'widget.filters',
        ftype: 'filters',
            encode: false,
            local: true,
            filters: [{
                    type: 'boolean',
                    dataIndex: 'visible'
                }
         ]
    })
    view层中
    features: [Ext.create("AM.class.filters")],
    列中添加配置{filterable: true,text:"age",dataIndex:'age',width:100,filter: {type: 'numeric'}}

Ext.define("AM.util.filters",{
alias: 'widget.filters',
ftype: 'filters',
        encode: false,
        local: true,
        filters: [{
                type: 'boolean',
                dataIndex: 'visible'
            }
     ]
})

Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',
frame : true,//面板渲染
width : 500,
height: 380,
columns : [ //列模式
    //{text:"Name",dataIndex:'name',width:100,locked:true},
    {text:"Name",dataIndex:'name',width:100},
    //{text:'others',columns:[
     {text:"age",dataIndex:'age',width:100,filterable: true,filter: {type: 'numeric'}},
     {text:"email",dataIndex:'email',width:250,
      field:{
       xtype:'textfield',
       allowBlank:false
      }
     },{
      text:'index',dataIndex:'index',width:100
     }
    //]}
],
features: [Ext.create("AM.util.filters")],
tbar :[
    {xtype:'button',text:'添加',iconCls:'table_add'},
    {xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},
    {xtype:'button',text:'修改',iconCls:'table_edit'},
    {xtype:'button',text:'查看',iconCls:'table_comm'},
    {xtype:'button',text:'save',id:'save',iconCls:'table_comm'}
],
dockedItems :[{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true,
    plugins: Ext.create('Ext.ux.SlidingPager', {})
}],
//plugins:[
//    Ext.create("Ext.grid.plugin.CellEditing",{
//     clicksToEdit : 2
//    })
//    Ext.create('Ext.grid.plugin.RowEditing', {
//              clicksToEdit: 1
//          })
//],
viewConfig:{
  plugins:[
         Ext.create('Ext.grid.plugin.DragDrop', {
         ddGroup:'ddTree', //拖放组的名称
             dragGroup :'userlist', //拖拽组名称
             dropGroup :'userlist', //释放租名称
             enableDrag:true, //是否启用
             enableDrop:true
         })],
  listeners: {
        drop: function(node, data, dropRec, dropPosition) {
                var st = this.getStore();
                for(i=0;i<st.getCount();i++){
                    st.getAt(i).set('index',i+1);
              }
        }
    }
},
//selType:'checkboxmodel',//设定选择模式
//multiSelect:true,//运行多选
store : 'Users',
initComponent:function(){
  this.callParent(arguments);
}
});

MVC学习

从这个图中咱们能够很清楚的看到M 、V、C在ExtJS4.0里面所对应数据类型。

靠右边是对应的代码结构。

下描述一下这model、store、view、controller以及application这几者之间的关系。

（1）application：它是MVC的入口，用来告诉ExtJS到那里去找对应js文件以及启动加载controller与view连个模块的代码。

//打开动态加载js功能
Ext.Loader.setConfig({
  enabled:true
});
Ext.application({
  name : 'AM',//应用的名字 (根) 利用MVC时这时定义的包路径须要与命名空间的层次关系一致
  appFolder : "app",//应用的目录
  launch:function(){//当前页面加载完成执行的函数
         Ext.create('Ext.container.Viewport', { //简单建立一个试图（填充整个浏览器）
         layout:'auto',//自动填充布局
             items: {
             xtype: 'userlist', //引用已经定义的别名进行初始化类
                 title: 'Users',
                 html : 'List of users will Go here'
             }
         });
  },
  controllers:[
   'Users'
  ]
});

（2）controller：这一层主要是用来处理业务逻辑，即View上一些动做所触发要执行的操做都在此实现。同时它也是关联view、store以及model的地方。

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
init:function(){
  this.control({
   'userlist button[id=delete]':{
    click:function(o){
     var gird = o.ownerCt.ownerCt;
      var data = gird.getSelectionModel().getSelection();
      if(data.length == 0){
       Ext.Msg.alert("提示","您最少要选择一条数据");
      }else{
       //1.先获得ID的数据(name)
       var st = gird.getStore();
       var ids = [];
       Ext.Array.each(data,function(record){
        ids.push(record.get('name'));
       })
       //2.后台操做(delet)
       Ext.Ajax.request({
        url:'/extjs/extjs!deleteData.action',
        params:{ids:ids.join(",")},
        method:'POST',
        timeout:2000,
        success:function(response,opts){
         Ext.Array.each(data,function(record){
          st.remove(record);
         })
        }
       })
       //3.前端操做DOM进行删除(ExtJs)
      }
    }
   }
  });
},
views:[
  'List' //必须是文件名称
],
stores :[
  "Users" //
],
models :[
  "User" //这个就是store里面引用的model，所在js文件的名字，保持和定义model的类名同样。eg:AM.model.User
         //（这个主要是给store层用的，当store在当前缓存中找不到指定命名空间定义的model时，再去加载User.js文件，
         //再根据文件内容初始化定义model。若是缓存中已经有了model的定义，其实这个是能够不要的。）
      //一样views、store均可以经过各类各样的工厂生成，来去掉。
]
});

（3）model、store：它们俩主要作为模型数据层。主要是给view层提供数据展现的。

//User数据集合
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
storeId: 's_user',
proxy:{
     type:'ajax',
     url:'/extjs/extjs!getUserList.action',
     reader: {
         type: 'json',
         root: 'topics'
     },writer:{
   type:'json'
  }
},
autoLoad: true //很关键
});

（4）view：这一层主要负责页面展现，也是确确实实能看见的一层。

<SPAN style="COLOR: #008000">Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',//别名定义
frame : true,//面板渲染
width : 600,
height: 280,
columns : [ //列模式
    {text:"Name",dataIndex:'name',width:100},
    {text:"age",dataIndex:'age',width:100},
    {text:"email",dataIndex:'email',width:350,
     field:{
      xtype:'textfield',
      allowBlank:false
     }
    }
],
tbar :[
    {xtype:'button',text:'添加',iconCls:'table_add'},
    {xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},
    {xtype:'button',text:'修改',iconCls:'table_edit'},
    {xtype:'button',text:'查看',iconCls:'table_comm'}
],
dockedItems :[{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true
}],
plugins:[
    Ext.create("Ext.grid.plugin.CellEditing",{
     clicksToEdit : 2
    })
],
selType:'checkboxmodel',//设定选择模式
multiSelect:true,//运行多选
store : 'Users',
initComponent:function(){
  this.callParent(arguments);
}
});

</SPAN>

Ext事件机制、AJax以及Ext经常使用类

1. Ext事件机制

（1）事件的3中绑定方式

HTML/DHTML

DOM

EXTJS

（2）Ext.util.Observable 事件的基类

它为全部支持事件机制的extjs组建提供事件的支持。

若是咱们本身建立新的组建须要有时间的支持那么咱们就继承它。

事件的分类：

标准事件[键盘按钮按下,鼠标的单击双击,滑过滑动]。

业务事件[当面板收起的时候触发,当组建被销毁的时候触发,当每个对象的属数值不为空的时候触发]。

（3）addManagedListener 收管制的监听

它是由调用的组建管理的,当组建执行了销毁命令的时候全部被组建管制的事件所有销毁。

（4）relayEvents 事件的分发和传播(控制实现事件在不一样空间或对象内的传播)

好比说孩子喝完三鹿就去医院呀,老爸就要带着去医院

（5）事件对象Ext.EventObject

不是一个单例,不能被直接new出来,他会存活早事件处理的函数中

（6）事件管理器Ext.EventManager

它能够更方便的为页面元素绑定事件处理函数

方法:addListener 为元素增减事件

2. Ext中的Ajax是 Ext.data.Connection的一个子类，提供了用简单的方式进行Ajax的功能实现

（1）主要方法:

abort : 终止一个没有完成Ajax请求

isLoading : 判断指定的Ajax请求是否是正在运行

paresStatus : 返回请求响应的代码

request : 发送服务器请求

//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,

//一些操做的函数，第一个为响应的值，第二个参数是请求的参数值
success :function(response , options){
alert(eval(response.responseText)[0].name);
},
failure :function(response , options){
alert(response.responseText+" "+options)
}
});

（2）Ext.ElementLoader:方便咱们从新构建页面

load方法

startAutoRefresh 方法

//get经过dom元素的id方式得到的是元素的对象
//getCmp经过定义对象ID的方式得到的是定义的对象，而不是简简单单的元素了
//getDom经过dom元素的id方式得到的是dom元素
var time = Ext.get("time").getLoader();

//ajax经常使用的局部改变元素的值
time.load({
url:'/extjs/extjs!getTime.action',
renderer:function(loader,response,request){
  var time = response.responseText;
  Ext.getDom("time").value = time;
}
});
//给元素设置定时的axja请求方式
i.startAutoRefresh(1000,{
url:'/extjs/extjs!getI.action',
renderer:function(loader,response,request){
  var i = response.responseText;
  Ext.getDom("i").value = i;
}
});

3. Ext以及core包下面的Domhelper、Element类。

（1）Ext.core.Element

API解释

他是组建和控件的基础

他对一个DOM对象的封装(Document Object Model)

a、如何获得Element

Ext.core.Element.fly(String/HTMLElement el, [String named] ) : Element

Ext.get(Mixed el) : Element

b、Element 相关方法

addClsOnClick( String className ) : Ext.core.Element。

addClsOnOver( String className ) : Ext.core.Element。

addKeyMap( Object config ) : Ext.util.KeyMap。

addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) : Ext.util.KeyMap。

appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.core.Element

createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.core.Element。

（2）Ext.core.DomHelper

API解释

他能够很容易的操做页面的HTML.和DOM元素

append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.core.Element--------追加一个孩子。

applyStyles---为元素添加样式 eg：Ext.core.DomHelper.applyStyles(Ext.get("p1"),"color:red");

//下面两个是被当作兄弟追加的

insertAfter( Mixed el, Object o, [Boolean returnElement] ) :

insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) :

//建立dom结构，经过给的标签字符串

createDom( Object/String o ) : HTMLElement

eg：var html = Ext.core.DomHelper.createDom("<h1>hello</h1>");

（3）Ext

//方法是执行在文件加载完以后

onReady( Function fn, Object scope, Boolean withDomReady, Object options ) : void

get()//不在多说

query( String path, [Node root] ) : Array

http://www.w3school.com.cn/xpath/xpath_axes.asp

语法看 Ext.DomQuery

getCmp( String id ) : void---返回组建管理器管理的ID组件

isEmpty( Mixed value, [Boolean allowEmptyString] ) : Boolean

namespace( String namespace1, String namespace2, String etc ) : Object

each( Array/NodeList/Mixed iterable, Function fn, Object scope, Boolean reverse ) : Boolean

apply( Object object, Object config, Object defaults ) : Object

encode( Mixed o ) : String

select( String/Array selector, [Boolean unique], [HTMLElement/String root] )

typeOf( Mixed value ) :判断参数是一个什么样的类型，返回的是字符串，eg：string、function

//这个是直接到页面中得到元素的对象
var div01 = Ext.core.Element.fly("div01");
//鼠标滑过的时候增长一个样式滑出的时候移除样式,值是样式的名称
div01.addClsOnOver("divC");
//这个是直接到Ext.ComponentManagerMap中拿，没有的话，就用第一个到页面中拿，再返回
var input01 = Ext.get("input01");

var fn1 = function(){
alert("单击B按钮调用这个函数")
}
//给一个输入框添加键盘B键响应功能
//key是你要触发的那个键，ctrl是否须要与ctrl键结合，fn是触发函数
input01.addKeyMap({key:Ext.EventObject.B,ctrl:false,fn:fn1,scope:input01});
//和上面一本同样，只是添加更加复杂的，处理起来更加方便
/*第一个触发条件的参数是一个对象(条件能够进行组合):
{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}*/
//第二个是触发函数fn
input01.addKeyListener({key:Ext.EventObject.X,ctrl:true},function(){
alert("单击ctrl+x")
},input01);

function createChild(){
var el = document.createElement("h5");
el.appendChild(document.createTextNode("我是被追加的"));
return el;
}
Ext.get("div02").appendChild(createChild());
//经过构造对象，来建立DOM
Ext.getBody().createChild({
tag:'li',
id:'item1',
html:'我是第一个个节点'
});

3. ExtJS4.0中util包里面的一些工具类用法。

（1）.Ext.util.CSS

Ext.util.CSS.createStyleSheet(".c{color:red}","red");

建立一个样式表，相似于你在css文件里面定义的内容。

Ext.get("d1").addClsOnOver("c");

在鼠标滑过期，动态的给某个元素对象的class赋值为刚刚定义的名为c样式表。

Ext.util.CSS.getRule(".c",true);

得到当前的样式的对象，能够从这个对象得到一些你须要的参数。

Ext.util.CSS.swapStyleSheet("sheet1","1.css");第一个参数是当前引用样式的ID，第二个是也是的URL路劲

动态的切换，你所引用的样式表。（即假如你还有一个样式表2.css，里面1.css定义的样式名称同样，这时你能够用这个函数Ext.util.CSS.swapStyleSheet("sheet2","2.css")把目前引用1.css切换成2.css。）

通常用于不一样风格的样式切换。

注意ID惟一。

Ext.util.CSS.removeStyleSheet("red");

移除当前，页面已经定义了的样式，传入样式的ID便可。

Ext.util.CSS.updateRule(".c","color","#990055");

更新某个已经定义了样式中的某个属性的值。

（2）.Ext.util.ClickRepeater click的转发器是Ext.util.Observable的子类

Ext.onReady(function(){
//控制元素在指定时间内被单击(当前元素没有数失去焦点)
var cl = new Ext.util.ClickRepeater(Ext.get("b4"),{
  delay:3000,//首次单击时候的间隔事件
  interval:4000,//发生首次重复事件调用以后每一次事件的相隔时间
  stopDefault:true,//中止这个el上得默认单击事件
  handler:function(){
   alert("单击我");
  }
});
//第一次单击立刻会触发事件若是不去点击其余的元素那么3秒或就会自定执行第二次
//一或会以4秒的间隔执行相应的程序
})

3）.Ext.util.DelayedTask 代替setTimeout

（4）.Ext.util.Format 格式化的公共类

用于一些字符串经常使用操做、日期以及小数的格式化等。

（5）.Ext.util.MixedCollection 集合类

强大之处在于它同时能够存放各工种各样的对象。而且提供不少操做集合里对象的方法。

（6）.Ext.util.TaskRunner 模拟线程控制

模拟多线程的实现。

Ext.onReady(function(){
var runner = new Ext.util.TaskRunner();
var task = {
  run:function(){
   Ext.getDom("t1").value = Ext.util.Format.date(new Date(),"Y-m-d-s");
  },
  interval:1000
}
runner.start(task);
Ext.get("b6").on("click",function(){

  runner.stop(task);
})
})

Ext4.0新特性以及经常使用数据处理功能

1. extjs4.0对原生JavaScript功能进行了扩展（API中的Utilities模块中的NativeExtensions）

    Utilities：经常使用的一些工具处理类
    Native Extensions
       Ext.Array
       Ext.Number
       Ext.Object
       Ext.String
       Ext.JSON
       Ext.Date
       Ext.Function

具体扩展了那些，请参照具体的API说明，扩展的原理eg：

var Person = {name:'yfc',age:26};
    //alert(Person['name']);
    //extjs4.0提供getKey的函数
    //alert(Ext.Object.getKey(Person,'yfc'));
    Object.prototype.getValue = function(key,defValue){
        if(this[key]){
            return this[key];
        }else{
            return defValue;
        }
    }
alert(Person.getValue("email","pcat@126.com"));
//因为给Object的原型加上了一个getValue的函数，这样全部的对象（都继承Object）默认都会拥有这个函数。

2. 事件机制与新特性

（1）给对象加事件：

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

（2）新特性：create与define（extend 、requires、config、mixins、alias以及statics ）。

create：在ExtJs4.0中你能够经过new方式也能够用create的方式获得一个对象的实例，在4.0版本中建议用create的方式来建立实例，这样ExtJS会对建立的实例进行统一管理。

//create第一个参数为类路径，第二个参数为该类的一些初始化参数值（以对象的形式传递）
var win = Ext.create('Ext.window.Window',{
     width:400,
     height:300,
     title:'uspcat'
       });

win.show();

alias：别名的做用，能够把一个对象的内部函数暴漏处理啊，给其余对象直接调用。eg：

var o = {
say : function(){
alert(11111);
}
}

//经过o.say()调用函数

var fn = Ext.Function.alias(o,'say');
fn();//经过别名的方式咱们就能够直接调用fn()等于o.say()。

define：是用来定义一个类的，eg：

//create第一个参数是类的全路径，第二个参数则是类的内容
Ext.define('Bmsys.ml.Window', {
extend:'Ext.window.Window',
        title: 'Window',
        closeAction: 'hide',
        width: 380,
        height: 300,
        resizable: false,
        modal: true,
        //定义一些本身的扩展参数
        myTitile: 'myWindow',
        setTitle: function(){
              this.title = this.myTitle;
        }

        //初始化的方法(相似Java中的构造方法)
        initComponent: function(){
              this.setTitle();
              this.callParent(arguments);
        }
 });

var win = Ext.create('Bmsys.ml.Window',{
titile: 'youWindow';
}
);

win.show();//此时建立出来窗体的标题是myWindow，说明建立时，传入的初始化参数比构造器先执行。

注意：属性只能在define时定义，不能经过win.myHeight = function(){...}添加属性。

requires: JS的异步加载（按需加载），解决了网络js文件大而形成页面打开慢得问题，只有当成须要用到这个类时Ext才去到后台加载包含这个类的js文件；在这里就要，要求咱们在写js类的时候要尽可能的模块化，一个类就是一个js文件，并且类名与js文件名一致，命名空间定义规范。

//这时候要启用自动加载
Ext.Loader.setConfig({
enabled:true,
paths:{
myApp:'js/Bmsys/ml' //js文件相对路径，须要与命名空间保持一致
}
});

//这时候只要保证Window.js放在js/Bmsys/ml这个目录下命名空间为Bmsys.ml.Window就能够了。
//这时就不须要在JSP文件中引入Window.js,等到下面的程序被执行时，才会根据命名空间去到后台加载Window.js。
//原理就是经过命名空间与文件路径，拼接好后经过写入<script>标签的方式加载。
var win = Ext.create('Bmsys.ml.Window',{
                   titile: 'youWindow',
                   requires: ['Bmsys.ml.Window']
             }
).show();

config: 这个属性就是把你定义类的属性自动的加上get、set方法，省去本身去写的麻烦事。
Ext.define('Bmsys.ml.Window', {
extend:'Ext.window.Window',
        title: 'Window',
        width: 380,
        height: 300,
        //定义一些本身的扩展参数
        myTitile: 'myWindow',
        config: {
              myHeight : 800
        }
});

var win = Ext.create('Bmsys.ml.Window',{});

alert(win.getMyTitle());//报错，没有定义getMyTitle函数
alert(win.getMyHeight());//正常弹出值为800

//放在config里面定义的属性，Ext会自动给这个属性加上get、set方法。
- mixins：类的混合（多继承实现），由于咱们在用define定义类的时候，extend只能继承一个类。为了拥有其它类定义好的方法及功能，咱们能够经过类的混合来实现。
Ext.define("say",{
cansay:function(){
  alert("hello");
}
})
Ext.define("sing",{
sing:function(){
  alert("sing hello 123");
}
})

//经过类的混合，就能够轻松拥有上面两个类里面的函数。
Ext.define('user',{
mixins :{
  say : 'say',
  sing: 'sing'
}
});

var u = Ext.create("user",{});
u.cansay();//say类里面的方法
u.sing();//sing类里面的方法
- static：相似java中静态，咱们能够定义一些静态的属性以及方法，经过类名'.'的方式来访问。
Ext.define('Computer', {
     statics: {
         factory: function(brand) {
             // 'this' in static methods refer to the class itself
             return new this(brand);
         }
     },
     constructor: function() { ... }
});
//直接经过类名'.'的方式访问静态方法
var dellComputer = Computer.factory('Dell');

3. 数据模型model（MVC中的M层）

数据模型对真实世界中对事物在系统中的抽象，extjs4.0中的mode至关于DB中的table 或 JAVA 中的Class。

（1）model的几种建立以及实例的方法。

//咱们利用Ext.define来建立咱们的模型类
//DB table person(name,age,email)
Ext.define("person",{
extend:"Ext.data.Model",
fields:[
  {name:'name',type:'auto'},
  {name:'age',type:'int'},
  {name:'email',type:'auto'}
]
});
//定义的时候，不须要每次写extend:"Ext.data.Model"
Ext.regModel("user",{
fields:[
  {name:'name',type:'auto'},
  {name:'age',type:'int'},
  {name:'email',type:'auto'}
]
});
//实例化咱们的person类
//1.new关键字
var p = new person({
name:'uspcat.com',
age:26,
email:'yunfengcheng2008@126.com'
});
//alert(p.get('name'));
var p1 = Ext.create("person",{
name:'uspcat.com',
age:26,
email:'yunfengcheng2008@126.com'
});
//alert(p1.get('age'));
var p2 = Ext.ModelMgr.create({
name:'uspcat.com',
age:26,
email:'yunfengcheng2008@126.com'
},'person');
alert(p2.get('email'));

//实例不能直接经过getName获得类名，由于这个方法是类的 class object.getClass.getName
//alert(p2.getName());

//经过类.getName能够得到类名，由于person是模型类的定义，而不是实例
alert(person.getName());
（2）model模型Validations以及经过修改原始类来实现自定义验证器。

//在校验以前，修改原始类里属性的默认值
Ext.data.validations.lengthMessage = "错误的长度";

Ext.onReady(function(){
//经过apply方法来在原始的校验器类上扩展咱们自定义验证机制的的一个新的验证方法
Ext.apply(Ext.data.validations,{
     //自定义的校验类型函数
  age:function(config, value){
   var min = config.min;
   var max = config.max;
   if(min <= value && value<=max){
    return true;
   }else{
    this.ageMessage = this.ageMessage+"他的范围应该是["+min+"~"+max+"]";
    return false;
   }
  },
  ageMessage:'age数据出现的了错误'
});
//定义一个带有校验的模型类
Ext.define("person",{
  extend:"Ext.data.Model",
  fields:[
   {name:'name',type:'auto'},
   {name:'age',type:'int'},
   {name:'email',type:'auto'}
  ],
  validations:[
      //type的值就是Ext.data.validations里方法名称
   //field是你要校验字段名
   //field后面的参数就是名称等于type值的函数的参数。
   {type:"length",field:"name",min:2,max:6},
   {type:'age',field:"age",min:0,max:150}
  ]
});
var p1 = Ext.create("person",{
  name:'uspcat.com',
  age:-26,
  email:'yunfengcheng2008@126.com'
});

//经过validate()能够获得数据校验的错误集合
//每一个error里面含有两个属性(field---校验字段的名,message---校验函数返回的错误信息)
var errors = p1.validate();
var errorInfo = [];
errors.each(function(v){
  errorInfo.push(v.field+" "+v.message);
});
alert(errorInfo.join("\n"));
});

注意：自定义的校验器，你能够经过利用apply方法来为原始的类增长，也能够经过继承的方式实现。

（3）数据代理proxy：就是经过与后台的交互来完成数据模型，数据填充的服务类。

Ext.define("person",{
extend:"Ext.data.Model",
fields:[
  {name:'name',type:'auto'},
  {name:'age',type:'int'},
  {name:'email',type:'auto'}
],
//经过代理从后台获取数据（数据要与model的fields里面的字段相对应）
proxy:{
  type:'ajax',
   url:'person.jsp'
}
});
var p = Ext.ModelManager.getModel("person");
//经过load方法来触发proxy加载数据
p.load(1, {
scope: this,
//record.data就是加载进来的一个数据实例对象
success: function(record, operation) {
  alert(record.data.name)
}
});

（4）Molde的一对多和多对一关系。

//类老师
Ext.regModel("teacher",{
fideld:[
  {name:'teacherId',type:"int"},
  {name:'name',type:"auto"}
],
//创建老师与学生的1对多关系
hasMany:{
      //所关联的模型
   model: 'student',
   name : 'getStudent',
   //关系字段
   filterProperty: 'teacher_Id'
}
});
//学生
Ext.regModel("student",{
fideld:[
  {name:'studentId',type:"int"},
  {name:'name',type:"auto"},
  {name:"teacher_Id",type:'int'}
]
});
//假设t是老师的一个实例，就能够经过t.students 获得子类student的一个store数据集合

3. 数据代理Proxy

    数据代理proxy是进行数据读写的主要途径,经过代理操做数据进行CRUD。

CRUD的每一步操做都会获得惟一的Ext.data.Operation实例，它包含了全部的请求参数。经过构造Ext.data.Operation来传入请求参数。

（1）数据代理proxy目录结构

Ext.data.proxy.Proxy 代理类的根类(它分为客户端(Client)代理和服务器代理(Server))

A、Ext.data.proxy.Client 客户端代理

Ext.data.proxy.Memory 普通的内存代理。

Ext.data.proxy.WebStorage 浏览器客户端存储代理（cookie操做）。

Ext.data.proxy.SessionStorage 浏览器级别代理，浏览器关闭数据消失。

Ext.data.proxy.LocalStorage 本地化的级别代理，数据能够保存在浏览器文件里，浏览器关闭后，下次打开还在(不能夸浏览器)。

B、Ext.data.proxy.Server 服务器端代理

Ext.data.proxy.Ajax 异步加载的方式。

Ext.data.proxy.Rest 一种特使的Ajax。

Ext.data.proxy.JsonP 跨域交互的代理（请求的数据url不在同域内），跨域是有严重的安全隐患的，extjs的跨域也是须要服务器端坐相应的配合。

Ext.data.proxy.Direct 命令.

4. 工做在Proxy下的读写器

（1）Reader : 主要用于将proxy数据代理读取的数据按照不一样的规则进行解析,讲解析好的数据保存到Model中

结构图

Ext.data.reader.Reader 读取器的根类

  Ext.data.reader.Json JSON格式的读取器

  Ext.data.reader.Array 扩展JSON的Array读取器

  Ext.data.reader.Xml XML格式的读取器

var userData = {
//读写器默认读取的记录总数的属性
//total : 200,

//采用咱们自定义的变量来标识总条数，这时后须要在读写器中配置total所对应咱们自定义的变量
count:250,
user:[{auditor:'yunfengcheng',info:{
  userID:'1',
  name:'uspcat.com',
  orders:[
   {id:'001',name:'pen'},
   {id:'002',name:'book'}
  ]
}}]
};
//model
Ext.regModel("user",{
fields:[
  {name:'userID',type:'string'},
  {name:'name',type:'string'}
],
//配置一对多的关系
hasMany: {model: 'order'}
});
Ext.regModel("order",{
fields:[
  {name:'id',type:'string'},
  {name:'name',type:'string'}
],
//配置多对一的关系
belongsTo: {type: 'belongsTo', model: 'user'}
});
var mproxy = Ext.create("Ext.data.proxy.Memory",{
model:'user',
data:userData,
//读写时的参数配置
reader:{
  type:'json',//读取的类型（json/xml/array）
  root:'user',//指定读取开始的根节点
  implicitIncludes:true,//是否级联读取关联的子节点（一对多的关系中体现）
  totalProperty:'count',//配置咱们返回的总条数变量名称
  record : 'info'//服务器返回的数据可能很复杂,用record能够筛选出有用的数据信息,装在带Model中，其它的参数忽略。
}
});
//用内存代理来读取数据，其它的方式同样
mproxy.read(new Ext.data.Operation(),function(result){
var datas = result.resultSet.records;
alert(result.resultSet.total);
Ext.Array.each(datas,function(model){
  alert(model.get('name'));
});
var user = result.resultSet.records[0];
var orders = user.orders();
orders.each(function(order){
  alert(order.get('name'))
});
})

（2）Writer ：把前台的js对象数据按照不一样的方式写到后台。
结构图

  Ext.data.writer.Writer

  Ext.data.writer.Json 对象被解释成JSON的形式传到后台

  Ext.data.writer.Xml 对象被解释成XML的形式传到后台

Ext.regModel("person",{
fields:[
  'name','age'
],
proxy :{//在proxy下，你能够配置reader（读），一样也能够配置writer（写）
  type:'ajax',
   url:'person.jsp',
  writer:{//配置一些写的参数
   //type:'json'
   type:'xml' //把js对象以xml的方式，传入后台
  }
}
});
Ext.ModelMgr.create({
name:'uspcat.con',
age:1
},'person').save();

5. Store : 是一个存储数据对象Model的集合缓存,它能够为extjs中的可视化组建提供数据源 (GridPanel,ComboBox)等。（在ExtJS中占有重要的地位，它也属于Model层）

（1）类结构
Ext.data.AbstractStore

Ext.data.Store 没有特殊状况这个类就能够满平常的开发了

Ext.data.ArrayStore

Ext.data.DirectStore

  Ext.data.ArrayStore 内置辅助的类

  Ext.data.JsonStroe 内置辅助的类

Ext.data.TreeStore

（2）Ext.data.Store 使用

  参数

autoLoad(Boolean/Object) ：自动加载数据，自动调用load

data(Array) ：内置数据对象的数组，初始化的是就要被装在

model(Model) ：数据集合相关的模型

fields(Field) ：字段的集合，程序会自动生成对于的Model，这样咱们就不须要再定义model。

  方法

each( Function f, [Object scope] ) : void 变量数据中的Model

Ext.define("person",{
extend:'Ext.data.Model',
fields:[
  {name:'name'},
  {name:'age'}
],
proxy:{
  type:'memory'
}
})
var s = new Ext.data.Store({
//model:'person',
data:[
  {name:'uspcat.com',age:1},
  {name:'yfc',age:26}
],
//有了fields，咱们就不须要在单独定义Model而且引用
fields:[
  {name:'name'},
  {name:'age'}
],
//经过data属性，请偶们已经可以把数据初始化好了
//proxy是动态的区后台去数据
//proxy:{
// type:'ajax',
// url:'person.jsp'
//}
//autoLoad:true
});
s.load(function(records, operation, success){
//遍历
Ext.Array.each(records,function(model){
  alert(model.get('name'));
});
//过滤出字段name='yfc'
s.filter('name',"yfc");
s.each(function(model){
  alert(model.get('name'));
});
//经过正则来查找数据集里面的记录，返回该记录的索引
var index = s.find('name','yfc',0,false,true,false);
alert(s.getAt(index));//当前的Model对象
});

EXTJS的基本概念

1. 组件component : 可以以图形化形式呈现界面的类，其中还能够分为容器组件与元件组件。

容器组件:可以包含其它容器或者元件组件的类，其是进行单元化组件开发的基础
元件组件：能图形化形式表现一个片面功能的组件，其不只在实现了原有传统WEB程序的现有组件，并且还扩展了许多实用的组件，如刻度器、日历、树形列表等。

2. 类

提供功能的非图形可形的类，它们为图形类提供了有力的支持

按其功能可分为：数据支持类(Data)、拖放支持类（DD）、布局支持类（layout）、本地状态存储支持类（state）、实用工具类（Util）。

密封类：不能被扩展的类

原型类：扩展了javascript标准类库中的类

3. 方法

做为类的功能体现，可以产生改变对象自己产生变化的直接因素

方法按访问形式可分为公有方法与私有方法。但因为javascript从原理上根本不支持这种结构，所以在EXTJS中，私有与公有方法彻底凭借着用户自觉，没有像JAVA那样的强制性。

4. 事件

由类定义的，而且能够在类对象自身状态发生改变的触发。

只有被定阅的事件才会有效

若是不须要此事件，应该进行退定，加强程序的执行效率。

5. 配置选项

用以初始化一个EXTJS类对象的手段

注意，配置选项并不必定就是属性，总算是属性，也有可能出现属性返回的类型与你当初指定的配置选项类型不一致的状况。

6. 属性

可以在程序运行期间，可以被访问，用以了解当前类对象的状态。

在实际的编程中，EXTJS的属性设置，比较差劲，须要经过了解其源代码，才能了解各类实用属性的用处。

7. 命名空间

可以将编写好的EXTJS类进行有效组织的手段。

这个也是EXTJS可以称之为优秀AJAX框架的特征之一。

Extjs4布局layout

posted @ 2013-04-27 18:02 赵雪丹阅读(19) 评论(0) 编辑

ExtJs4.0 Grid分頁詳解

網上有好多關於Grid分頁的，各種語言都有，但大部分都是一樣的，都只是講了Grid分頁的語法，不多說到如何和後臺的數據庫交互，查出數據，同樣剛接觸Extjs，但愿和菜鳥級別的兄弟姐妹們，共同進步。

前臺代碼：

var itemsPerPage = 2;
var store = Ext.create('Ext.data.Store', {
autoLoad: { start: 0, limit: itemsPerPage },
fields: ['AA001', 'AA002', 'AA003', 'AA004', 'AA005', 'AA006', 'AA007'],
pageSize: itemsPerPage,
proxy: {
type: 'ajax',
url: 'HandlerFun.ashx?Type=Support',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'total'
}
}

});

var gridHeight = document.body.clientHeight * 19;

Ext.ClassManager.setAlias('Ext.selection.CheckboxModel', 'selection.checkboxmodel');

var grid = Ext.create('Ext.grid.Panel', {
title: '',
renderTo: "grid",
autoWidth: true,
height: gridHeight,
frame: true,
store: store,
multiSelect: false,
selModel: { selType: 'checkboxmodel' }, //在首列實現checkbox，僅此在首列
columns: [

{ header: '單據類別', width: 100, dataIndex: 'AA001', sortable: true },
{ header: '單據號碼', width: 150, dataIndex: 'AA002', sortable: true },
{ header: '單據日期', width: 80, dataIndex: 'AA003', sortable: true },
{ header: '客戶編號', width: 80, dataIndex: 'AA004', sortable: true },
{ header: '客戶分類', width: 80, dataIndex: 'AA005' },
{ header: '聯絡人', width: 80, dataIndex: 'AA006' }
{ header: '電話號碼', width: 80, dataIndex: 'AA007' }

],
bbar: [
{
xtype: 'pagingtoolbar',
store: store,
displayInfo: true
}
]
});
store.load({ params: { start: 0, limit: 2} });

後臺:

分頁原來和之前其余的分頁原理都是一樣的，就是當前是第幾頁，然後每一頁顯示多少條記錄，到數據庫中取出來，然後show出來就Ok了！

因為是.net ，在在.ashx文件中，獲取 start 和limit，有人說start是頁，limit是此頁的數目，其實

，int page表明是頁數，page=start/limit+1 //獲取第幾頁

int beginShowCount ,showCount=page*limit-limit+1; //這是當前頁數的起始位置

int endShowCount ,endShowCount=page*limit； //這是當前頁的結束位置

表達可能很差，解釋一下起始位置，假如每頁顯示2條記錄，那就應該讀兩套記錄。那第一頁就是從第一條記錄到第二條記錄，起始就是第一條記錄，結束就是第二條記錄。

數據庫語句 select * from (select row_number() over (order by AA001) as ID,* from dbo.RegalAA) as b where ID between 1 and 5

把 1 換成 beginShowCount ,5換成 endShowCount就能够了，

JSON對象

private string Dtb2Json(DataTable dtb, int total)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (DataRow row in dtb.Rows)
{
Dictionary<string, object> drow = new Dictionary<string, object>();
foreach (DataColumn col in dtb.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
string str = jss.Serialize(dic);
return "{" + "\"total\":" + total + ",\"rows\":" + str + "}";
// return str;
}

這裡的total是整個全部的記錄的總和哦！在前臺totalProerty那不能寫錯！

後臺代碼：

//當前是第幾頁
string start = context.Request["start"];
int currentpage = int.Parse(start);

//每一頁顯示的數目
string limit = context.Request["limit"];
int pagetotal = int.Parse(limit);
DataTable dt = BLL.GetDataToGridSupport(currentpage,pagetotal);//獲取喲顯示的記錄
DataTable dttotal = BLL.GetDataToGridSupport();//獲取總記錄數
int total = dttotal.Rows.Count;//獲取總記錄數

context.Response.Write(Dtb2Json(dt, total));

posted @ 2013-04-27 17:44 赵雪丹阅读(14) 评论(0) 编辑

Ext Grid表格的自动宽度及高度的实现

但愿Ext的表格能自适应外层的div大小，但Ext的Grid构造函数的width、height项不支持100%的设置方式，因此改用如下方式初始化Grid：

width: Ext.get("content").getWidth(),
height: Ext.get("content").getHeight(),

<div id="content">
    <div id="grid-example"></div>
<div>

#content {
width: 100%;
height: 100%;
}

完整js代码：

// create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'id',header: "序号", width: 50, sortable: true, renderer: keyChange, dataIndex: 'id'},
            {header: "数据表表名", width: 100, sortable: true, renderer: hrefChange, dataIndex: 'tableAlias'},
            {header: "物理表名", width: 100, sortable: true, dataIndex: 'tableName'},
            {header: "类型", width: 75, sortable: true, dataIndex: 'type'}
        ],
        stripeRows: true,
        width: Ext.get("content").getWidth(),
        height: Ext.get("content").getHeight(),
addClass:"grid",
tbar: [{
            text: '新增模版',
            handler : function(){
window.location.href = 'templateDefineList4.html';
            }
            },{
            text: '删除模版',
            handler : function(){

            }
        }],
        bbar: new Ext.PagingToolbar({
            pageSize: 15,
            store: store,
            displayInfo: true,
            displayMsg: '当前显示记录 {0} - {1} 总条数 {2}',
            emptyMsg: '无记录'
        })
    });

posted @ 2013-04-27 17:41 赵雪丹阅读(13) 评论(0) 编辑

ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)

Ext4.0 自带的Ext.ux.RowEditing还不够完善,随手写个ux来用下,

v1.4 2011-09-12 变动内容:

1.重构,修复很多bug以及合并/新增一些配置项(具体看附件中的文档)

2.支持jsduck生成文档 (https://github.com/senchalabs/jsduck)

v1.0 2011.04.27 变动内容:
1.增长canceledit事件
2.增长startAdd方法,方便crud表格的添加操做
3.添加点击取消按钮后,自动重置或删除记录的功能

v1.1 2011.05.03 变动内容:
1.startAdd方法增长position参数,修复autoSync设值的bug
2.配置参数removePhantomsOnCancel更名为autoRecoverOnCancel
3.startEdit前先调用cancelEdit函数,以便正确的恢复现场

v1.2 2011.05.04 变动内容:
1.包名改成Ext.ux.grid.plugin
2.添加配置参数hideTooltipOnAdd
3.判断是否删除新增记录的逻辑优化
4.代码风格等方面的改进

v1.3 2011.05.22 变动内容:

1. 设置clicksToEdit为0,可取消双击/单击事件触发编辑

2. 提供field默认配置,只需给column添加一个fieldType

Js代码

{
text: 'Enable',
dataIndex: 'enable',
width: 80,
renderer: function(v){return v?'Enable':'Disable'},
fieldType: 'checkboxfield',
field: {
boxLabel: 'Enable'
}
}

代码以下:

Js代码

/**
* @class Ext.ux.grid.plugin.RowEditing
* @extends Ext.grid.plugin.RowEditing
* @xtype ux.rowediting
*
* 对Ext原有的RowEditing插件增长新功能.<br/>
* Improve Ext.ux.grid.plugin.RowEditing,add some usefull features.<br/>
*
* @author tz <atian25@qq.com> <br/>
* @date 2011-08-20 <br/>
* @version 1.4 <br/>
* @blog http://atian25.iteye.com <br/>
* @forum http://www.sencha.com/forum/showthread.php?131482-Ext.ux.RowEditing-add-some-usefull-features<br/>
*
*/
Ext.define('Ext.ux.grid.plugin.RowEditing', {
extend: 'Ext.grid.plugin.RowEditing',
alias: 'plugin.ux.rowediting',
/**
* 是否添加记录在当前位置<br/>
* whether add record at current rowIndex.<br/>
* see {@link #cfg-addPosition}
* @cfg {Boolean}
*/
addInPlace: false,
/**
* 添加记录的具体位置 <br/>
* * 当addInPlace为true时,该参数<=0表明当前位置以前,不然表明当前位置以后<br/>
* * 当addInPlace为false时,表明具体的rowIndex,-1则为最后<br/>
* Special rowIndex of added record.<br/>
* * when {@link #cfg-addInPlace} is true, this cfg means before(<=0) or after(>0) current rowIndex.<br/>
* * when {@link #cfg-addInPlace} is false, this cfg means the exact rowIndex.-1 means at the end.
* @cfg {Number}
*/
addPosition: 0,
/**
* 是否点击触发事件,0表明不触发,1表明单击,2表明双击,默认为双击.<br/>
* The number of clicks on a grid required to display the editor (disable:0,click:1,dblclick:2)
* @cfg {Number}
*/
clicksToEdit:2,
/**
* 是否在取消编辑的时候自动删除添加的记录
* if true, auto remove phantom record on cancel,default is true.
* @cfg {Boolean}
*/
autoRecoverOnCancel: true,
/**
* adding flag
* @private
* @type Boolean
*/
adding: false,
autoCancel:true,
/**
* when add record, hide error tooltip for the first time
* @private
* @type Boolean
*/
hideTooltipOnAdd: true,
/**
* register canceledit event && relay canceledit event to grid
* @param {Ext.grid.Panel} grid
* @override
* @private
*/
init:function(grid){
var me = this;
/**
* 取消编辑事件.<br/>
* Fires canceledit event.And will be relayEvents to Grid.<br/>
* @see {@link Ext.ux.grid.RowActions#event-beforeaction} <br/>
* @event canceledit
* @param {Object} context
*/
me.addEvents('canceledit');
me.callParent(arguments);
grid.addEvents('canceledit');
grid.relayEvents(me, ['canceledit']);
},
/**
* 提供默认的Editor配置
* @example
* {header:'手机',dataIndex:'phone',fieldType:'numberfield',field:{allowBlank:true}}
* provide default field config
* @param {String} fieldType 可选值:numberfield,checkboxfield,passwordField
* @return {Object}
* @protected
*/
getFieldCfg: function(fieldType){
switch(fieldType){
case 'passwordField':
return {
xtype: 'textfield',
inputType: 'password',
allowBlank:false
}
case 'numberfield':
return {
xtype: 'numberfield',
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false,
allowBlank:false
}
case 'checkboxfield':
return {
xtype: 'checkboxfield',
inputValue: 'true',
uncheckedValue: 'false'
}
}
},
/**
* Help to config field,just giving a fieldType and field as additional cfg.
* see {@link #getFieldCfg}
* @private
* @override
*/
getEditor: function() {
var me = this;
if (!me.editor) {
Ext.each(me.grid.headerCt.getGridColumns(),function(item,index,allItems){
if(item.fieldType){
item.field = Ext.applyIf(item.field||{},this.getFieldCfg(item.fieldType))
}
},this)
// keep a reference for custom editor..
me.editor = me.initEditor();
}
me.editor.editingPlugin = me
return me.editor;
},
/**
* if clicksToEdit===0 then mun the click/dblclick event
* @private
* @override
*/
initEditTriggers: function(){
var me = this
var clickEvent = me.clicksToEdit === 1 ? 'click' : 'dblclick'
me.callParent(arguments);
if(me.clicksToEdit === 0){
me.mun(me.view, 'cell' + clickEvent, me.startEditByClick, me);
}
},
/**
* 添加记录
* add a record and start edit it (will not sync store)
* @param {Model/Object} data Data to initialize the Model's fields with <br/>
* @param {Object} config see {@link #cfg-addPosition}.
*/
startAdd: function(data,config){
var me = this;
var cfg = Ext.apply({
addInPlace: this.addInPlace,
addPosition: this.addPosition,
colIndex: 0
},config)
//find the position
var position;
if(cfg.addInPlace){
var selected = me.grid.getSelectionModel().getSelection()
if(selected && selected.length>0){
position = me.grid.store.indexOf(selected[0])
console.log('a',position)
position += (cfg.addPosition<=0) ? 0: 1
}else{
position = 0
}
}else{
position = (cfg.addPosition==-1 ? me.grid.store.getCount() : cfg.addPosition) || 0
}
var record = data.isModel ? data : me.grid.store.model.create(data);
var autoSync = me.grid.store.autoSync;
me.grid.store.autoSync = false;
me.grid.store.insert(position, record);
me.grid.store.autoSync = autoSync;
me.adding = true
me.startEdit(position,cfg.colIndex);
//since autoCancel:true dont work for me
if(me.hideTooltipOnAdd && me.getEditor().hideToolTip){
me.getEditor().hideToolTip()
}
},
/**
* 编辑以前,自动取消编辑
* Modify: if is editing, cancel first.
* @private
* @override
*/
startEdit: function(record, columnHeader) {
var me = this;
if(me.editing){
me.cancelEdit();
}
me.callParent(arguments);
},
/**
* 修改adding的状态值
* Modify: set adding=false
* @private
* @override
*/
completeEdit: function() {
var me = this;
if (me.editing && me.validateEdit()) {
me.editing = false;
me.fireEvent('edit', me.context);
}
me.adding = false
},
/**
* 取消编辑
* 1.fireEvent 'canceledit'
* 2.when autoRecoverOnCancel is true, if record is phantom then remove it
* @private
* @override
*/
cancelEdit: function(){
var me = this;
if (me.editing) {
me.getEditor().cancelEdit();
me.editing = false;
me.fireEvent('canceledit', me.context);
if (me.autoRecoverOnCancel){
if(me.adding){
me.context.record.store.remove(me.context.record);
me.adding = false
}else{
//不须要reject,由于Editor没有更改record.
//me.context.record.reject()
}
}
}
}
})
//ext-lang-zh_CN
if (Ext.grid.RowEditor) {
Ext.apply(Ext.grid.RowEditor.prototype, {
saveBtnText: '保存',
cancelBtnText: '取消',
errorsText: '错误信息',
dirtyText: '已修改,你须要提交或取消变动'
});
}

posted @ 2013-04-27 17:37 赵雪丹阅读(71) 评论(0) 编辑

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"

        });

posted @ 2013-04-27 17:35 赵雪丹阅读(9) 评论(0) 编辑

Extjs4---用RowEditing对数据进行增长，修改

给grid添加RowEditing:
[javascript]
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            pluginId:'rowEditing',
            saveBtnText: '保存',
            cancelBtnText: "取消",
            autoCancel: false,
            clicksToEdit:2<span style="white-space:pre">    </span>//双击进行修改
        })

而后在grid里面配置便可：
[javascript]
plugins: [
rowEditing
],

一、增长：
给“增长”添加点击事件，点击时，在store中添加一个新的record，并调用startEdit(0,0)方法，参数表示编辑第一行，也就是刚添加的新行
[javascript]
'center button[id = addContact]':{
                click:function(){
                    //获得通信录的store，并添加一个新的空行
                    var contactStore = Ext.getStore('ContactStore');
                    var contactModel = Ext.create('MS.model.Contact',{});
                    contactStore.insert(0,contactModel);
                    //获得rowEditing添加事件
                    var rowEditing = Ext.getCmp('contactGridpanel').editingPlugin;
                    rowEditing.startEdit(0,0);
                }
            },

而后在输入信息便可

二、修改：
当点击“修改”时，找到选择的列，或者双击某列时进行修改
[javascript]
'center button[id = updateContact]':{
                click:function(){

                    //获得rowEditing添加事件
                    var rowEditing = Ext.getCmp('contactGridpanel').editingPlugin;
                    var data = Ext.getCmp("contactGridpanel").getSelectionModel().getSelection();
                    if(data.length == 0) {
                        Ext.MessageBox.alert(
                                '提示',
                                '请在您要修改的行前面打勾，或者直接双击您想修改的行！'
                        );
                    }else{
                        rowEditing.startEdit(data[0].index,0);
                    }
                }
            },

三、保存
无论是添加仍是修改，保存用的事件是grid的edit事件

[javascript]
edit:function(editor,e,eOpts){

                        // "添加" 当id为空时，表示添加新的联系人
                        if(id == ''){

                            //执行操做
                            var myMask = new Ext.LoadMask(Ext.getBody(), {
                                msg: '正在添加，请稍后...',
                                removeMask: true //完成后移除
                            });
                            myMask.show();

                            //获取uuid
                            var id = UUID.prototype.createUUID();
                            //获取record
                            var formData = e.record.getData();

                            Ext.Ajax.request({
                                url: 'add',
                                params: {
                                    id:id
                                    //参数
                                },
                                success: function(response){
                                    var result = Ext.decode(response.responseText).result;
                                    if(result.succeed){
                                        e.record.set(id,uuid);

                                        //页面效果，提交数据
                                        e.record.commit();
                                        //从新排序，防止出现错位现象
                                        Ext.getStore('ContactStore').sort('id', 'DESC');

                                        //隐藏等待提示框
                                        myMask.hide();


                                        Ext.Msg.show({
                                             title:'操做提示',
                                             msg: result.msg,
                                             buttons: Ext.Msg.YES,
                                             icon: Ext.Msg.WARNING
                                        });

                                    }else{
                                        myMask.hide();
                                        Ext.Msg.show({
                                                 title:'操做提示',
                                                 msg: result.msg,
                                                 buttons: Ext.Msg.YES,
                                                 icon: Ext.Msg.WARNING
                                        });
                                    }

                                }
                            });


                        }else{
                            // "修改" 当id不为空时，表示修改联系人信息

                            var myMask = new Ext.LoadMask(Ext.getBody(), {
                                msg: '正在修改，请稍后...',
                                removeMask: true //完成后移除
                            });
                            myMask.show();

                            var formData = e.record.getData();
                            Ext.Ajax.request({
                                url: 'update',
                                params: {
                                    id:formData.id
                                },
                                success: function(response){
                                    var result = Ext.decode(response.responseText).result;
                                    if(result.succeed){

                                        e.record.commit();
                                        Ext.getStore('ContactStore').sort('id', 'DESC');

                                        //隐藏
                                        myMask.hide();
                                        Ext.Msg.show({
                                             title:'操做提示',
                                             msg: result.msg,
                                             buttons: Ext.Msg.YES,
                                             icon: Ext.Msg.WARNING
                                        });

                                    }else{
                                        myMask.hide();
                                        Ext.Msg.show({
                                             title:'操做提示',
                                             msg: result.msg,
                                             buttons: Ext.Msg.YES,
                                             icon: Ext.Msg.WARNING
                                        });
                                    }
                                }
                            })
                        }
                    }
                }

posted @ 2013-04-27 17:33 赵雪丹阅读(34) 评论(0) 编辑

Ext蒙板效果

var waitMask = new Ext.LoadMask(Ext.getBody(), { msg: "系统正在处理数据，请稍候..." }); //定义一个
waitMask.show();//show方法显示
btnGenerate.disable();

Ext.Ajax.request(

{

method: 'POST',

url: Vars.Url,

success: function(response) {

//转成对象
var obj = Ext.decode(response.responseText);

if (obj.success) {

Twi.Msg.Info(null, "原始记录单生成成功！");

}

else {

Twi.Msg.Info('操做失败', obj.message);

}

btnGenerate.enable();

waitMask.hide(); //hide()方法隐藏
},

failure: function(response, action) {

Twi.Msg.Error(null, '提交失败,系统发生异常，异常类别为：' + action.failureType);

btnGenerate.enable();

waitMask.hide();//隐藏
},

params:

{

sign: 'GenerateOriginalList',

MgscType: Vars.MgscType,

TaskID: Vars.TaskID,

TestItemID: Vars.TestItemID

}

});

posted @ 2013-04-27 17:30 赵雪丹阅读(8) 评论(0) 编辑

ext grid数据修改

Grid是Ext框架中一个重要的组成部分。通常创建Grid主要实现数据的增删改查。创建一个Grid Grid通常有三个主要的内容，ds,cm,GridPanel var ds = new Ext.data.Store(); var cm = new Ext.grid.ColumnModel(); var grid = new Ext.grid.GridPanel(); 若是要页面载入时，Grid不显示，事件触发查询并创建Grid显示。很简单，将GridPanel创建在事件的function中就能够了。若是载入时就显示Grid,这里分几种状况: (1)页面载入时，Grid显示，并查询和显示出数据。 (2)页面载入时，Grid显示，但不发送请求数据，事件触发查询。该查询条件已固定或不须要条件。 (3)页面载入时，Grid显示，不查询数据，事件触发查询，该查询须要从页面上存在的文本框中得到数据做为条件。 (4)与(3)相同，可是但愿在Grid查询过程当中有loadMask效果。对于1）直接在Ext.onReady()中创建GridPanel，而且ds调用load方法。对于2）在Ext.onReady()中创建GridPanel,而在事件的function中写ds.load() 对于3) 在Ext.onReady()中创建GridPanel,而此时的ds为一个假ds,它的做用仅仅是为了可以在页面载入时就显示Grid,而在事件的function中则再创建一个带有查询条件的ds,而后用该ds从新配置Grid.grid.reconfigure(ds,cm); 对于4) 查询的要求可由grid被新的ds从新配置的方法实现，可是会发现，这样作时，Grid的loadMask效果也不会出现了。有一个方法，就是在事件的 function中，将Grid的render的div清空，即div.innerHTML="" 以后再从新创建一个Grid。这样作的缺点就是会在有不少代码重复。可能还会出现一些其余的function的调用以及没法取得某对象的问题。如下由第三种状况为例，来讲明增删改查。创建： var fds = new Ext.data.Store(); var cm = new Ext.grid.ColumnModel([ {header:'例子',width:100,dataIndex:'test', editor:new Ext.form.TextField({ id:'test' }) } ]); var sm = new Ext.grid.RowSelectionModel(); var grid = new Ext.grid.EditorGridPanel({ ds:fds, cm:cm, sm:sm, width:200, height:200, title:'举例', renderTo:Ext.get("testdiv") }); 这里创建EditorGridPanel，是能够进行编辑的Grid. 1 查询：(点击按钮触发事件) function btnclick() { var Record = Ext.data.Record.create([ {name:'test'} ]); //此处将record单独提出方便操做 var ds = new Ext.data.Store({ url:'访问的地址', reader:new Ext.data.XmlReader({ record:'item' },Record) }); ds.load(); grid.reconfigure(ds,cm); } 2 添加新建一条数据 var r = new Record({ test:'随便举个例子' }); 插入到表格指定行，n为要插到这行后（此处取了表格的行数，即插入到最后），m是编辑完毕后focus的位置列数 var n = grid.getStore().getCount(); grid.stopEditing(); grid.getStore().insert(n,r); grid.startEditing(n,m); 3 删除删除选定的行 var r = grid.getSelectionModel().getSelected(); ds.remove(r); 删除多行，也同样，用getSelections()反法取到选中的行的一个数组，而后再一一删除。删除全部行 ds.removeAll(); 4 修改两种方法，一种直接手动点击须要修改的单元格，EditorGridPanell中的ClicksToEdit来设置点击几下进入编辑状态。还有一种从别处得到数据自动修改。假设一条新的数据， var nr = ['修改后的例子']; 选定你要修改的行 var recordtoedit = grid.getSelectionModel().getSelected(); 或者var recordtoedit = ds.getAt(rowIndex); recordtoedit.set('test','修改后的例子'); 还能够在修改完毕后将修改过的行的颜色改变来标示出哪一条是修改过的。添加事件 grid.on('afteredit',function(e){ var rowIndex = e.row; grid.getView().getRow(rowIndex).style.backgroundColor="red"; //能够增长透明度效果 grid.getView().getRow(number).style.filter = "alpha(opacity=50)"; grid.getView().getRow(number).style.MozOpacity =".5"; });

Extjs 初学者教程 连接网址 http://blog.csdn.net/tiemufeng1122/article/details/11151675

Extjs 初学者教程连接网址 http://blog.csdn.net/tiemufeng1122/article/details/11151675