Ext.js高级组件

于 2018-01-18 00:06:00 发布
阅读量1k 收藏 12
点赞数 2
文章标签： 测试 ux 数据库
原文链接：http://www.cnblogs.com/happyzwt/p/8306902.html
版权

第二章：Ext.js高级组件

grid组件

普通方式

表格面板类Ext.grid.Panel

  • xtype（别名）：gridpanel、grid
    • title标题、renderTo渲染至、width宽、height高
    • frame : Boolean 是否填充渲染gridpanel
    • forceFit : true 列是否自动填充
    • store : store 数据集
    • tbar: []
      • 头部工具栏
    • dockedItems : Object/Array
      • 可定位的停靠工具条（上、下、左、右）
    • selType : ‘checkboxmodel’
      • 选择框选择模式
    • multiSelect :true
      • 是否允许多选
    • plugins 插件
    • columns : Array
      • 列模式(Ext.grid.column.Columnxtype: gridcolumn)
        • text : String 列标题
        • dataIndex : String 和Model列对应
        • sortable : true 是否可以分类
        • field:
          • 可编辑字段配置
      • getStore
      • ownerCt返回父级
  • grid案例
    • gridDemo.js文件代码
      Ext.QuickTips.init();   //初始化提示
 创建表格面板
var grid = Ext.create("Ext.grid.Panel",{
    title : 'Grid Demo',
    frame : true,       //面板渲染
    //forceFit : true,  //自动填充列空白处（4.0的选择框有空隙问题时指定宽度）
    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',text:'删除',iconCls:'table_remove',
            handler:function(o){    
                //var gird = o.findParentByType("gridpanel");   //获取父级
                var gird = o.ownerCt.ownerCt; //获取删除按钮的父级的父级
                // 获取选中数据集
                var data = gird.getSelectionModel().getSelection();
                if(data.length == 0){
                    Ext.Msg.alert("提示","请选择数据");
                }else{
                     根据name得到数据
                    var st = gird.getStore();   //获取数据集
                    var ids = []; //存储被选中数据的name集合
                    Ext.Array.each(data,function(record){
                        ids.push(record.get('name'));
                    })
                     后台操作(delete)、前端操作DOM进行删除(ExtJs)
                    Ext.Ajax.request({
                        url:'/extjs/extjs!deleteData.action',
                        params:{ids:ids.join(",")}, //指定要删除数据的name集合
                        method:'POST',
                        timeout:2000,   //设定响应等待时间
                        success:function(response,opts){
                            Ext.Array.each(data,function(record){
                                st.remove(record);  //从store中删除该条记录
                            })
                        }
                    })
                }
            }
          },
        {xtype:'button',text:'修改',iconCls:'table_edit'},
        {xtype:'button',text:'查看',iconCls:'table_comm'}
    ],
    dockedItems :[{             //可定位的停靠工具条
        xtype:'pagingtoolbar',  //分页工具条
        store:Ext.data.StoreManager.lookup('s_user'),   //指定store
        dock:'bottom',
        displayInfo:true        //是否展示信息（eg:条数）
    }],
    plugins:[   //配置可编辑单元格插件实现grid的编辑
        Ext.create("Ext.grid.plugin.CellEditing",{
            clicksToEdit : 1    //点击N次进入编辑
        })
    ],
    selType:'checkboxmodel',    //设定选择模式
    multiSelect:true,           //允许多选
    renderTo :Ext.getBody(),
    // 通过指定store的id在StoreManager获取store
    store : Ext.data.StoreManager.lookup('s_user')  
});
    • model.js文件代码
       Model类
Ext.define("user",{
    extend:"Ext.data.Model",
    fields:[
        {name:'name',type:'string',sortable:true},
        {name:'age',type:'int',sortable:true},
        {name:'email',type:'string',sortable:true}
    ]
});
 store类
Ext.create("Ext.data.Store",{
    model:'user',
    storeId:'s_user', //指定了storeId后store由StoreManager自动管理
    proxy:{
        type:'ajax',
        url:'/extjs/extjs!getUserList.action',
        reader:{
            type:'json',
            root:'root'
        },
        writer:{
            type:'json'
        }
    },
    autoLoad:true   //自动加载数据
});

MVC方式

  • extjs创建应用的方法
    • Ext.application();（Ext.app.Application类）
      Ext.application({
    name: 'MyApp',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: { html: 'My App'}
        });
    }
});
    • Ext.app.Controller 控制器
    • Ext.ComponentQuery 组件查询(extjs4.0新特性)
    • Ext.container.Containerxtype: container类
  • grid组件的MVC实现
    • html文件代码中引入app.js文件
      <link rel="stylesheet"type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/bootstrap.js"></script>
<script type="text/javascript" src="app.js"></script>
    • app.js文件代码
      Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.Loader.setConfig({ //执行加载
        enabled:true
    });
    Ext.application({
        name : 'AM',    //应用名
        appFolder : "app",  //应用目录
        launch:function(){  //当前页面加载完成后执行
            Ext.create('Ext.container.Viewport', { //创建Viewport
                layout:'auto',  //自动填充布局
                items: {
                    xtype: 'userlist', //view的别名
                    title: 'Users',
                    html : 'List of users will go here'
                }
            });
        },
        controllers:['Users']
    });
})
    • controller/Users.js文件代码
      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{
                         根据name得到数据
                        var st = gird.getStore();   //获取数据集
                        var ids = []; //存储被选中数据的name集合
                        Ext.Array.each(data,function(record){
                            ids.push(record.get('name'));
                        })
                         后台操作(delete)、前端操作DOM进行删除(ExtJs)
                        Ext.Ajax.request({
                            url:'/extjs/extjs!deleteData.action',
                            params:{ids:ids.join(",")}, //指定要删除数据的name集合
                            method:'POST',
                            timeout:2000,   //设定响应等待时间
                            success:function(response,opts){
                                Ext.Array.each(data,function(record){
                                    st.remove(record);  //从store中删除该条记录
                                })
                            }
                        })
                    }
                }
            }
        });
    },
    views:['List'],
    stores :["Users"],
    models :["User"] 
});
    • view/List.js文件代码
      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    //单击时会报错（ext.js的bug）
        })
    ],
    selType:'checkboxmodel',    //设定选择模式
    multiSelect:true,           
    store : 'Users',
    initComponent:function(){   //初始化组件，进行渲染
        this.callParent(arguments);
    }
});
    • store/Users.js文件代码
      Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User', //define时的名
    storeId: 's_user',
    proxy:{
        type:'ajax',
        url:'/extjs/extjs!getUserList.action',
        reader: {
            type: 'json',
            root: 'root'
        },
        writer:{
            type:'json'
        }
    },
    autoLoad: true //自动加载数据（很关键）
});
    • model/User.js文件代码
      Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string',sortable : true},
        {name: 'age',   type: 'int',sortable : true},
        {name: 'email',   type: 'string',sortable : true}
    ]
});

grid列模式

  • Ext.grid.column.Column
    • xtype: gridcolumn
  • Ext.grid.column.Action
    • 在表格中渲染一组图标按钮,并为其赋予某种功能
    • xtype: actioncolumn
      • altText:String 设置应用image元素上的alt
      • handler:function(view,rowindex,collndex,item,e);
      • icon:图标资源地址、iconCls:图标样式
      • items:多个图标的数组 （使用MVC时不建议使用）
      • stopSelection:设置是否单击选中
  • Ext.grid.column.Boolean
    • xtype: booleancolumn
      • falseText,trueText
  • Ext.grid.column.Date
    • xtype: datecolumn
      • format:’Y年m月的日’
  • Ext.grid.column.Number
    • xtype: numbercolumn
      • format:‘0,000’
  • Ext.grid.column.Template
    • xtype:’templatecolumn’,
    • tpl :”“
  • Ext.grid.RowNumberer
    • xtype: rownumberer
  • 数据字典
    • 业务数据字典
      • 风险等级,城市
    • 不变的数据字典
      • 男,女；是,否；血型
  • 案例
  • controller/Users.js文件代码
    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{
                         根据name得到数据
                        var st = gird.getStore();   //获取数据集
                        var ids = []; //存储被选中数据的name集合
                        Ext.Array.each(data,function(record){
                            ids.push(record.get('name'));
                        })
                         后台操作(delete)、前端操作DOM进行删除(ExtJs)
                        Ext.Ajax.request({
                            url:'/extjs/extjs!deleteData.action',
                            params:{ids:ids.join(",")}, //指定要删除数据的name集合
                            method:'POST',
                            timeout:2000,   //设定响应等待时间
                            success:function(response,opts){
                                Ext.Array.each(data,function(record){
                                    st.remove(record);  //从store中删除该条记录
                                })
                            }
                        })
                    }
                }
            },
            "userlist actioncolumn[id=delete]":{
                click : function(o,item,rowIndex,colIndex ,e){
                    alert(rowIndex+" "+colIndex);
                }
            }
        });
    },
    views:['List'],
    stores :["Users"],
    models :["User"] 
});
  • view/List.js文件代码
    Ext.define("AM.view.List",{
    extend:'Ext.grid.Panel',
    title : 'Grid Demo',
    alias: 'widget.userlist',
    frame : true,   //面板渲染
    width : 600,
    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
        }
    ],
    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    //单击时会报错（ext.js的bug）
        })
    ],
    selType:'checkboxmodel',    //设定选择模式
    multiSelect:true,           
    store : 'Users',
    initComponent:function(){   //初始化组件，进行渲染
        this.callParent(arguments);
    }
});
  • model/User.js文件代码
    Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string',sortable : true},
        {name: 'age',   type: 'int',sortable : true},
        {name: 'email',   type: 'string',sortable : true},
        {name: 'birthday',   type: 'string',sortable : true},
        {name: 'deposit',   type: 'int',sortable : true},
        {name: 'isIt',   type: 'string',sortable : true},
        {name: 'sex',   type: 'string',sortable : true}
    ]
});

grid选择模式

  • 根类
    • 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重新选择
  • 隐藏了一个单元格的选择模式
    • 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})
        • 很实用，选择要特殊处理的数据
  • 多选框选择器Ext.selection.CheckboxModel
    • 重要方法
      • Ext.selection.RowModel
        • rowmodel 行选择器
    • 重要属性
      • multiSelect 允许多选
      • simpleSelect 单选选择功能
      • enableKeyNav 允许使用键盘

Grid特性

  • Ext.grid.feature.Feature

  • 表格的行体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){ ...... }
    })
],
        • 必须返回行体的对象
          var headerCt = this.view.headerCt,
    colspan  = headerCt.getColumnCount();
return {
    rowBody: "",
    rowBodyCls: this.rowBodyCls,
    rowBodyColspan: colspan
};

  • Ext.grid.feature.AbstractSummary

    • 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); 
}

  • Ext.grid.feature.Grouping

    • 在store中设置可以分组的属性
      • groupField : ‘’
    • 在view中增加代码
      Ext.create("Ext.grid.feature.Grouping",{
        groupByText : "职业分组",
        groupHeaderTpl : "职业{name}  一共{rows.length}人",
        showGroupsText : "展示分组",
        startCollapsed : true

}
    • 重要事件
      • groupclick
      • groupdblclick
      • groupcontextmenu
      • groupexpand
      • groupcollapse

  • 扩展

    • Ext.grid.feature.GroupingSummary
    • Ext.grid.feature.Chunking

  • 代码

    • app.js
      Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.Loader.setConfig({
        enabled:true
    });
    Ext.application({
        name : 'AM',//应用的名字
        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'
        ]
    });
})
    • controller/Users.js
      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"
    ] 
});
    • model/User.js
      Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string',sortable : true},
        {name: 'age',   type: 'int',sortable : true},
        {name: 'email',   type: 'string',sortable : true},
        {name: 'birthday',   type: 'string',sortable : true},
        {name: 'deposit',   type: 'int',sortable : true},
        {name: 'isIt',   type: 'string',sortable : true},
        {name: 'sex',   type: 'string',sortable : true}
    ]
});
    • store/Users.js
      Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    storeId: 's_user',
    groupField : 'sex',
    proxy:{
        type:'ajax',
        url:'/extjs/extjs!getUserList.action',
        reader: {
            type: 'json',
            root: 'topics'
        },writer:{
            type:'json'
        }
    },
    autoLoad: true //
});
    • view/List.js
      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);
    }
});

grid插件

  • 可编辑插件
    • 根类Ext.grid.plugin.Editing
    • Ext.grid.plugin.CellEditing
      • 保存修改的两种办法
        • 设立保存按钮,用户单击的时候保存数据
          st.sync();
var records = st.getUpdatedRecords();
Ext.Array.each(records,function(model){
    model.commit();
});
        • 注册edit事件
          • e.record.commit();
    • Ext.grid.plugin.RowEditing
      • 4.0.1a版本不推荐这个功能
        Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToEdit: 1
})
  • 表格拖拽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);
          }
    }
}
  • 分页组件Ext.toolbar.Paging
    dockedItems: [{
    xtype: 'pagingtoolbar',
    store: store,
    dock: 'bottom',
    displayInfo: true
}],
    • 第二种分页的形式
      Ext.Loader.setPath('Ext.ux', '../../../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', {})  ---- 重点
})
  • 属性配置框面板Ext.grid.property.Grid
    • 做自动生成功能时可以考虑用
  • 关于表格的其他东西
    • 列锁定
      • {text:”age”,dataIndex:’age’,width:100,locked:true},
    • 复杂表头
      {
    text:'other',columns:[
        {text:"age",dataIndex:'age',width:100,locked   : true},
        {text:"int",dataIndex:'index',width:100}]
}
    • 字段过滤
      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'}},
  • 代码
    • app.js
      Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.Loader.setConfig({
        enabled:true
    });
    Ext.Loader.setPath('Ext.ux', '../../../extjs4/examples/ux');
    Ext.require([
        'Ext.ux.data.PagingMemoryProxy',
        'Ext.ux.SlidingPager',
        'Ext.ux.grid.FiltersFeature'
    ]); 
    Ext.application({
        name : 'AM',
        appFolder : "app",
        launch:function(){
            Ext.create('Ext.container.Viewport', { 
                layout:'auto',
                items:[{
                    xtype: 'userlist',
                    title: 'Users'
                },{
                    xtype:'proList'
                }]
            });
        },
        controllers:[
            'Users'
        ]
    });
})
    • controller/Users.js
      Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    init:function(){
        this.control({
            'userlist':{
                edit:function(editor,e,options){
                    //Model
                    //e.record.commit();                        

                }
            },
            'userlist button[id=save]':{
                click:function(o){
                    var gird = o.ownerCt.ownerCt;
                    var st = gird.getStore();
                    st.sync();//数据与后台同步
                    var records = st.getUpdatedRecords();
                    Ext.Array.each(records,function(model){
                        model.commit();
                    }); 
                }
            },
            '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:[
        'proerty',
        'List'
    ],
    stores :[
        "Users"
    ],
    models :[
        "User"
    ] 
});
    • model/User.js
      Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string',sortable : true},
        {name: 'age',   type: 'int',sortable : true},
        {name: 'email',   type: 'string',sortable : true},
        {name: 'index',   type: 'int',sortable : true}
    ]
});
    • store/Users.js
      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 
});
    • view/List.js
      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);
    }
});
    • view/dd.js
      Ext.define("AM.view.dd",{
    extend:'Ext.grid.plugin.DragDrop',
    alias: 'widget.dd',
    ddGroup:'ddTree',
    dragGroup :'userlist',
    dropGroup :'userlist',
    initComponent:function(){
        this.callParent(arguments);
    }   
})
    • view/proerty.js
      Ext.define("AM.view.proerty",{
    extend:'Ext.grid.property.Grid',
    title: 'Properties Grid',
    alias: 'widget.proList',
    width: 300,
    //自定义渲染的函数
    customRenderers :{
        'boy':function(value){
            return value?'是':'否'
        },
        'emial-width':function(value){
            return value;
        }
    },
    source: {
        'boy':false,
        'emial-width':'100'
    }   
})
    • util/filters.js
      Ext.define("AM.util.filters",{
    alias: 'widget.filters',
    ftype: 'filters',
        encode: false, 
        local: true, 
        filters: [{
                type: 'boolean',
                dataIndex: 'visible'
            }
     ]
})

tree组件

  • 类结构
    • Ext.panel.Panel
      • Ext.panel.Table
        • Ext.tree.Panel
          • 和grid完全一样
  • 快速实现一个demo
    • 主要配置项
      • title、width、height、renderTo
      • root 控制根节点(Ext.data.Model/Ext.data.NodeInterface)
      • animate : Boolean 控制收起和展开是否有动画效果
      • store: store 数据集合
    • 重要事件
      • itemclick
  • Ext.data.TreeStore
  • 代码
    • app.js
      Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.Loader.setConfig({
        enabled:true
    });
    Ext.application({
        name : 'AM',
        appFolder : "app",
        launch:function(){
            Ext.create('Ext.container.Viewport', {
                layout:'auto',
                items: {
                    xtype: 'deptTree'
                }
            });
        },
        controllers:[
            'deptController'
        ]
    });
})
    • controller/deptController.js
      Ext.define('AM.controller.deptController', {
    extend: 'Ext.app.Controller',
    init:function(){
        this.control({
            "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 :[
    ] 
});
    • store/deptStore.js
      Ext.define("AM.store.deptStore",{
    extend:'Ext.data.TreeStore',
    defaultRoodId:'root',
    proxy:{
        type:'ajax',
        url:'/extjs/extjs!getDept.action',
        reader:'json',
        autoLoad:true
    }
});
    • view/deptView.js
      Ext.define("AM.view.deptView",{
    extend:'Ext.tree.Panel',
    alias: 'widget.deptTree',
    title : '部门树形',
    width : 250,
    height: 300,
    padding : '5 3 3 10',
    rootVisible : false,//控制显隐的属性
    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:'toolbar',
        items:[{
            xtype:'button',
            id:'allopen',
            text:'展开全部'
        },{
            xtype:'button',
            id:'allclose',
            text:'收起全部'
        }]
    }],
    store:'deptStore'
//  root:{
//      text:'root',
//      id : '0',
//      leaf:false,
//      children:[{
//          text:'技术部门',
//          checked:false,
//          id : '01',
//          leaf:false,
//          children:[{
//              checked:false,
//              text:'研发部',
//              id : '0101',
//              leaf:true       
//          },{
//              checked:false,
//              text:'实施部',
//              id : '0102',
//              leaf:true       
//          }]
//      },{
//          text:'后勤部门',
//          id : '02',
//          checked:false,
//          leaf:false,
//          children:[{
//              text:'人事部',
//              id : '0201',
//              checked:false,
//              leaf:true       
//          },{
//              text:'行政部',
//              id : '0202',
//              checked:false,
//              leaf:true       
//          }]
//      }]
//  }
});
  • 树形的拖拽
    • Ext.tree.ViewDDPlugin
      • alias: ‘plugin.treeviewdragdrop’,
        viewConfig:{
    plugins :{
        ptype:'treeviewdragdrop'
    }
},
    • 事件
      listeners: {
    drop: function(node, data, dropRec, dropPosition) {},
    beforedrop:function(node,data,overModel,dropPosition,dropFunction,options ){ }
}
    • 模拟拷贝和黏贴
    • 删除操作
    • 多列树
    • 单击树形根节点子节点也被选中
    • 代码
    • app.js
      Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.Loader.setConfig({
        enabled:true
    });
    Ext.application({
        name : 'AM',
        appFolder : "app",
        launch:function(){
            Ext.create('Ext.container.Viewport', {
                layout:'auto',
                items: {
                    xtype: 'deptTree'
                }
            });
        },
        controllers:[
            'deptController'
        ]
    });
})
    • controller/deptController.js
      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});
                        }
                    }
                }
            },
            'deptTree button[id=delete]':{
                click:function(b,e){
                    var tree = b.ownerCt.ownerCt;
                    var nodes = tree.getChecked();
                    for(i=0;i<nodes.length;i++){
                        nodes[i].remove(true);
                    }
                }
            },
            'deptTree button[id=copy]':{
                click:function(b,e){
                    var tree = b.ownerCt.ownerCt;
                    //得到数据集合
                    var nodes = tree.getChecked();
                    if(nodes.length>0){
                        //把数据放到剪切板中
                        tree.setCopyNodes(Ext.clone(nodes));
                        alert("拷贝"+nodes.length+"个节点");
                        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 checkednodes = tree.getChecked();
                    if(checkednodes.length == 1){
                        //被追加孩子的节点
                        var node = checkednodes[0];
                        //去剪切板中区数据
                        var nodes = tree.getCopyNodes();
                        if(nodes.length>0){
                            for(i=0;i<nodes.length;i++){
                                var n = nodes[i].data;
                                n['id'] = n['id']+'1';
                                node.appendChild(n);
                            }
                        }
                    }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 :[
        'deptModel'
    ] 
});
    • model/deptModel.js
      Ext.define('AM.model.deptModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'text',  type: 'string',sortable : true},
        {name: 'id',   type: 'string',sortable : true}
    ]
});
    • store/deptStore.js
      Ext.define("AM.store.deptStore",{
    extend:'Ext.data.TreeStore',
    defaultRoodId:'root',
    model:'AM.model.deptModel',
    proxy:{
        type:'ajax',
        url:'/extjs/extjs!getDept.action',
        reader:'json',
        autoLoad:true
    }
});
    • view/deptView.js
      Ext.define("AM.view.deptView",{
    extend:'Ext.tree.Panel',
    alias: 'widget.deptTree',
    title : '部门树形',
    width : 350,
    height: 300,
    padding : '5 3 3 10',
    rootVisible : false,//控制显隐的属性
    config:{
        copyNodes:''//他充当剪切板的作用
    },
    columns:[
        {
            xtype:'treecolumn',
            text:'text',
            writh:150,
            dataIndex:'text'
        },{
            text:'info',
            dataIndex:'id'
        }
    ],
    viewConfig:{
        plugins :{
            ptype:'treeviewdragdrop',
            appendOnly : true
        },
        listeners:{
            drop:function( node,  data,  overModel,  dropPosition,  options){
                //ajax的操作把数据同步到后台数据库
                alert("把: "+data.records[0].get('text')+" 移动到: "+overModel.get('text'));            
            },
            beforedrop:function( node,  data,  overModel,  dropPosition,  dropFunction,  options){
//              if(overModel.get("leaf")){
//                  overModel.set('leaf',false)
//              }
            }
        }
    },  
    dockedItems:[{
        xtype:'toolbar',
        dock:'left',
        items:[
            {xtype:'button',text:'add',id:'add'},
            {xtype:'button',text:'copy',id:'copy'},
            {xtype:'button',text:'delete',id:'delete'},
            {xtype:'button',text:'paste',id:'paste'}
        ]
    },{
        xtype:'toolbar',
        items:[{
            xtype:'button',
            id:'allopen',
            text:'展开全部'
        },{
            xtype:'button',
            id:'allclose',
            text:'收起全部'
        }]
    }],
    store:'deptStore'
});

tree+grid 部门管理案例

  • 简单布局应用
    • border布局、tab布局、fit布局
  • 表格的操作
    • 列表的CRUD
    • 控制树形节点的CRUD
  • 树形的操作
    • 自身的一些功能
    • 过滤grid的数据
  • 制作流程
    • 整体框架搭建
    • 表格视图搭建
    • 表格CRUD
    • 树形视图搭建
    • 树形功能实现
    • tree和grid整合
  • 完善
    • 公共函数的抽取
    • 完成保存操作
    • 完成批量删除操作
    • 进一步完善添加操作
    • 解决网友提出后台一个pojo前台就要写一个model的问题(缓存,工厂,Ajax)
    • 树形过滤表格(伪代码和思路)
  • 代码
    • app.js
      Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.Loader.setConfig({
        enabled:true
    });
    Ext.application({
        name : 'AM',
        appFolder : "app",
        launch:function(){
            Ext.create('Ext.container.Viewport', {
                padding : "15 15 15 15",
                items: {
                    width: 750,
                    height: 530,
                    xtype: 'mainlayout'
                }
            });
        },
        controllers:[
            'DeptController'
        ]
    });
})
    • controller/DeptController.js
      /**
 * ClassName 部门管理控制器
 */
Ext.define("AM.controller.DeptController",{
    extend:'Ext.app.Controller',
    GridDoActionUtil:Ext.create("AM.util.GridDoActionUtil"),
    init: function(){
        this.gerGridObj = function(buttion){
            return buttion.ownerCt.ownerCt;
        };
        this.getTreeObj = function(buttion){
            return  buttion.ownerCt.ownerCt.ownerCt.ownerCt
                        .child('#west-tree').child("#dept-tree");
        };
        this.control({
            'depTree':{
                itemclick:function(tree,record,item,e,opti){
                    /**
                     * 1.得到单击节点的ID
                     * 2.发到后台重新查询数据load表盒 where id="A0"
                     * 3.oracle 那就用递归查询
                     * http://www.uspcat.com/myknowledgebase/oracle/oracl_digui.htm
                     */
                    //alert(record.get("id"))
                    /**
                     * 1.得到节点ID和子节点的ID
                     * 2.发到后台重新查询数据load表盒 where id in ("A0","A01010");
                     */
                    record.collapse(function(){
                        return true;
                    },function(node){
                        console.log(node);
                    })
                    //grid.load({whereSql:'in ('A0')'})
                }
            },
            'deptlist button[id=delete]':{
                click:function(deleteButton){
                    var grid  = this.gerGridObj(deleteButton);
                    var tree = this.getTreeObj(deleteButton);
                    this.GridDoActionUtil.doDelete(grid,tree);
                }
            },
            //第二讲中修改
            'deptlist button[id=save]':{
                click:function(saveButton){
                    var grid  = this.gerGridObj(saveButton);
                    var tree = this.getTreeObj(saveButton);
                    this.GridDoActionUtil.doSave(grid,tree);
                }
            },
            //设定列表添加按钮的事件
            'deptlist button[id=add]':{
                click:function(addButton){
                    //得到数据表格的对象
                    var grid  = this.gerGridObj(addButton);
                    var modelObj = {
                        text: '',
                        id: 'A01',
                        info :'',
                        orderIndex:0,
                        manager:'',
                        nodeType:'ROOT',
                        leaf : true
                    };
                    //得到tree
                    var tree = this.getTreeObj(addButton);
                    this.GridDoActionUtil.doInsert(grid,modelObj,tree);

                }
            }
        })
    },
    views:[
        'DeptTree',
        'DeptList',
        'MainLayout'
    ],
    stores:[
        'DeptStore4Tree',
        'DeptStore'
    ],
    models:[
        //'DeptModel'
    ]
});
    • model/DeptModel.js(停用)
      /**
 * ClassName 部门的实体
 * text : 部门的名称
 * id : id主键
 * info : 信息
 * orderIndex : 排序字段
 * manager : 部门的经理
 * nodeType : 节点类型
 * leaf :  是否叶子
 */
Ext.define("AM.model.DeptModel",{
    extend:'Ext.data.Model',
    fields:[
        {name:'text',type:'string'},
        {name:'id',type:'string'},
        {name:'info',type:'string'},
        {name:'orderIndex',type:'int'},
        {name:'manager',type:'string'},
        {name:'nodeType',type:'string'},
        {name:'leaf',type:'string'}
    ]
});
    • store/DeptStore.js
      /**
 * ClassName 部门实体数据集
 */
Ext.define("AM.store.DeptStore",{
    extend:'Ext.data.Store',
    //model:'AM.model.DeptModel',
    model : modelFactory.getModelByName("AM.model.DeptModel"),
    proxy:{
        api:{
            update:'/extjs/extjs!updateDeptList.action',
            remove:'/extjs/extjs!updateDeptList.action'
        },
        type:'ajax',
        url:'/extjs/extjs!readDeptForGrid.action',
        reader:{
            type:'json',
            root:'topics'
        },
        writer:{
            type:'json'
        }
    },
    autoLoad:true
});
    • store/DeptStore4Tree.js
      Ext.define("AM.store.DeptStore4Tree",{
    extend:'Ext.data.TreeStore',
    defaultRootId : 'root',
    proxy:{
        type:'ajax',
        url:'/extjs/extjs!readDeptTree.action',
        reader:'json'
    }
});
    • view/DeptList.js
      /**
 * ClassName 部门管理数据列表视图
 */
Ext.define("AM.view.DeptList",{
    extend:'Ext.grid.Panel',
    alias:'widget.deptlist',
    store:'DeptStore',
    width:540,
    height:400,
    selModel:{
        selType:'checkboxmodel'
    },
    border:0,
    multiSelect: true,
    frame:true,
    tbar:[
        {xtype:'button',text:'添加',id:'add',iconCls:'table_add'},
        {xtype:'button',text:'删除',id:'delete',iconCls:'table_remove'},
        {xtype:'button',text:'保存',id:'save',iconCls:'table_save'}
    ],
    dockedItems:[{
        xtype:'pagingtoolbar',
        store:'DeptStore',
        dock:'bottom',
        displayInfo:true
    }],
    enableKeyNav:true,
    columnLines: true,
    columns:[
        {text:'部门名称',dataIndex:'text',width:100,
            field:{
                xtype:'textfield',
                allowBlank:false
            }
        },
        {text:'部门经理',dataIndex:'manager',width:100,
            field:{
                xtype:'textfield',
                allowBlank:false
            }       
        },
        {text:'顺序排序',dataIndex:'orderIndex',width:100},
        {text:'只能简介',dataIndex:'info',width:100}
    ],
    initComponent:function(){
        this.editing = Ext.create("Ext.grid.plugin.CellEditing");
        this.plugins = [this.editing];
        this.callParent(arguments)
    }
});
    • view/DeptTree.js
      Ext.define("AM.view.DeptTree",{
    extend:'Ext.tree.Panel',
    alias:'widget.depTree',
    rootVisible:false,//不展示ROOT
    displayField:'text',
    animate:false,
    store:'DeptStore4Tree'
})
    • view/MainLayout.js
      Ext.define("AM.view.MainLayout",{
    extend:'Ext.panel.Panel',
    alias:'widget.mainlayout',
    defaults:{
        split:true,
        bodyStyle:'padding:1px'
    },
    layout:'border',
    items:[{
        title:'部门树形',
        region:'west',
        iconCls:'dept_tree',
        xtype:'panel',
        margins:'5 2 5 5',
        width: 200,
        collapsible:true,//可以被折叠
        id:'west-tree',
        layout:'fit',
        items:[{
            xtype:'depTree',
            id:'dept-tree'
        }]
    },{
        title:'部门数据表格',
        iconCls:'dept_table',
        region:'center',
        xtype:'panel',
        id:'center-grid',
        margins:'5 5 5 0',
        layout:'fit',
        items:[{
            id:'dept-grid',
            xtype:'deptlist'
        }]
    }]
});
    • comm/ModelFactory.js
      /**
 * 工厂类
 */
Ext.define("AM.model.modelFactory",{
    //数据类模型的集合
    models:new Ext.util.MixedCollection(),
    //字段集合
    fields:new Ext.util.MixedCollection(),
    getModelByName:function(modelName){
        //1.声明类,返回类的ClassName
        if(this.models.containsKey(modelName)){
            return modelName;
        }else{
            //ajax拿到我们的字段集合
            var fields = [];
            if(this.fields.containsKey(modelName)){
                fields = this.fields.containsKey(modelName)
            }else{
                Ext.Ajax.request({
                    url:'/extjs/extjs!getModelFields.action?modelName='+modelName,
                    method:'POST',
                    timeout:4000,
                    async:false,//跟关键 我不需要异步操作
                    success:function(response,opts){
                        fields = eval(response.responseText);
                    }
                });
            }
            this.fields.add(modelName,fields);

            var newModel = Ext.define(modelName,{
                extend:'Ext.data.Model',
                fields:fields
            });
            this.models.add(modelName,newModel);
            return modelName;
        }
    }
});
var modelFactory = Ext.create('AM.model.modelFactory',{});
    • util/GridDoActionUtilview.js
      Ext.define("AM.util.GridDoActionUtil",{
    doDelete:function(grid,treeObj){
        if(!grid){
            alert("参数传递不正确");
            return;
        }
        //得到数据集合
        var store = grid.getStore(); 
        var records = grid.getSelectionModel().getSelection();
        var data = [];
        Ext.Array.each(records,function(model){
            data.push(Ext.JSON.encode(model.get('id')));
        });     
        if(data.length > 0){
            Ext.Ajax.request({
                url:store.getProxy().api['remove'],
                params:{data:"["+data.join(",")+"]"},
                method:'POST',
                timeout:4000,
                success:function(response,opts){
                    Ext.Array.each(records,function(model){
                        //tree删除节点
                        var node = treeObj.getStore().getNodeById(model.get('id'));
                        var parentNode = node.parentNode;
                        try{
                            node.remove(true);
                            if(parentNode){
                                if(!parentNode.getChildAt(0)){
                                    parentNode.data['leaf'] = true;
                                    parentNode.updateInfo();
                                }
                            }
                        }catch(e){
                            console.log(e);
                        }
                        //表格删除数据
                        store.remove(model);                        
                    })
                }
            })
        }

    },
    /**
     * 列表的批量修改
     * @param {} grid
     * @param {} treeObj
     */
    doSave:function(grid,treeObj){
        if(!grid){
            alert("参数传递不正确");
            return;
        }   
        //得到数据集合
        var store = grid.getStore();
        //records 被你修改过的数据
        var records = store.getUpdatedRecords();
        var data = [];
        Ext.Array.each(records,function(model){
            data.push(Ext.JSON.encode(model.data));
        });
        //异步的操作数据
//      store.getProxy().update(new Ext.data.Operation({
//          action:'update'
//      }));
        if(data.length > 0){
            Ext.Ajax.request({
                url:store.getProxy().api['update'],
                params:{data:"["+data.join(",")+"]"},
                method:'POST',
                timeout:4000,
                success:function(response,opts){
                    console.log(response.responseText);
                    Ext.Array.each(records,function(model){
                        var node = treeObj.getStore().getNodeById(model.get('id'));
                        node.data['text'] = model.get('text');
                        node.updateInfo();
                        //取消小箭头
                        model.commit();
                    });
                }
            });
        }
    },
    /**
     * 树形维护表格的插入操作
     * @param {} grid
     * @param {} modelObj
     * @param {} treeObj
     */
    doInsert:function(grid,modelObj,treeObj){
        if(!(grid && modelObj)){
            alert("参数传递不正确");
            return;
        }
        //得到表格数据集合
        var store = grid.getStore();
        //得到目前表格的数据集合长度
        var storeCount = store.getCount();
        //得到编辑插件
        var edit = grid.editing;
        //得到数据模型
        var model = store.model;
        if(storeCount == 0){//证明添加的节点是ROOT
            //初始化一个模型的类
            var deptObj = new model(modelObj);
            edit.cancelEdit();//取消其他插件的编辑活动
            store.insert(0,deptObj);
            edit.startEditByPosition({
                row:0,
                column:1
            });
            if(treeObj){//我们需要树形操作
                var rootNode = treeObj.getStore().getRootNode();
                rootNode.appendChild({
                    id:modelObj["id"],
                    text:modelObj["text"],
                    leaf:modelObj["leaf"]
                });
            }
        }else{
            //得到被选择的数据集合
            var checkedRecords = grid.getSelectionModel().getSelection();
            if(checkedRecords.length == 1){
                var parentRecord = checkedRecords[0];
                modelObj['nodeType'] = 'GENERAL';
                //第二讲中改********************************
                modelObj['id'] = 'A010101';
                //得到父节点
                var parentNode = treeObj.getStore().getNodeById(parentRecord.get('id'));
                try{
                    parentNode.data['leaf'] = false;
                    parentNode.updateInfo();
                    //给它加一个孩子节点
                    parentNode.appendChild({
                        id:"A010101",
                        text:'',
                        leaf:true
                    }); 
                    parentNode.expand();
                }catch(e){
                }
                edit.cancelEdit();//取消其他插件的编辑活动
                var deptObj = new model(modelObj);
                store.insert(0,deptObj);
                edit.startEditByPosition({
                    row:0,
                    column:1
                });
            }else{
                alert("请选择1个父级部门,您现在选择的是["+checkedRecords.length+"]个");
            }
        }
    }
});
    • resources/css/dept.css
      .dept_table{
    background-image: url(/Learning-extjs4.0/lesson/18/resources/img/dept_table.png) !important;
}
.dept_tree{
    background-image: url(/Learning-extjs4.0/lesson/18/resources/img/dept_tree.png) !important;
}
.table_remove{
    background-image: url(/Learning-extjs4.0/lesson/18/resources/img/table_remove.gif) !important;
}
.table_add{
    background-image: url(/Learning-extjs4.0/lesson/18/resources/img/table_add.png) !important;
}
.table_save{
    background-image: url(/Learning-extjs4.0/lesson/18/resources/img/tabel_save.png) !important;
}

form组件

  • 根类 Ext.form.Basic
    • 提供了表单组件,字段管理,数据验证,表单提交,数据加载的功能
  • 表单的容器 Ext.form.Panel
    • 容器自动关联Ext.form.Basic的实例对象更方便的进行字段的配置
    • 重要属性
      • defaultType:”” 设置默认子项 的xtype
  • 数据交互和加载
    • Ext.form.action.Action
      • Ext.form.action.Submit ajax方式提交
        • Ext.form.action.StandardSubmit 原始表单提交方法
      • Ext.form.action.DirectLoad
        • Ext.form.action.DirectSubmit 指令式的模式
  • 字段的控制
    • 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 特殊的-文本编辑框
  • 其中夹杂布局的类
    • Ext.form.FieldContainer
      • Ext.form.CheckboxGroup
        • Ext.form.RadioGroup
    • Ext.form.Label
      • Ext.form.Labelable
    • Ext.form.FieldSet
    • Ext.form.FieldContainer
  • 实例讲解
    • Ext.form.Panel
      • 重要的配置项
        • title:’‘,bodyStyle:’‘,frame : ,height: ,width :,
        • renderTo:’‘,defaultType:’‘,defaults:{}
      • 由于混入了Ext.form.Labelable，可以配置
        • labelSeparator 字段名字和值的分割符号、labelWidth 标签宽度
    • Ext.form.field.Text 文本框(xtype: textfield)
      • 重要的配置项
        • width : 150,allowBlank: false, //不能是空
        • labelAlign :’left’,msgTarget:’side’//在字段的右面展示数据
    • Ext.form.field.TextArea
      • getValues()用法
  • 代码
    Ext.onReady(function(){
    //-------------------------------------
    Ext.define("person",{
        extend:'Ext.data.Model',
        fields:[
            {name:'userName',type:'auto'},
            {name:'password',type:'auto'}
        ]
    });
    var p = new person({userName:'yunfengcheng2008@126.com',password:"123456"});
    //-------------------------------------
    var passTest = /[123]/i
    Ext.apply(Ext.form.field.VTypes,{
        myPass :function(val,field){
            return passTest.test(val);
        },
        myPassText:"密码格式错误",
        myPassMask:/[123]/i
    });
    //-------------------------------------
    var textForm = Ext.create("Ext.form.Panel",{
        title : "form中文本框实例",
        bodyStyle :'padding:5 5 5 5',
        frame : true,
        height : 120,
        width : 300,
        id:'my_form',
        renderTo:'formDemo',
        defaultType:'textfield',
        defaults:{
            labelSeparator :": ",
            labelWidth : 50,
            width : 200,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left'
        },
        items:[{
            fieldLabel : "Name",
            name:'userName',
            id:'userName',
            selectOnFocus : true,
            regex:/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
            regexText:"请用邮箱来注册",
            grow:false//是否在这个表单字段规定长度内自动根据文字的内容进行伸缩
        },{
            fieldLabel : "Pass",
            name:'password',
            id:'password',
            inputType:'password',
            vtype:'myPass'
        }],
        buttons: [
          {text:'登陆系统',handler:function(b){
            //我没想通过base来得到数值,那我们就要先得到base 
            //那么base我们有什么办法来的到呢?
            //很简单 通过 Ext.form.Basic(findField( String id ) : void)
            //那么Ext.form.Basic如何得到呢?
            //很简单Ext.form.Panel (getForm( ))
            //Ext.form.Panel如何得到呢?
            //很简单 1>通过ID来的
            var formObj = Ext.getCmp("my_form");
            var basic = formObj.getForm();
            var nameField = basic.findField("userName");
            var nameValue = nameField.getValue();
            alert(nameValue);
          }},{
            text:'重置',handler:function(b){
                var formObj = Ext.getCmp("my_form");
                var basic = formObj.getForm();
                basic.reset();
            }
          },{
            text:'装在数据',handler:function(b){
                var formObj = Ext.getCmp("my_form");
                var basic = formObj.getForm();
                basic.loadRecord(p);
            }           
          }
        ]       
    })
});
    • 数字框
    • CheckBox,radio
    • CheckGroup,RadioGroup
    • Trigger 触发器字段
      • 他指派了一个没有任何动作的接触按钮,需要给他加上不同的动作
  • TextArea.js
    Ext.onReady(function(){

    var textFomr = Ext.create("Ext.form.Panel",{
        title : "form中文本框大文本的实例",
        bodyStyle :'padding:5 5 5 5',
        frame : true,
        height : 250,
        width : 400,
        id:'my_form',
        renderTo:'formDemo',
        defaultType:'textfield',
        defaults:{
            labelSeparator :": ",
            labelWidth : 50,
            width : 200,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left'
        },
        items:[{
            fieldLabel:'Name',
            name:'userName',
            id:'userName',
            selectOnFocus:true
        },{
            xtype:'textareafield',
            width:300,
            height:150,
            name:'info',
            fieldLabel:'Info'
        }],
        buttons: [
          {text:'登陆系统',handler:function(b){
            var formObj = Ext.getCmp("my_form");
            var basic = formObj.getForm();
                console.log(basic.getValues());
          }}]
    })
})
  • number.js
    Ext.onReady(function(){

    var textFomr = Ext.create("Ext.form.Panel",{
        title : "form中文本框数字框的实例",
        bodyStyle :'padding:5 5 5 5',
        frame : true,
        height : 250,
        width : 400,
        id:'my_form',
        renderTo:'formDemo',
        defaultType:'numberfield',
        defaults:{
            labelSeparator :": ",
            labelWidth : 80,
            width : 200,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left'
        },
        items:[{
            fieldLabel:'整数微调',
            allowDecimals:false,//叫你不能输入小数
            name:'num1',
            id:'num1'
        },{
            fieldLabel:'整数',
            allowDecimals:false,//叫你不能输入小数
            name:'num2',
            id:'num2',
            hideTrigger : true
        },{
            fieldLabel:'小数',
            name:'num3',
            id:'num3',
            emptyText :'请输入小数',
            hideTrigger : false,
            decimalPrecision:3
        },{
            fieldLabel:'定界小数',
            name:'num3',
            id:'num3',
            minValue:10,
            maxValue:100,
            emptyText :'请输入小数',
            hideTrigger : false,
            decimalPrecision:3
        },{
            fieldLabel:'输入限定',
            name:'num4',
            id:'num4',
            baseChars:'01',
            hideTrigger : true
        },{
            fieldLabel:'限定步长',
            name:'num5',
            id:'num5',
            step:0.8,
            hideTrigger : false,
            value:'20'
        },{
            fieldLabel:'只读字段',
            name:'num6',
            id:'num6',
            step:0.8,
            hideTrigger : false,
            value:'20',
            //readOnly:true
            disabled : true
        }],
        buttons: [
          {text:'登陆系统',handler:function(b){
            var formObj = Ext.getCmp("my_form");
            var basic = formObj.getForm();
                console.log(basic.getValues());
        }}]
    })
})
  • checkbox.js
    Ext.onReady(function(){
    var textFomr = Ext.create("Ext.form.Panel",{
        title : "form中文本框选框的实例",
        bodyStyle :'padding:5 5 5 5',
        frame : true,
        height : 250,
        width : 400,
        id:'my_form',
        renderTo:'formDemo',
        defaults:{
            labelSeparator :": ",
            labelWidth : 50,
            width : 200,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left'
        },
        items:[{
            xtype:'radiofield',
            boxLabel :'男',
            inputValue:'m',
            fieldLabel:'性别',
            checked:true,
            name:'sex'
        },{
            xtype:'radiofield',
            boxLabel :'女',
            inputValue:'w',
            fieldLabel:'性别',
            name:'sex'
        },{
            xtype:'checkboxfield',
            inputValue:'1',
            name:'hobby',
            boxLabel:'唱歌',
            fieldLabel:'爱好'
        },{
            xtype:'checkboxfield',
            inputValue:'2',
            name:'hobby',
            boxLabel:'看书',
            fieldLabel:'爱好'
        },{
            xtype:'checkboxfield',
            inputValue:'3',
            name:'hobby',
            checked:true,
            boxLabel:'编程',
            fieldLabel:'爱好'
        },{
            xtype:'checkboxfield',
            inputValue:'4',
            name:'hobby',
            boxLabel:'交友',
            fieldLabel:'爱好'
        }],
        dockedItems:[{
            xtype:'toolbar',
            dock:'top',
            items:[{
                text:'选择全部的爱好',
                iconCls:'table_comm',
                handler:function(){
                    var formObj = Ext.getCmp("my_form");
                    var basic = formObj.getForm();
                    var fields = basic.getFields();
                    fields.each(function(field){
                        if("hobby" == field.getName()){
                            field.setValue(true)
                        }
                    })
                }
            }]
        }],
        buttons: [
          {text:'登陆系统',handler:function(b){
            var formObj = Ext.getCmp("my_form");
            var basic = formObj.getForm();
                console.log(basic.getValues());
          }}]
    })
})
  • checkboxgroup.js
    Ext.onReady(function(){
    var textFomr = Ext.create("Ext.form.Panel",{
        title : "form中文本框选框的实例",
        bodyStyle :'padding:5 5 5 5',
        frame : true,
        height : 250,
        width : 400,
        id:'my_form',
        renderTo:'formDemo',
        defaults:{
            labelSeparator :": ",
            labelWidth : 50,
            width : 200,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left'
        },
        items:[{
            xtype:'radiogroup',
            fieldLabel:'性别',
            columns:2,
            items:[{
                    xtype:'radiofield',
                    boxLabel :'男',
                    inputValue:'m',
                    checked:true,
                    name:'sex'
                },{
                    xtype:'radiofield',
                    boxLabel :'女',
                    inputValue:'w',
                    name:'sex'
                }]
            },{
                xtype:'checkboxgroup',
                fieldLabel:'爱好',
                width:335,
                columns:4,  
            items:[{
                    xtype:'checkboxfield',
                    inputValue:'1',
                    name:'hobby',
                    boxLabel:'唱歌'
                },{
                    xtype:'checkboxfield',
                    inputValue:'2',
                    name:'hobby',
                    boxLabel:'看书'
                },{
                    xtype:'checkboxfield',
                    inputValue:'3',
                    name:'hobby',
                    checked:true,
                    boxLabel:'编程'
                },{
                    xtype:'checkboxfield',
                    inputValue:'4',
                    name:'hobby',
                    boxLabel:'交友'
            }]
        }],
        dockedItems:[{
            xtype:'toolbar',
            dock:'top',
            items:[{
                text:'选择全部的爱好',
                iconCls:'table_comm',
                handler:function(){
                    var formObj = Ext.getCmp("my_form");
                    var basic = formObj.getForm();
                    var fields = basic.getFields();
                    fields.each(function(field){
                        if("hobby" == field.getName()){
                            field.setValue(true)
                        }
                    })
                }
            }]
        }],
        buttons: [
          {text:'登陆系统',handler:function(b){
            var formObj = Ext.getCmp("my_form");
            var basic = formObj.getForm();
                console.log(basic.getValues());
          }}]
    })
})
  • Trigger.js
    Ext.onReady(function(){

    var textFomr = Ext.create("Ext.form.Panel",{
        title : "form中文本框触发器的实例",
        bodyStyle :'padding:5 5 5 5',
        frame : true,
        height : 250,
        width : 400,
        id:'my_form',
        renderTo:'formDemo',
        defaults:{
            labelSeparator :": ",
            labelWidth : 50,
            width : 200,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left'
        },
        items:[{
            xtype:'triggerfield',
            fieldLabel:'Name',
            name:'userName',
            id:'userName',
            onTriggerClick:function(e){
                var formObj = Ext.getCmp("my_form");
                var basic = formObj.getForm();
                console.log(basic.getValues());
            }
        }]
    })
})
    • comboBox组件
      • Ext.form.field.ComboBox
      • Ext.view.BoundList 约束列表
      • 本地下拉框
      • Time
      • Date
  • combobox.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    //部门类
    Ext.define("department",{
        extend:'Ext.data.Model',
        fields:[
            {name:'name'},
            {name:'id'}
        ]
    });
    var st = Ext.create("Ext.data.Store",{
        model:'department',
        data:[
            {name:'销售部',id:'001'},
            {name:'人事部',id:'002'},
            {name:'研发部',id:'003'},
            {name:'产品部',id:'004'},
            {name:'实施部',id:'0`05'},
            {name:'法务部',id:'006'}
        ]
    });
    Ext.create("Ext.form.Panel",{
        title:'本地combobox实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:100,
        width:270,
        frame:true,
        defaults:{
            labelSeparator :": ",
            labelWidth : 70,
            width : 200,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left'
        },
        items:[{
            xtype:'combobox',
            listConfig:{//控制下拉列表的样式
                emptyText:'没有找到匹配的数值',
                maxHeight:200
            },
            fieldLabel:'选择部门',
            name:'post',
            queryMode:'local',//[local|remot]
            store:st,
            valueField:"id",
            displayField :'name',
            forceSelection:true,//不运行使用数据集合中没有的数值
            typeAhead : true,
            value:'001'
        }]
    });
});
  • date.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create("Ext.form.Panel",{
        title:'本地combobox实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:100,
        width:270,
        frame:true,
        defaults:{
            labelSeparator :": ",
            labelWidth : 70,
            width : 200,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left'
        },
        items:[{
            xtype:'datefield',
            fieldLabel:'工作日',
            minValue:'01/01/2011',
            maxValue:'31/12/2011',
            disabledDays :[0,6],
            disabledDates:['11年11月08日'],
            disabledDatesText:'这个日期你不能选择'
        }]
    });
});
  • synccombobox.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    //部门类
    Ext.define("department",{
        extend:'Ext.data.Model',
        fields:[
            {name:'name'},
            {name:'id'},
            {name:'c'}
        ]
    });
    var st = Ext.create("Ext.data.Store",{
        model:'department',
        pageSize:4,
        proxy:{
            type:'ajax',
            url:'/extjs/extjs!getComboBox.action'
        }
    });
    Ext.create("Ext.form.Panel",{
        title:'本地combobox实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:100,
        width:470,
        frame:true,
        defaults:{
            labelSeparator :": ",
            labelWidth : 70,
            width : 300,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left',
            pageSize:4
        },
        items:[{
            xtype:'combobox',
            listConfig:{//控制下拉列表的样式
                emptyText:'没有找到匹配的数值',
                maxHeight:200,
                getInnerTpl :function(){
                    return "<div class='{c}'>{name}.{id}</div>";
                }
            },
            fieldLabel:'城市',
            name:'post',
            queryMode:'remot',//[local|remot]
            store:st,
            valueField:"id",
            minChars:1,
            triggerAction :'all',
            queryDelay : 400,
            queryParam:'whereSql',
            multiSelect:true,//允许多选
            displayField :'name'//,
            //forceSelection:true,//不运行使用数据集合中没有的数值
            //typeAhead : true,
            //value:'001'
        }]
    });
});
  • time.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create("Ext.form.Panel",{
        title:'本地combobox实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:100,
        width:270,
        frame:true,
        defaults:{
            labelSeparator :": ",
            labelWidth : 70,
            width : 200,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left'
        },
        items:[{
            xtype:'timefield',
            fieldLabel:'上班时间',
            minValue:'9:00',
            maxValue:'18:00',
            minText:'时间要大于{0}',
            maxText:'时间要小于{0}',
            format:'G时',
            increment:60,
            invalidText:'时间格式错误',
            pickerMaxHeight :100 
        }]
    });
});
    • Ext.form.field.Hidden
    • Ext.form.field.HtmlEditor
    • Ext.form.field.Display 就是为了展示的字段
    • Ext.form.Label
    • Ext.form.FieldSet
    • Ext.form.FieldContainer
    • Ext.form.field.File
  • FieldContainer.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create("Ext.form.Panel",{
        title:'本地FieldContainer实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:100,
        width:570,
        defaults:{
            msgTarget : 'side',
            labelAlign:'left'
        },      
        frame:true,
        items: [{
            xtype: 'fieldcontainer',
            fieldLabel: '人员信息',
            combineErrors : true,//是否合并展示错误信息
            combineLabels: true,//合并展示标签的信息,配合其他使用
            labelConnector :',',
            layout: {
                type:'hbox',//横排布局(这个起了关键性在作用)
                align:'middle'//垂直居中
            },
            fieldDefaults:{
                hideLabel:true,//以藏label
                allowBlank:false//不允许是空         
            },
            defaultType:'textfield',
            items: [{
                xtype:'label',
                forId:'name',
                text:'姓名'
            },{
                fieldLabel: 'name',//虽然被隐藏但是很有用(展示错误信息)
                name: 'name',
                inputId:'name'
            },{
                xtype:'label',
                forId:'photo',
                text:'电话'
            },{xtype: 'displayfield', value: ' ( '},{
                name: 'photo',
                fieldLabel: 'photo',
                inputId:'photo'
            },{xtype: 'displayfield', value: ' ) '}]
        }],
        buttons: [{
            text: '提交',
            handler: function() {
                //up的源码讲解
                this.up('form').getForm().submit({
                    params: {
                        info: 'age是隐藏字段'
                    }
                });
            }
        }]      
    });
});
  • cosupload.jsp
    <%@ page language="java" contentType="text/html; charset=GBk"
    pageEncoding="GBK"%>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>
<%@ page import="com.hd.util.RandomFileRenamePolicy" %>
<%@page import="com.oreilly.servlet.*"%>
<%
    //----------------------------------------
    //----------------------------------------
    String root = request.getSession().getServletContext().getRealPath("/");
    String savePath = root + "file-library\\";
    int maxPostSize = 3 * 5 * 1024 * 1024;
    RandomFileRenamePolicy frp = new RandomFileRenamePolicy();
    MultipartRequest multi = new MultipartRequest(request, savePath, maxPostSize, "utf-8",frp);
    String fieldIds = "";
    //取得所有已上传文件的名字，返回枚举类型。
    Enumeration filesName = multi.getFileNames();
    //遍历返回的枚举类型，COS可以上传多个文件，当表单中有多个文本域标签时，使用while关键字遍历.
    long l = 0L;
    String fileType = null;
    String fileName = null;
    while(filesName.hasMoreElements()){
        //当发现枚举类型中包含文件对象，获取文件对象在枚举中的名字
        String fname = (String)filesName.nextElement();
        //通过名字获取文件，返回java文件对象
        File file = multi.getFile(fname);
        //判断是否获得到文件
        if(file != null){
            //获取文件的真实名字(以便能存储到数据库中)
            fileName = multi.getFilesystemName(fname);
            fileType = fileName.substring(fileName.lastIndexOf(".")+1);
            RandomAccessFile raFile = new RandomAccessFile(new File(savePath+fileType+"\\"+fileName),"r"); 
            l = raFile.length(); 
            fieldIds = fieldIds + fileName+",";
        }
    }
    fieldIds = fieldIds.substring(0,fieldIds.length()-1);
    response.setContentType("text/html;charset=GBK");
    response.getWriter().print("{'address':'"+RandomFileRenamePolicy.fp+"','docName':'"+RandomFileRenamePolicy.fn+"','fileType':'"+fileType+"','docCode':'"+fileName+"','size':'"+l+"','success':true,'message':'上传成功','ids':'"+fieldIds+"'}");
%>
  • Display.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create("Ext.form.Panel",{
        title:'本地Display实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:100,
        width:270,
        frame:true,
        defaults:{
            labelSeparator :": ",
            labelWidth : 70,
            width : 200,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left'
        },
        items:[{
            xtype:'displayfield',
            name:'name',
            value:'uspcat.com',
            fieldLabel:'展示'
        }],
        buttons:[{
            text:'提交',
            handler:function(){
                this.up("form").getForm().submit({
                    params:{
                        info:'age是隐藏字段'
                    }
                });
            }
        }]
    }); 
})
  • FieldContainer.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create("Ext.form.Panel",{
        title:'本地FieldContainer实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:100,
        width:500,
        frame:true,
        defaults:{
            msgTarget:'side',
            labelAlign:'left'
        },
        items:[{
            xtype:'fieldcontainer',
            layout:{
                type:'hbox',
                align:'middle'
            },
            combineLabels:true,
            combineErrors:true,
            fieldDefaults:{
                hideLabel:true,//默认字段会隐藏lebel
                allowBlank:false
            },
            defaultType:'textfield',
            items:[{
                xtype:'label',
                forId:'name',
                text:'姓名'
            },{
                fieldLabel:'name',
                name:'name',
                inputId:'name'
            },{
                xtype:'label',
                forId:'phone',
                text:'电话'
            },{
                fieldLabel:'phone',
                name:'phone',
                inputId:'phone'
            }]
        }],
        buttons:[{
            text:'提交',
            handler:function(){
                this.up("form").getForm().submit({
                    params:{
                        info:'age是隐藏字段'
                    }
                });
            }
        }]
    }); 
})
  • FieldSet.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create("Ext.form.Panel",{
        title:'本地FieldSet实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:300,
        width:270,
        frame:true,
        items:[{
            title:'组合',
            xtype:'fieldset',
            collapsible:true,//可以展示伸缩的按钮
            defaultType:'textfield',
            defaults:{
                anchor:'95%'
            },
            layout:'anchor',
            items:[{
                fieldLabel:'Name',
                name:'name'
            },{
                fieldLabel:'Email',
                name:'Email'
            }]
        },{
            title:'组合2',
            xtype:'fieldset',
            checkboxToggle:true,//启用复选框
            collapsible:true,//可以展示伸缩的按钮
            defaultType:'textfield',
            collapsed:true,//true默认set是收起的
            defaults:{
                anchor:'95%'
            },
            layout:'anchor',
            items:[{
                fieldLabel:'PASS',
                name:'PASS'
            },{
                fieldLabel:'INFO',
                name:'INFO'
            }]
        }],
        buttons:[{
            text:'提交',
            handler:function(){
                this.up("form").getForm().submit({
                    params:{
                        info:'age是隐藏字段'
                    }
                });
            }
        }]
    }); 
})
  • File.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create("Ext.form.Panel",{
        title:'本地File实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:100,
        width:270,
        frame:true,
        items:[{
            xtype:'filefield',
            name:'photo',
            fieldLabel:'照片',
            labelWidth:50,
            msgTarget:'side',
            allowBlank:false,
            anchor:'98%',
            buttonText:'请选中文件'
        }],
        buttons:[{
            text:'提交',
            handler:function(){
                this.up("form").getForm().submit({
                    url:'/platform/assistJsp/upload/cosupload.jsp',
                    waitMsg:'文件上传中',
                    success:function(){
                        Ext.Msg.alert("success","文件上传成功");
                    }
                });
            }
        }]
    }); 
})
  • hidden.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create("Ext.form.Panel",{
        title:'本地hiddenfield实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:100,
        width:270,
        frame:true,
        defaults:{
            labelSeparator :": ",
            labelWidth : 70,
            width : 200,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left'
        },
        items:[{
            xtype:'textfield',
            name:'name',
            fieldLabel:'name',
            value:'USPCAT.COM'
        },{
            xtype:'hiddenfield',
            name:'age',
            value:'1'
        }],
        buttons:[{
            text:'提交',
            handler:function(){
                this.up("form").getForm().submit({
                    params:{
                        info:'age是隐藏字段'
                    }
                });
            }
        }]
    }); 
})
  • HtmlEditor.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create("Ext.form.Panel",{
        title:'本地htmleditor实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:400,
        width:600,
        frame:true,
        items:[{
            xtype:'htmleditor',
            name:'HTML',
            height:320,
            width:580,
            fontFamilies :['宋体','黑体','楷体'],
            defaultLinkValue :'http://www.uspcat.com'
        }],
        buttons:[{
            text:'提交',
            handler:function(){
                this.up("form").getForm().submit({
                    params:{
                        info:'age是隐藏字段'
                    }
                });
            }
        }]
    }); 
})
  • Label.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create("Ext.form.Panel",{
        title:'本地Label实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:100,
        width:270,
        frame:true,
        items:[{
            xtype:'label',
            name:'name',
            text:'展示',
            forId :'myname',
            overCls:'a'
        },{
            xtype:'textfield',
            name:'age',
            value:'1',
            inputId:'myname',
            hideLabel:true
        }]
    }); 
})
    • 从Grid中装载数据 basic.loadRecord(Model);
    • 服务器装载数据
      • 异步装载
    • 表单的提交操作
      • Ajax提交数据
      • 传统方式提交
  • load.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create("Ext.form.Panel",{
        title:'本地load实例',
        renderTo:'formDemo',
        bodyPadding:'5 5 5 5',
        height:300,
        width:400,
        frame:true,
        defaults:{
            labelSeparator :": ",
            labelWidth : 70,
            width : 300,
            allowBlank: false,
            msgTarget : 'side',
            labelAlign:'left'
        },
        items:[{
            fieldLabel:'ID',
            xtype:'textfield',
            name:'userId',
            value:'001'//硬编码写值      
        },{
            fieldLabel:'NAME',
            xtype:'textfield',
            name:'userName',
            value:'uspcat.com'//硬编码写值
        },{
            fieldLabel:'AGE',
            xtype:'numberfield',
            name:'userAge',
            value:'1'//硬编码写值
        },{
            xtype:'textareafield',
            width:300,
            height:150,
            name:'info',
            fieldLabel:'INFO'       
        }],
        buttons:[{
            text:'提交数据',
            handler:function(){
                //得到form
                var basic = this.up("form").getForm();      
                basic.submit({
                    clientValidation: true,//要经过客户端验证的
                    url: '/extjs/extjs!getFormValues.action',
                    method:'POST',
                    success:function(){
                        Ext.Msg.alert('提示',"提交数据");
                    }
                });
            }
        },{
            text:'加载远程数据',
            handler:function(){
                //得到form
                var basic = this.up("form").getForm();
                //得到userId
                var userId = basic.findField("userId").getValue();
                basic.load({
                    params:{userId:userId},
                    url:'/extjs/extjs!getFormValues.action',
                    method:'POST',
                    success:function(form,action){
                        Ext.Msg.alert('提示',"加载成功");
                    },
                    failure:function(form,action){
                        Ext.Msg.alert('提示',"失败原因是: "+action.result.errorMessage);
                    }
                });

            }
        }]
    });
});

panel与layout

  • 面板
    • 类结构
      • Ext.Base
        • Ext.AbstractComponent
          • Ext.Component
            • Ext.container.AbstractContainer
              • Ext.container.Container
                • Ext.panel.AbstractPanel
                  • Ext.panel.Panel (是以前版本的Ext.Panel类)
    • 常见的子类
      • Ext.window.Window 控制窗口
      • Ext.form.Panel 控制form
      • Ext.panel.Table 控制grid
      • Ext.tab.Panel 控制工具条
      • Ext.menu.Menu 控制菜单
      • Ext.tip.Tip
      • Ext.container.ButtonGroup
    • 组成面板的部件
      • 底部工具栏,顶部工具栏,面板头部,面板底部,面板体
  • 布局
    • Auto自动布局[Ext.layout.container.Auto]
      • 组件没有指定任何布局方式的时候Auto布局就是默认的布局方式
      • 他采用最原始的HTML流式排版的布局方式
    • Fit自适应布局[Ext.layout.container.Fit]
      • 他是他的(第一个也是唯一个)子元素填满自身的body
    • Accordion折叠(手风琴)布局[Ext.layout.container.Accordion]
      • 他是初始化多个版面,当一个版面处于打开状态下,其他版面就会处于收起状态
    • Card卡片布局[Ext.layout.container.Card]
      • 和折叠布局不同之处在于他是自定义按钮来切换
    • Anchor锚点布局[Ext.layout.container.Anchor]
      • 根据容器的大小为其子元素进行的布局和定位
        • 百分比
        • 偏移量
        • 参考边
    • Absolute绝对定位[Ext.layout.container.Absolute]
    • 多选框布局Ext.layout.container.CheckboxGroup
    • Column列布局[Ext.layout.container.Column]
      • 列风格布局,每一列的宽度可以根据百分比或者固定数值来控制
    • Table表格布局[Ext.layout.container.Table]
      • 和传统的HTML布局方式一样的布局使用方法
    • Border边界布局[Ext.layout.container.Border]
      • 可以控制上,下,左,右,中
    • 盒布局
      • Ext.layout.container.Box
      • Ext.layout.container.VBox 竖排(竖直盒)
      • Ext.layout.container.HBox 横排(水平盒)
      • 主要参数
        • Box
          • flex 具有配置flex的子项,会根据占有总量的比之来决定自己的大小
          • pack 控制子元素展示位置[start左面(这时候flex生效),center(中间),end(右面)]
          • padding 边距
        • HBox
          • align[top,middle,stretch,stretchmax]
        • VBox
          • align[left,center,stretch,stretchmax]
    • Ext.tab.Panel
      • 选项卡布局
      • 特殊(他不在布局的包下面)
  • panel.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create('Ext.panel.Panel',{
        title: '[01]面板的头部[Ext.panel.Header]',
        width: 500,
        bodyPadding : 10,//边距
        height: 400,
        hideCollapseTool:false,
        collapsible :true,
        //animCollapse : false,//控制动画
        //frame : true,//渲染面板
        autoLoad:'/Learning-extjs4.0/lesson/26/ass.html',//只要是不是null自动加载内容
        html: '<p>[02]面板体</p>',//和上面的属性是冲突的
        autoScroll:true,//自动滚动条
        closable:true,//运行客户关闭
        closeAction:'destroy',//设置关闭动作[destroy|hide]
        bodyStyle: {
            background: '#ffc'
        },      
        renderTo: 'demo',
        tbar: [
          { xtype: 'button', text: '[03]顶部工具栏' }
        ],
        bbar: [
          { xtype: 'button', text: '[04]底部工具栏 ' }
        ],
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'bottom',
            ui: 'footer',
            items: [
                { xtype: 'component', flex: 1 },
                { xtype: 'button', text: '[05]面板底部',
                    handler:function(b){
                        b.up("panel").removeAll(true)//自动销毁
                    }
                }
            ]
        }],
        tools:[{
            type:'refresh',
            qtip: '刷新'
        },{
            type:'help',
            qtip: '帮助'
        },{
            id:'next',
            handler: function(event, toolEl, panel){
                panel.up("panel").insert(0,{
                        xtype:'panel',
                        width:100,
                        height:100,
                        bodyStyle: {
                            background: 'red'
                        }
                    }) 
            }
        }]      
    });
});
/**
    close、collapse、down、expand、gear、help、left、maximize、minimize
    minus、move、next、pin、plus、prev、print、refresh、resize、restore
    right、save、search、toggle、unpin、up
*/
  • auto.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create('Ext.Panel', {
        width: 800,
        height: 280,
        title: "AutoLayout布局的面板",
        layout: 'auto',//设置布局
        renderTo: 'demo',
        items: [{
            xtype: 'panel',
            title: '第一个面板',
            width: '75%', //站总体宽度的75%
            height: 90
        },{
            xtype: 'panel',
            title: '第二个面板',
            width: '75%',
            height: 90
        },{
            xtype: 'panel',
            title: '第三个面板',
            width: '99%',
            height: 90
        }]
    });
})
  • fit.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create('Ext.Panel', {
        width: 500,
        height: 280,
        title: "AutoLayout布局的面板",
        layout: 'fit',//设置布局
        renderTo: 'demo',
        items: [{
            xtype: 'panel',
            title: '第一个面板'
        },{
            xtype: 'panel',
            title: '第二个面板'
        }]
    });
})
  • Accordion.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create('Ext.panel.Panel', {
        title: 'Accordion布局',
        width: 300,
        height: 300,
        layout:'accordion',
        defaults: {
            bodyStyle: 'padding:15px'
        },
        layoutConfig: {
            titleCollapse: false,
            animate: true,
            activeOnTop: true
        },
        items: [{
            title: 'Panel 1',
            html: '面板1'
        },{
            title: 'Panel 2',
            html: '面板2'
        },{
            title: 'Panel 3',
            html: '面板3'
        }],
        renderTo: 'demo'
    });
});
  • card.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    var navigate = function(panel, direction,btn){
        var layout = panel.getLayout();
        layout[direction]();
        //next(),prev()
        //card的关键函数next( ) : Ext.Component,prev( ) : Ext.Component
        //getNext( ) : Ext.Component,getPrev( ) : Ext.Component
        Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
        Ext.getCmp('move-next').setDisabled(!layout.getNext());
    };
    Ext.create('Ext.Panel', {
        width: 500,
        height: 280,
        layout: 'card',//设置布局
        activeItem:0,//默认展示的子节点索引
        renderTo: 'demo',
        items: [{
            id: 'card-0',
            xtype: 'panel',
            title: '第一个面板',
            html:'第一个面板'
        },{
            id: 'card-1',
            xtype: 'panel',
            title: '第二个面板',
            html:'第二个面板'
        },{
            id: 'card-3',
            xtype: 'panel',
            title: '第三个面板',
            html:'第三个面板'
        }],
        index:1,//自定义索引
        titleInfo: "cardt布局的面板",
        listeners: {
            render:function(){ 
                var panel = this;
                panel.setTitle(panel.titleInfo+"("+(this.activeItem+1)+"/"+panel.items.length+")");
            }
        },
        bbar: [{
                id: 'move-prev',
                text: '上一页',
                handler: function(btn) {
                    var panel = btn.up("panel");
                    panel.index = panel.index-1;
                    panel.setTitle(panel.titleInfo+"("+panel.index+"/"+panel.items.length+")");
                    navigate(panel, "prev");
                },
                disabled: true
            },
            '->',
            {
                id: 'move-next',
                text: '下一页',
                handler: function(btn) {
                    var panel = btn.up("panel");
                    panel.index = panel.index+1;
                    panel.setTitle(panel.titleInfo+"("+panel.index+"/"+panel.items.length+")");                 
                    navigate(panel, "next");
                }
            }
        ]
    });
})
  • anchor.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create('Ext.Panel', {
        width: 500,
        height: 500,
        title: "Anchor布局的面板",
        layout: 'anchor',//设置布局
        renderTo: 'demo',
        items: [{
            xtype: 'panel',
            title: '75% 宽 and 20% 高',
            anchor: '75% 20%'
        },{
            xtype: 'panel',
            title: '偏移量 -300 宽 & -200 高',
            anchor: '-300 -200'     
        },{
            xtype: 'panel',
            title: '综合使用 -250 宽   20% 高',
            anchor: '-250 20%'
        }]
    });
})
  • Absolute.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create('Ext.Panel', {
        width: 200,
        height: 200,
        title: "absolute布局的面板",
        layout: 'absolute',//设置布局
        renderTo: 'demo',
        items:[{
            title: '子面板',
            x: 50,
            y: 50,
            width: 100,
            height: 100,
            html: '定位在 x:50, y:40'
        }]
    });
})
  • column.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create('Ext.Panel', {
        width: 1000,
        height: 200,
        title: "column布局的面板",
        layout: 'column',//设置布局
        renderTo: 'demo',
        items: [{
            title: '宽 = (总宽度-250)*25%',
            columnWidth: .25,//这个布局特有的写法
            html: 'Content'
        },{
            title: '宽 = (总宽度-250)*75%',
            columnWidth: .75,
            html: 'Content'
        },{
            title: '宽 = 250px',
            width: 250,
            html: 'Content'
        }]
    });
})
  • Table.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create('Ext.Panel', {
        width: 400,
        height: 230,
        title: "table布局的面板",
        layout: {
            type:'table',
            columns:4//四列
        },//设置布局
        defaults:{
            width: 100,
            height: 100,
            frame:true
        },
        renderTo: 'demo',
        items: [{
            title: "1",
            width:300,//这个布局特有的写法
            colspan: 3//跨三列
        },{
            title: '2',
            height:200,
            rowspan:2//跨两行
        },{
            title: '3'
        },{
            title: '4'
        },{
            title: '5'
        }]
    });
})
  • Border.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create('Ext.container.Viewport', {//一般是这样配合使用的
        //width: 1000,
        //height: 800,
        //renderTo: Ext.getBody(),
        title: "table布局的面板",
        layout:'border',
        defaults: {
            collapsible: true,
            split: true,
            bodyStyle: 'padding:15px'
        },
        items: [{
            title: '上面north',
            region: 'north',
            height: 100,
            cmargins: '5 0 0 0'
        },{
            title: '下面south',
            region: 'south',
            height: 150,
            minSize: 75,
            maxSize: 250,
            cmargins: '5 0 0 0'
        },{
            title: '左面west',
            region:'west',
            margins: '5 0 0 0',
            cmargins: '5 5 0 0',
            width: 175,
            minSize: 100,
            maxSize: 250
        },{
            title: '中间Content',
            collapsible: false,
            region:'center',
            margins: '5 0 0 0'
        },{
            title: '右面east',
            width: 175,
            region:'east',
            margins: '5 0 5 5'
        }]
    });
})
  • Box.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create('Ext.Panel', {
        width: 400,
        height: 230,
        renderTo: Ext.getBody(),
        title: "Vbox布局的面板",
        layout: {
            type: 'vbox',
            align : 'stretch',
            pack  : 'start'
        },
        items: [
            {html:'panel 1', flex:1},
            {html:'panel 2', height:150},
            {html:'panel 3', flex:2}
        ]
    });
})
  • tab.js
    Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 230,
        renderTo: Ext.getBody(),
        items: [{
            title: '第一个选项卡'
        }, {
            title: '第二个选项卡'
        }],
        buttons:[{
            text:'增加选项卡',
            handler:function(btn){
                var panel = btn.up("tabpanel");
                var index = panel.items.length+1;
                var tabPage = panel.add({
                    title: '第'+index+'个选项卡',
                    html:'我新添加的tab',
                    closable:true
                });
                panel.setActiveTab(tabPage);//启用激活他
            }
        }]
    });
})

chart

  • 图表分为坐标轴(axes)和图表序列(series)
    • axes 轴
      • 数值轴 Ext.chart.axis.Numeric
      • 时间轴 Ext.chart.axis.Time
      • 分类轴 Ext.chart.axis.Category
      • 仪表轴 Ext.chart.axis.Gauge
    • series 图表序列
      highlight高亮,label标题,tips提示,renderer格式化
      • 折线图 Ext.chart.series.Line
      • 柱形图 Ext.chart.series.Column
      • 饼状图 Ext.chart.series.Pie
      • 条形图 Ext.chart.series.Bar
      • 面积图 Ext.chart.series.Area
      • 雷达图 Ext.chart.series.Radar 略
      • 散点图 Ext.chart.series.Scatter 略
      • 仪表图 Ext.chart.series.Gauge
  • Numeric.js
    var dataStore = Ext.create("Ext.data.Store",{
    fields:[
        'name','data'
    ],
    data:[
        {name:'0~10岁',data:120},
        {name:'11~18岁',data:170},
        {name:'19~24岁',data:175}
    ]
});
var b1 = Ext.create("Ext.Window",{
    width:600,
    height:500,
    title:'年龄身高分布图',
    shadow:false,
    maximizable:true,
    layout:'fit',
    items:[{
        xtype:'chart',
        style:'background:#fff',//控制背景颜色
        animate :true,//运行动画
        shadow : true,
        theme:"Category1",//皮肤
        store:dataStore,
        axes:[{
            type:'Numeric',
            position:'left',//放置到左边
            dashSize:5,//引导线的宽度设置
            title:'身高分布(CM)',
            fields:['data'],//显示的数据索引
            majorTickSteps:5,
            minorTickSteps:6,
            grid:{
                odd:{//奇数行
                    opacity:1,//不透明
                    'stroke-width':0.5//表格线宽
                },
                even:{//偶数行
                    opacity:1,//不透明
                    stroke:'#DDD',
                    'stroke-width':0.5//表格线宽
                }
            }
        },{
            type:'Category',
            position:'bottom',
            fields:['name'],
            title:'年龄段',
            grid:true
        }],//轴
        series:[{
            type:'line',
            axis:'left',
            xField: 'name',
            yField: 'data',
            highlight:true,
            tips:{
              trackMouse: true,
              width: 140,
              height: 28,
              renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('name') + ': ' +
                storeItem.get('data') + 'CM');
              }
            }
        }]//序列
    }]
});
  • Column.js
      //定义数据集合
  var columnStore1 =  Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [
            {name:"0~10岁",data:20},
            {name:"11~18岁",data:60},
            {name:"19~24岁",data:30}
        ]
    });
  var b2 = Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        hidden: false,
        closeAction:'hide',
        maximizable: true,
        title: '柱形图展示图表',
        layout: 'fit',
        tbar: [{
            text: '改变数据',
            handler: function() {
                columnStore1.loadData([
                    {name:"0~10岁",data:50},
                    {name:"11~18岁",data:30},
                    {name:"19~24岁",data:20}
                ]);
            }
        }],
        items: {
            id: 'chartCmp',
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            shadow: true,
            store: columnStore1,
            axes: [{//轴
                type: 'Numeric',
                position: 'left',
                fields: ['data'],
                title: '人数',
                grid: true,
                minimum: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: '年龄段'
            }],//序列
            series: [{
                type: 'column',
                axis: 'left',
                highlight: true,
                tips: {//提示
                  trackMouse: true,
                  width: 140,
                  height: 28,
                  renderer: function(storeItem,item) {
                        this.setTitle(storeItem.get('name') + ': ' 
                        + storeItem.get('data') + ' 名');                    
                  }
                },
                //格式化
                renderer: function(sprite, record, attr, index, store){
                        var fieldValue = Math.random() * 20 + 10;
                        var value = (record.get('data') >> 0) % 3;
                        var color = ['rgb(213, 70, 121)', 
                                     'rgb(44, 153, 201)', 
                                     'rgb(146, 6, 157)', 
                                     'rgb(49, 149, 0)', 
                                     'rgb(249, 153, 0)'][value];
                        return Ext.apply(attr, {
                            fill: color
                        });
                } ,                 
                label: { //控制柱形图label
                  display: 'insideEnd',
                  'text-anchor': 'middle',
                    field: 'data',
                    renderer: Ext.util.Format.numberRenderer('0'),
                    orientation: 'vertical',
                    color: '#333'
                },
                xField: 'name',
                yField: 'data'
            }]
        }
    });
  • line.js
      //定义数据集合
  var columnStore2 =  Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1','data2','data3','data4'],
        data: [
            {name:"一月月考",data1:85,data2:76,data3:94,data4:80},
            {name:"二月月考",data1:96,data2:72,data3:87,data4:63},
            {name:"三月月考",data1:70,data2:66,data3:68,data4:78},
            {name:"四月月考",data1:90,data2:78,data3:76,data4:90}
        ]
    });
var b3 = Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        hidden: false,
        maximizable: true,
        closeAction:'hide',
        title: 'Line Chart',
        renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: '产看另外一个人的成绩',
            handler: function() {
                columnStore2.loadData([
                    {name:"一月月考",data1:75,data2:86,data3:84,data4:90},
                    {name:"二月月考",data1:86,data2:62,data3:87,data4:93},
                    {name:"三月月考",data1:80,data2:96,data3:68,data4:98},
                    {name:"四月月考",data1:60,data2:98,data3:76,data4:60}
                ]);
            }
        }],
        items: {
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            store: columnStore2,
            shadow: true,//阴影
//          mask: 'horizontal',//创建遮罩
//          listeners: {//配合遮罩用的隐藏
//              select: {
//                  fn: function(me, selection) {
//                      //me.setZoom(selection);
//                      me.mask.hide();
//                  }
//              }
//          },            
            theme: 'Category1',
            legend: {
                position: 'right'
            },
            axes: [{//轴
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['data1', 'data2', 'data3', 'data4'],
                title: '分数',
                minorTickSteps: 1,//内部去也的跨度
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 0.5
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: '历次考试'
            }],
            series: [{//序列1
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'name',
                yField: 'data1',//展示在图例上的
                title  :'语文',
                markerConfig: {//标记配置
                    type: 'cross',//交叉
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            },{//序列2
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'name',
                yField: 'data2',
                title  :'数学',
                markerConfig: {
                    type: 'cross',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }, {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',//位置
                smooth: true,
                xField: 'name',
                yField: 'data3',
                title  :'英语',
                markerConfig: {
                    type: 'cross',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }, {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                smooth: true,
                fill: true,//填充颜色
                xField: 'name',
                yField: 'data4',
                title  :'计算机',
                markerConfig: {
                    type: 'circle',//圈
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }]
        }
    });
  • Pie.js
    
  var columnStore5 =  Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [
            {name:"0~10岁",data:20},
            {name:"11~18岁",data:60},
            {name:"19~24岁",data:30}
        ]
    });
var b4 = Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        title: '饼图示例',
        layout: 'fit',
        closeAction:'hide',
        tbar: [{
            text: '数据变换',
            handler: function() {
                columnStore5.loadData([
                    {name:"0~10岁",data:40},
                    {name:"11~18岁",data:20},
                    {name:"19~24岁",data:40}
                ]);
            }
        }, {
            enableToggle: true,
            pressed: false,
            text: 'Donut(设置内圆)',
            toggleHandler: function(btn, pressed) {
                var chart = Ext.getCmp('chartCmp');
                //设置图标序列的模式
                chart.series.first().donut = pressed ? 35 : false;//内弧度
                chart.refresh();
            }
        }],
        items: {
            xtype: 'chart',
            id: 'chartCmp',
            animate: true,
            store: columnStore5,
            shadow: true,
            legend: {
                position: 'right'
            },
            insetPadding: 60,
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                field: 'data',
                showInLegend: true,
                donut: false,//内环状线圈
                tips: {//提示
                  trackMouse: true,
                  width: 140,
                  height: 28,
                  renderer: function(storeItem, item) {
                    var total = 0;
                    columnStore5.each(function(rec) {
                        total += rec.get('data');
                    });
                    this.setTitle(storeItem.get('name') + ': ' 
                        + Math.round(storeItem.get('data')/total*100)
                        + '%');
                  }
                },
                highlight: {//高亮
                  segment: {
                    margin: 20
                  }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial'
                }
            }]
        }
    });
  • Bar.js
    

  var columnStore6 =  Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [
            {name:"0~10岁",data:122},
            {name:"11~18岁",data:163},
            {name:"19~24岁",data:234},
            {name:"15~35岁",data:737},
            {name:"36~42岁",data:453},
            {name:"43~60岁",data:540}
        ]
    });
var b5 = Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        hidden: false,
        maximizable: true,
        title: 'Bar Renderer',
        renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: '重新装载数据',
            handler: function() {
                columnStore6.loadData( [
                    {name:"0~10岁",data:221},
                    {name:"11~18岁",data:363},
                    {name:"19~24岁",data:135},
                    {name:"15~35岁",data:432},
                    {name:"36~42岁",data:756},
                    {name:"43~60岁",data:649}
                ]);
            }
        }],
        items: {
            xtype: 'chart',
            animate: true,
            style: 'background:#fff',
            shadow: false,//阴影
            store: columnStore6,
            axes: [{
                type: 'Numeric',
                position: 'bottom',
                fields: ['data'],
                label: {
                   renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: '人数',
                minimum: 0
            }, {
                type: 'Category',
                position: 'left',
                fields: ['name'],
                title: '年龄分布'
            }],
            series: [{
                type: 'bar',
                axis: 'bottom',
                label: {
                    display: 'insideEnd',
                    field: 'data1',
                    renderer: Ext.util.Format.numberRenderer('0'),
                    orientation: 'horizontal',
                    color: '#333',
                    'text-anchor': 'middle',
                    contrast: true
                },
                xField: 'name',
                yField: ['data'],
                renderer: function(sprite, record, attr, index, store) {
                    var fieldValue = Math.random() * 20 + 10;
                    var value = (record.get('data') >> 0) % 5;
                    var color = ['rgb(213, 70, 121)', 
                                 'rgb(44, 153, 201)', 
                                 'rgb(146, 6, 157)', 
                                 'rgb(49, 149, 0)', 
                                 'rgb(249, 153, 0)'][value];
                    return Ext.apply(attr, {
                        fill: color
                    });
                }
            }]
        }
    });
  • area.js
     //Ext.onReady(function () {
 var columnStore7 =  Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1','data2','data3','data4'],
        data: [
            {name:"一月月考",data1:85,data2:76,data3:94,data4:80},
            {name:"二月月考",data1:96,data2:72,data3:87,data4:63},
            {name:"三月月考",data1:70,data2:66,data3:68,data4:78},
            {name:"四月月考",data1:90,data2:78,data3:76,data4:90}
        ]
    });
  var b6 = Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        hidden: false,
        shadow: false,
        maximizable: true,
        title: 'Area Chart',
        renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: '切换数据',
            handler: function() {
                columnStore7.loadData([
                    {name:"一月月考",data1:75,data2:86,data3:84,data4:90},
                    {name:"二月月考",data1:86,data2:62,data3:87,data4:93},
                    {name:"三月月考",data1:80,data2:96,data3:68,data4:98},
                    {name:"四月月考",data1:60,data2:98,data3:76,data4:60}
                ]);
            }
        }, {
            enableToggle: true,
            pressed: true,
            text: '动画开启|关闭',
            toggleHandler: function(btn, pressed) {
                var chart = Ext.getCmp('chartCmp');
                chart.animate = pressed?{easing: 'ease', duration: 500 }:false;
            }
        }],
        items: {
            id: 'chartCmp',
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            store: columnStore7,
            legend: {
                position: 'bottom'
            },
            axes: [{
                type: 'Numeric',
                grid: true,
                position: 'left',//位置
                fields: ['data1', 'data2', 'data3', 'data4'],
                title: '分数分布',
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 1
                    }
                },
                minimum: 0,
                adjustMinimumByMajorUnit: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: '每月考试',
                grid: true,
                label: {
                    rotate: {
                        degrees: 315
                    }
                }
            }],
            series: [{
                type: 'area',
                highlight: false,
                axis: 'left',
                xField: 'name',
                yField: ['data1', 'data2', 'data3', 'data4'],
                style: {
                    opacity: 0.93
                }
            }]
        }
    }); 
 //})
  • area.js(加)
    Ext.require('Ext.chart.*');
Ext.require('Ext.data.*');
Ext.require('Ext.Window');
Ext.require('Ext.layout.container.Fit');
Ext.require('Ext.fx.target.Sprite');
//规划数据
var jsonData = [
    {
        date: '1/1/2009',
        IE: 44.8,
        Firefox: 45.5,
        Chrome: 3.9,
        Safari: 3,
        Opera: 2.3,
        Other: 0.5
    },
    {
        date: '2/1/2009',
        IE: 43.6,
        Firefox: 46.4,
        Chrome: 4,
        Safari: 3,
        Opera: 2.2,
        Other: 0.8
    },
    {
        date: '3/1/2009',
        IE: 43.3,
        Firefox: 46.5,
        Chrome: 4.2,
        Safari: 3.1,
        Opera: 2.3,
        Other: 0.6
    },
    {
        date: '4/1/2009',
        IE: 42.1,
        Firefox: 47.1,
        Chrome: 4.9,
        Safari: 3,
        Opera: 2.2,
        Other: 0.7
    },
    {
        date: '5/1/2009',
        IE: 41,
        Firefox: 47.7,
        Chrome: 5.5,
        Safari: 3,
        Opera: 2.2,
        Other: 0.6
    },
    {
        date: '6/1/2009',
        IE: 40.7,
        Firefox: 47.3,
        Chrome: 6,
        Safari: 3.1,
        Opera: 2.1,
        Other: 0.8
    },
    {
        date: '7/1/2009',
        IE: 39.4,
        Firefox: 47.9,
        Chrome: 6.5,
        Safari: 3.3,
        Opera: 2.1,
        Other: 0.8
    },
    {
        date: '8/1/2009',
        IE: 39.3,
        Firefox: 47.4,
        Chrome: 7,
        Safari: 3.3,
        Opera: 2.1,
        Other: 0.9
    },
    {
        date: '9/1/2009',
        IE: 39.6,
        Firefox: 46.6,
        Chrome: 7.1,
        Safari: 3.6,
        Opera: 2.2,
        Other: 0.9
    },
    {
        date: '10/1/2009',
        IE: 37.5,
        Firefox: 47.5,
        Chrome: 8,
        Safari: 3.8,
        Opera: 2.3,
        Other: 0.9
    },
    {
        date: '11/1/2009',
        IE: 37.7,
        Firefox: 47,
        Chrome: 8.5,
        Safari: 3.8,
        Opera: 2.3,
        Other: 0.7
    },
    {
        date: '12/1/2009',
        IE: 37.2,
        Firefox: 46.4,
        Chrome: 9.8,
        Safari: 3.6,
        Opera: 2.3,
        Other: 0.7
    },
    {
        date: '1/1/2010',
        IE: 36.2,
        Firefox: 46.3,
        Chrome: 10.8,
        Safari: 3.7,
        Opera: 2.2,
        Other: 0.8
    },
    {
        date: '2/1/2010',
        IE: 35.3,
        Firefox: 46.5,
        Chrome: 11.6,
        Safari: 3.8,
        Opera: 2.1,
        Other: 0.7
    },
    {
        date: '3/1/2010',
        IE: 34.9,
        Firefox: 46.2,
        Chrome: 12.3,
        Safari: 3.7,
        Opera: 2.2,
        Other: 0.7
    },
    {
        date: '4/1/2010',
        IE: 33.4,
        Firefox: 46.4,
        Chrome: 13.6,
        Safari: 3.7,
        Opera: 2.2,
        Other: 0.7
    },
    {
        date: '5/1/2010',
        IE: 32.2,
        Firefox: 46.9,
        Chrome: 14.5,
        Safari: 3.5,
        Opera: 2.2,
        Other: 0.7
    },
    {
        date: '6/1/2010',
        IE: 31,
        Firefox: 46.6,
        Chrome: 15.9,
        Safari: 3.6,
        Opera: 2.1,
        Other: 0.8
    },
    {
        date: '7/1/2010',
        IE: 30.4,
        Firefox: 46.4,
        Chrome: 16.7,
        Safari: 3.4,
        Opera: 2.3,
        Other: 0.8
    },
    {
        date: '8/1/2010',
        IE: 30.7,
        Firefox: 45.8,
        Chrome: 17,
        Safari: 3.5,
        Opera: 2.3,
        Other: 0.7
    },
    {
        date: '9/1/2010',
        IE: 31.1,
        Firefox: 45.1,
        Chrome: 17.3,
        Safari: 3.7,
        Opera: 2.2,
        Other: 0.6
    },
    {
        date: '10/1/2010',
        IE: 29.7,
        Firefox: 44.1,
        Chrome: 19.2,
        Safari: 3.9,
        Opera: 2.2,
        Other: 0.9
    },
    {
        date: '11/1/2010',
        IE: 28.6,
        Firefox: 44,
        Chrome: 20.5,
        Safari: 4.0,
        Opera: 2.3,
        Other: 0.6
    },
    {
        date: '12/1/2010',
        IE: 27.5,
        Firefox: 43.5,
        Chrome: 22.4,
        Safari: 3.8,
        Opera: 2.2,
        Other: 0.6
    }
];
    //数据fields数据抽取
    var fields = ['IE', 'Chrome', 'Firefox', 'Safari', 'Opera', 'Other'];
    //创建数据
    var browserStore = Ext.create('Ext.data.JsonStore', {
        fields: fields,
        data: jsonData
    });

    var colors = ['rgb(47, 162, 223)',
                  'rgb(60, 133, 46)',
                  'rgb(234, 102, 17)',
                  'rgb(154, 176, 213)',
                  'rgb(186, 10, 25)',
                  'rgb(40, 40, 40)'];
    //扩展原始类[Ext.chart.theme.Base]属性colors
    Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
        constructor: function(config) {
            Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
                colors: colors
            }, config));
        }
    });

    var b7 = Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        hidden: false,
        shadow: false,
        maximizable: false,
        title: '浏览器使用分布',
        //renderTo: Ext.getBody(),
        layout: 'fit',
        items: {
            id: 'chartCmp',
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            theme: 'Browser:gradients',//皮肤
            defaultInsets: 30,
            store: browserStore,//数据引用
            legend: {
                position: 'right'//图例的设置
            },
            axes: [{//轴
                type: 'Numeric',
                position: 'left',
                fields: fields,
                title: '使用率 %',
                grid: true,
                decimals: 0,//小数进位数值 默认是2
                minimum: 0,//设置最小数值,如果没有设置则按章数据的最小数值自动计算
                maximum: 100//设置最大数值,如果没有设置则按照数据的最大数值自动计算
            }, {
                type: 'Category',//类型轴
                position: 'bottom',
                fields: ['date'],
                title: '2011年月度分布',
                label: {
                    renderer: function(v) {
                        return v.match(/([0-9]*)\/[0-9]*\/[0-9][0-9]([0-9]*)/).slice(1).join('/');
                    }
                }
            }],
            series: [{
                type: 'area',//面积图
                axis: 'left',
                highlight: true,//高亮
                tips: {//提示
                  trackMouse: true,
                  width: 170,
                  height: 28,
                  renderer: function(storeItem, item) {
                      this.setTitle(item.storeField + ' - '
                              + Ext.Date.format(new Date(storeItem.get('date')), 'M y')
                              + ' - ' + storeItem.get(item.storeField) + '%');
                  }
                },
                xField: 'name',
                yField: fields,
                style: {
                    lineWidth: 1,
                    stroke: '#666',
                    opacity: 0.86
                }
            }]
        }
    });
  • Gauge.js
    
   var s1 =  Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [
            {name:"0~10岁",data:20}
        ]
    });
      var s2 =  Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [
            {name:"0~10岁",data:50}
        ]
    });
      var s3 =  Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [
            {name:"0~10岁",data:30}
        ]
    });
 var b8 = Ext.create('Ext.Window', {
        width: 800,
        height: 250,
        minWidth: 650,
        minHeight: 225,
        title: 'Gauge Charts',
        tbar: [{
            text: '装载新的数据',
            handler: function() {
                s1.loadData([
                        {name:"0~10岁",data:50}
                    ]);
                s2.loadData([
                        {name:"0~10岁",data:20}
                    ]);
                s3.loadData([
                    {name:"0~10岁",data:70}
                ]);
            }
        }],
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items: [{//第一个仪表图
            xtype: 'chart',
            style: 'background:#fff',
            animate: {
                easing: 'elasticIn',
                duration: 1000
            },
            store: s1,
            insetPadding: 25,
            flex: 1,
            axes: [{
                type: 'gauge',
                position: 'gauge',
                minimum: 0,
                maximum: 100,
                steps: 10,
                margin: -10
            }],
            series: [{
                type: 'gauge',
                field: 'data',
                donut: false,
                colorSet: ['#F49D10', '#ddd']
            }]
        }, {//第二个仪表图
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            store: s2,
            insetPadding: 25,
            flex: 1,
            axes: [{
                type: 'gauge',
                position: 'gauge',
                minimum: 0,
                maximum: 100,
                steps: 10,
                margin: 7
            }],
            series: [{
                type: 'gauge',
                field: 'data',
                donut: 30,
                colorSet: ['#82B525', '#ddd']
            }]
        }, {//第三个仪表图
            xtype: 'chart',
            style: 'background:#fff',
            animate: {
                easing: 'bounceOut',
                duration: 500
            },
            store: s3,
            insetPadding: 25,
            flex: 1,
            axes: [{
                type: 'gauge',
                position: 'gauge',
                minimum: 0,
                maximum: 100,
                steps: 10,
                margin: 7
            }],
            series: [{
                type: 'gauge',
                field: 'data',
                donut: 80,
                colorSet: ['#3AA8CB', '#ddd']
            }]
        }]
    })
  • Radar.js
    
    var columnStore9 =  Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1','data2','data3','data4'],
        data: [
            {name:"一月月考",data1:85,data2:76,data3:94},
            {name:"二月月考",data1:96,data2:72,data3:87},
            {name:"三月月考",data1:70,data2:66,data3:68},
            {name:"四月月考",data1:50,data2:88,data3:56},
            {name:"五月月考",data1:80,data2:88,data3:36},
            {name:"六月月考",data1:40,data2:68,data3:96},
            {name:"七月月考",data1:60,data2:88,data3:86},
            {name:"八月月考",data1:70,data2:88,data3:96},
            {name:"九月月考",data1:80,data2:98,data3:66},
            {name:"十月月考",data1:90,data2:78,data3:76},
            {name:"十一月月考",data1:90,data2:78,data3:76},
            {name:"十二月月考",data1:90,data2:78,data3:76}
        ]
    });
  var b9 = Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        hidden: false,
        shadow: false,
        maximizable: true,
        style: 'overflow: hidden;',
        title: 'Radar Chart',
        renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: '装载数据',
            handler: function() {
                columnStore9.loadData( [
                    {name:"一月月考",data1:75,data2:86,data3:74},
                    {name:"二月月考",data1:96,data2:82,data3:87},
                    {name:"三月月考",data1:70,data2:96,data3:68},
                    {name:"四月月考",data1:50,data2:78,data3:56},
                    {name:"五月月考",data1:90,data2:88,data3:36},
                    {name:"六月月考",data1:80,data2:68,data3:96},
                    {name:"七月月考",data1:60,data2:88,data3:86},
                    {name:"八月月考",data1:70,data2:98,data3:86},
                    {name:"九月月考",data1:88,data2:98,data3:66},
                    {name:"十月月考",data1:70,data2:88,data3:96},
                    {name:"十一月月考",data1:90,data2:78,data3:76},
                    {name:"十二月月考",data1:90,data2:98,data3:76}
                ]);
            }
        }, {
            enableToggle: true,
            pressed: true,
            text: 'Animate',
            toggleHandler: function(btn, pressed) {
                var chart = Ext.getCmp('chartCmp');
                chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
            }
        }],
        items: {
            id: 'chartCmp',
            xtype: 'chart',
            style: 'background:#fff',
            theme: 'Category2',
            animate: true,
            store: columnStore9,
            insetPadding: 20,
            legend: {
                position: 'right'//图例
            },
            axes: [{//轴
                type: 'Radial',
                position: 'radial',
                label: {
                    display: true
                }
            }],
            series: [{
                type: 'radar',
                xField: 'name',
                yField: 'data1',
                showInLegend: true,//展示在图例
                showMarkers: true,
                markerConfig: {
                    radius: 5,
                    size: 5
                },
                style: {
                    'stroke-width': 2,
                    //fill: 'yellow'//没有填充
                    fill:'none'
                }
            },{
                type: 'radar',
                xField: 'name',
                yField: 'data2',
                showInLegend: true,
                showMarkers: true,
                markerConfig: {
                    radius: 5,
                    size: 5
                },
                style: {
                    'stroke-width': 2,
                    fill: 'none'
                }
            },{
                type: 'radar',
                xField: 'name',
                yField: 'data3',
                showMarkers: true,
                showInLegend: true,
                markerConfig: {
                    radius: 5,
                    size: 5
                },
                style: {
                    'stroke-width': 2,
                    fill: 'none'
                }
            }]
        }
    });
  • demo.js
     var chart;
    var generateData = (function() {
        var data = [], i = 0,
            last = false,
            date = new Date(2011, 1, 1),
            seconds = +date,
            min = Math.min,
            max = Math.max,
            random = Math.random;
        return function() {
            data = data.slice();
            data.push({
                date:  Ext.Date.add(date, Ext.Date.DAY, i++),
                visits: min(100, max(last? last.visits + (random() - 0.5) * 20 : random() * 100, 0)),
                views: min(100, max(last? last.views + (random() - 0.5) * 10 : random() * 100, 0)),
                users: min(100, max(last? last.users + (random() - 0.5) * 20 : random() * 100, 0))
            });
            last = data[data.length -1];
            return data;
        };
    })();

    var group = false,
        groupOp = [{
            dateFormat: 'M d',
            groupBy: 'year,month,day'
        }, {
            dateFormat: 'M',
            groupBy: 'year,month'
        }];

    function regroup() {
        group = !group;
        var axis = chart.axes.get(1),
            selectedGroup = groupOp[+group];
        axis.dateFormat = selectedGroup.dateFormat;
        axis.groupBy = selectedGroup.groupBy;
        chart.redraw();
    }

    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['date', 'visits', 'views', 'users'],
        data: generateData()
    });
//关键函数
    var intr = setInterval(function() {
        var gs = generateData();
        var toDate = timeAxis.toDate,
            lastDate = gs[gs.length - 1].date,
            markerIndex = chart.markerIndex || 0;
        if (+toDate < +lastDate) {
            markerIndex = 1;
            timeAxis.toDate = lastDate;
            timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(timeAxis.fromDate), Ext.Date.DAY, 1);
            chart.markerIndex = markerIndex;
        }
        store.loadData(gs);
    }, 1000);

 var b10 =  Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        hidden: false,
        maximizable: true,
        title: 'Live Animated Chart',
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            xtype: 'chart',
            style: 'background:#fff',
            id: 'chartCmp',
            store: store,
            shadow: false,
            animate: true,
            axes: [{
                type: 'Numeric',
                grid: true,
                minimum: 0,
                maximum: 100,
                position: 'left',
                fields: ['views', 'visits', 'users'],
                title: 'Number of Hits',
                grid: {
                    odd: {
                        fill: '#dedede',
                        stroke: '#ddd',
                        'stroke-width': 0.5
                    }
                }
            }, {
                type: 'Time',
                position: 'bottom',
                fields: 'date',
                title: 'Day',
                dateFormat: 'M d',
                groupBy: 'year,month,day',
                aggregateOp: 'sum',

                constrain: true,
                fromDate: new Date(2011, 1, 1),
                toDate: new Date(2011, 1, 7),
                grid: true
            }],
            series: [{
                type: 'line',
                smooth: false,
                axis: 'left',
                xField: 'date',
                yField: 'visits',
                label: {
                    display: 'none',
                    field: 'visits',
                    renderer: function(v) { return v >> 0; },
                    'text-anchor': 'middle'
                },
                markerConfig: {
                    radius: 5,
                    size: 5
                }
            },{
                type: 'line',
                axis: 'left',
                smooth: false,
                xField: 'date',
                yField: 'views',
                label: {
                    display: 'none',
                    field: 'visits',
                    renderer: function(v) { return v >> 0; },
                    'text-anchor': 'middle'
                },
                markerConfig: {
                    radius: 5,
                    size: 5
                }
            },{
                type: 'line',
                axis: 'left',
                smooth: false,
                xField: 'date',
                yField: 'users',
                label: {
                    display: 'none',
                    field: 'visits',
                    renderer: function(v) { return v >> 0; },
                    'text-anchor': 'middle'
                },
                markerConfig: {
                    radius: 5,
                    size: 5
                }
            }]
        }]
    });
    chart = Ext.getCmp('chartCmp');
    var timeAxis = chart.axes.get(1);
  • demo.js(加)
      var columnStore11 =  Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [
            {name:"0~10岁",data:20},
            {name:"11~18岁",data:60},
            {name:"19~24岁",data:30}
        ]
    });
    var b11 = Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        hidden: false,
        maximizable: true,
        title: 'Pie Renderer Chart',
        renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: 'Reload Data',
            handler: function() {
                columnStore11.loadData([
                    {name:"0~10岁",data:40},
                    {name:"11~18岁",data:20},
                    {name:"19~24岁",data:40}
                ]);
            }
        }],
        items: {
            id: 'chartCmp',
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            shadow: true,
            store: columnStore11,
            series: [{
                type: 'pie',
                animate: true,
                angleField: 'data', //角度
                lengthField: 'data', //字段切点长度
                highlight: {
                  segment: {
                    margin: 20
                  }
                },
                label: {
                    field: 'name',   //文本标注
                    display: 'rotate', //旋转标签 (also middle, out).
                    font: '14px Arial',
                    contrast: true
                },                                
                style: {
                    'stroke-width': 1,
                    'stroke': '#fff'
                },
                //add renderer
                renderer: function(sprite, record, attr, index, store) {//格式化重要函数
                    var value = (record.get('data') >> 0) % 9;
                    var color = [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"][value];
                    return Ext.apply(attr, {
                        fill: color
                    });
                }
            }]
        }
    });
  • Numeric.js
    Ext.onReady(function(){
    Ext.get("b1").on("click",function(){
        b1.show()
    })
    Ext.get("b2").on("click",function(){
        b2.show()
    })
    Ext.get("b3").on("click",function(){
        b3.show()
    })
    Ext.get("b4").on("click",function(){
        b4.show()
    })
    Ext.get("b5").on("click",function(){
        b5.show()
    })  
    Ext.get("b6").on("click",function(){
        b6.show()
    })
    Ext.get("b7").on("click",function(){
        b7.show()
    })  
    Ext.get("b8").on("click",function(){
        b8.show()
    })
    Ext.get("b9").on("click",function(){
        b9.show()
    })
    Ext.get("b10").on("click",function(){
        b10.show()
    })
    Ext.get("b11").on("click",function(){
        b11.show()
    })
});

转载于:https://www.cnblogs.com/happyzwt/p/8306902.html

diaoying3176
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值