Extjs4 总结

一 GRID组件

   1 普通的ext.grid.panel
       Ext.onReady(function(){
//创建表格数据
var datas = [
[100,'张三',24],
[200,'李四',30],
[300,'王五',29]
];
//创建Grid表格组件
Ext.create('Ext.grid.Panel',{
title : '简单Grid表格示例',
renderTo: Ext.getBody(),
width:200,
height:130,
frame:true,
viewConfig: {
forceFit : true,
            stripeRows: true//在表格中显示斑马线
        },
store: {//配置数据源
        fields: ['id','name','age'],//定义字段
        proxy: {
            type: 'memory',//Ext.data.proxy.Memory内存代理
            data : datas,//读取内嵌数据
            reader : 'array'//Ext.data.reader.Array解析器
        },
        autoLoad: true//自动加载
    },
columns: [//配置表格列
{header: "id", width: 30, dataIndex: 'id', sortable: true},
{header: "姓名", width: 80, dataIndex: 'name', sortable: true},
{header: "年龄", width: 80, dataIndex: 'age', sortable: true}
]
});
});

    2 分别有boolean,number,data,action等动作列
          columns: [//配置表格列
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "组长", width: 50, dataIndex: 'leader',
xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列
trueText: '是',
falseText: '否'
},
{header: "生日", width: 100, dataIndex: 'birthday',
xtype : 'datecolumn',//Ext.grid.column.Date日期列
format : 'Y年m月d日'//日期格式化字符串
},
{header: "薪资", width: 50, dataIndex: 'salary',
xtype: 'numbercolumn',//Ext.grid.column.Number数字列
format:'0,000'//数字格式化字符串
}
]

   3 ACTION动作列，比如CRUD的按钮及相应的事件
      {header: "操作", width: 70,
xtype: 'actioncolumn',//Ext.grid.column.Action动作列
            items: [{
                icon: 'images/edit.gif',//指定编辑图标资源的URL
                handler: function(grid, rowIndex, colIndex) {
                //获取被操作的数据记录
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("编辑 " + rec.get('name'));
                }
            },{
                icon: 'images/del.gif',//指定编辑图标资源的URL
                handler: function(grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("删除 " + rec.get('name'));
                }               
            },{
                icon: 'images/save.gif',//指定编辑图标资源的URL
                handler: function(grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("保存 " + rec.get('name'));
                }               
            }]
}

     4 自定义模版
        header: "描述", width: 100,
xtype: 'templatecolumn',//Ext.grid.column.Template数字列
tpl : '{name}<tpl if="leader == false">不</tpl>是组长'

      5 行号：  Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
   
     6 表格渲染，自定义单元格中的值
      columns: [//配置表格列
{header: "id", width: 30, dataIndex: 'id'},
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "性别", width: 50, dataIndex: 'sex',renderer:formatSex},
{header: "生日", width: 100, dataIndex: 'birthday',
//格式化生日显示
renderer:Ext.util.Format.dateRenderer('Y年m月d日')
},
{header: "年龄", width: 50, dataIndex: 'age',renderer:formatAge}
]
});
//定义渲染函数，格式化性别显示
function formatSex(value){
return value=='man'?'男':'<font color=red>女</font>';
}

二  GRID组件的选择模式
   1） ext.selection.cellmodel  选定其中一个单元格
      //创建Grid表格组件
var grid = Ext.create('Ext.grid.Panel',{
title : '单元格选择模式示例',
renderTo: Ext.getBody(),
width:200,
height:170,
frame:true,
selType: 'cellmodel',//设置为单元格选择模式Ext.selection.CellModel
tbar : [{
text : '取得所选单元格',
handler : function(){
var cell = grid.getSelectionModel().getCurrentPosition();
alert(Ext.JSON.encode(cell));
}
}],
              ....................................
   2 rowmodel
       var grid = Ext.create('Ext.grid.Panel',{
title : '行选择模式示例',
renderTo: Ext.getBody(),
width:200,
height:170,
frame:true,
simpleSelect : true,//启用简单选择功能
multiSelect : true,//支持多选
selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel
tbar : [{
text : '取得所选行',
handler : function(){
var msg = '';
var rows = grid.getSelectionModel().getSelection();
for(var i = 0; i < rows.length; i++){
msg = msg + rows[i].get('name') + '\n';
}
alert(msg);
}
}],

    3 复选框模式
         Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel'); （必须有这行）
//创建Grid表格组件
var grid = Ext.create('Ext.grid.Panel',{
title : '复选框选择模式示例',
renderTo: Ext.getBody(),
width:230,
height:170,
frame:true,
multiSelect : true,//支持多选
selModel: {
selType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel
},
tbar : [{
text : '取得所选行',
handler : function(){
var msg = '';
var rows = grid.getSelectionModel().getSelection();
for(var i = 0; i < rows.length; i++){
msg = msg + rows[i].get('name') + '\n';
}
alert(msg);
}
}],

三 表格特性
   1) ext.grid.feature.rowbody
   跨越了表格的所有列。
        Ext.onReady(function(){
//创建表格数据
var datas = [
['张三',2500,'张三的个人简历...'],
['李四',1500,'李四的个人简历...']
];
//创建Grid表格组件
Ext.create('Ext.grid.Panel',{
title : 'Ext.grid.feature.RowBody示例',
renderTo: Ext.getBody(),
width:300,
height:150,
frame:true,
store: {
        fields: ['name','salary','introduce'],
        proxy: {
            type: 'memory',
            data : datas,
            reader : 'array'//Ext.data.reader.Array解析器
        },
        autoLoad: true
    },
    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('introduce'),//指定行体内容
                rowBodyCls: 'rowbodyColor',//指定行体样式
                rowBodyColspan: colspan//指定行体跨列的列数
            };
        }
    })],
columns: [//配置表格列
    Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
{header: "姓名", flex: 1, dataIndex: 'name'},
{header: "薪资", flex: 1, dataIndex: 'salary'}
]
});
});

  2、汇总值
        Ext.onReady(function(){
//创建表格数据
var datas = [
['张三',2500],
['李四',1500]
];
//创建Grid表格组件
Ext.create('Ext.grid.Panel',{
title : 'Ext.grid.feature.Summary示例',
renderTo: Ext.getBody(),
width:300,
height:150,
frame:true,
store: {
        fields: ['name','salary','introduce'],
        proxy: {
            type: 'memory',
            data : datas,
            reader : 'array'//Ext.data.reader.Array解析器
        },
        autoLoad: true
    },
    features: [{
    ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性
    }],
columns: [//配置表格列
{header: "姓名", flex: 1, dataIndex: 'name',
summaryType: 'count',//求数量
summaryRenderer: function(value){
return '员工总数：'+value
}
},
{header: "薪资", flex: 1, dataIndex: 'salary',
summaryType: 'average',//求平均值
summaryRenderer: function(value){
return '平均薪资：'+value
}
}
]
});
});
  //其中可以有count,sum,min,max,average等方法，在summarytype中。

3 表格分组
      Ext.onReady(function(){
//创建表格数据
var datas = [
['张三','男',29],['李四','女',30],
['王五','男',27],['赵六','女',31]
];
//创建Grid表格组件
Ext.create('Ext.grid.Panel',{
title : 'Ext.grid.feature.Grouping示例',
renderTo: Ext.getBody(),
width:300,
height:150,
frame:true,
store: {
        fields: ['name','sex','age'],
        groupField: 'sex',//设置分组字段
        proxy: {
            type: 'memory',
            data : datas,
            reader : 'array'//Ext.data.reader.Array解析器
        },
        autoLoad: true
    },
    features: [Ext.create('Ext.grid.feature.Grouping', {
    groupByText : '用本字段分组',
    showGroupsText : '显示分组',
        groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
        startCollapsed: true //设置初始分组是否收起
    })],
columns: [//配置表格列
{header: "姓名", flex: 1, dataIndex: 'name'},
{header: "性别", flex: 1, dataIndex: 'sex'},
{header: "年龄", width: 110, dataIndex: 'age',
summaryType: 'average',//求数量
summaryRenderer: function(value){
return '平均年龄：'+value
}
]
});
});

四 表格插件
  1） 单元格编辑插件
         plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1//设置鼠标单击1次进入编辑状态
})
],

  2）行编辑模式
        plugins: [
        //行编辑模式
Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })
],
3） 表格分页
       Ext.onReady(function(){
var itemsPerPage = 2;//指定分页大小
  
var store = Ext.create('Ext.data.Store', {
    autoLoad: {start: 0, limit: itemsPerPage},
    fields:['id', 'name', 'age'],
    pageSize: itemsPerPage, //设置分页大小
    proxy: {
        type: 'ajax',
        url: 'jsonServer.jsp',  //请求的服务器地址
        reader: {
            type: 'json',
            root: 'rows',
            totalProperty: 'results'
        }
    }
});
//创建Grid表格组件
Ext.create('Ext.grid.Panel',{
title : 'Ext.toolbar.Paging示例',
renderTo: Ext.getBody(),
width:400,
height:150,
frame:true,
store: store,
columns: [//配置表格列
{header: "id", width: 30, dataIndex: 'id', sortable: true},
{header: "姓名", width: 80, dataIndex: 'name', sortable: true},
{header: "年龄", width: 80, dataIndex: 'age', sortable: true}
],
bbar: [{
xtype: 'pagingtoolbar',
store: store,   //这里需要指定与表格相同的store
displayInfo: true
}]
});
});

五  TREE组件
    1）ext.tree.panel
        Ext.onReady(function(){
var tree = Ext.create('Ext.tree.Panel', {
    title: '树面板简单示例',
    width : 150,
    height : 100,
    renderTo: Ext.getBody(),
    root: {
        text: '树根',//节点名称
        expanded: true,//默认展开根节点
        children: [{
            text: '节点一',//节点名称
            leaf: true//true说明为叶子节点
        }, {
            text: '节点二',//节点名称
            leaf: true//true说明为叶子节点
        }]
    }
});
});

    2 EXT JS 4中的多列树
        Ext.onReady(function(){
var tree = Ext.create('Ext.tree.Panel', {
    title: 'TreeGrid（多列树示例）',
    renderTo: Ext.getBody(),
    width : 200,
    height : 120,
    fields: ['name', 'description'],
    columns: [{
        xtype: 'treecolumn',//树状表格列
        text: '名称',
        dataIndex: 'name',
        width: 100,
        sortable: true
    }, {
        text: '描述',
        dataIndex: 'description',
        flex: 1,
        sortable: true
    }],
    root: {
        name: '树根',
        description: '树根的描述',
        expanded: true,
        children: [{
            name: '节点一',
            description: '节点一的描述',
            leaf: true
        }, {
            name: '节点二',
            description: '节点二的描述',
            leaf: true
        }]
    }
});
});

    3 带复选框的树
      Ext.onReady(function(){
var tree = Ext.create('Ext.tree.Panel', {
    title: '复选框示例',
    width : 150,
    height : 100,
    renderTo: Ext.getBody(),
    root: {
        text: '树根',//节点名称
        expanded: true,//默认展开根节点
        children: [{
            text: '节点一',//节点名称
            checked : true,//默认选中
            leaf: true//true说明为叶子节点
        }, {
            text: '节点二',//节点名称
            checked : false,//默认不选中
            leaf: true//true说明为叶子节点
        }]
    }
});
});

    4 分级加载树，可以分级加载大量的数据
        Ext.onReady(function(){
//定义用户User模型
Ext.regModel("OrgInfo", {
    fields: ['orgId','name', 'count']
});
var myStore = new Ext.data.TreeStore({
model : 'OrgInfo',
nodeParam : 'orgId',//指定节点参数名
proxy: {
            type: 'ajax',
            url: 'treeServer.jsp',
            reader: 'json'
        },
autoLoad: true,
        root: {
            name: '根节点',
            id: '-1'
        }
});

Ext.create('Ext.tree.Panel', {
    title: '分级异步加载树节点示例',
    renderTo: Ext.getBody(),
    width : 250,
    height : 150,
    columns: [{
        xtype: 'treecolumn',//树状表格列
        text: '公司名称',
        dataIndex: 'name',
        width: 150,
        sortable: true
    }, {
        text: '员工人数',
        dataIndex: 'count',
        flex: 1,
        sortable: true
    }],
    store : myStore,
    rootVisible: false
});
});
   服务端：
      <%
String orgId = request.getParameter("orgId");
String result="";
if("-1".equals(orgId)){
result = "[{name:'总公司',count:100,id:100}]";
}else if("100".equals(orgId)){
result = "[{name:'分公司一',count:20,id:110,leaf:true},{name:'分公司二',count:80,id:120}]";
}else if("120".equals(orgId)){
result = "[{name:'部门一',count:30,id:121,leaf:true},{name:'部门二',count:50,id:122,leaf:true}]";
}
response.getWriter().write(result);
%>

六  EXT JS与服务端整合
    1）XML与JSON的生成
      A 使用XTREAM
         先有POJO，比如Person类,phonenumber类
         public class Person {
private String name;
private int age;
private PhoneNumber homePhone;
private PhoneNumber officePhone;
        ......
      }
        public class PhoneNumber {
private String type;
private String number;
        ............}

       转换：
       PhoneNumber homePhone = new PhoneNumber("宅电","123456");
PhoneNumber officePhone = new PhoneNumber("办公电话","654321");
Person person = new Person("tom",20,homePhone,officePhone);
XStream xStream = new XStream(new DomDriver());
xStream.alias("person",Person.class);
String xml = xStream.toXML(person);
System.out.println(xml);
    2）EXT中定义工具类，将LIST转为XML的方法（包含JSON转换）
        public class Total {
private long results;

public long getResults() {
return results;
}
        

public void setResults(long results) {
this.results = results;
}
}

//主要是因为EXT JS前端中要读出记录数
      public class ExtHelper {
/**
* 通过List生成XML数据
* @param recordTotal 记录总数，不一定与beanList中的记录数相等
* @param beanList 包含bean对象的集合
* @return 生成的XML数据
*/
public static String getXmlFromList(long recordTotal , List beanList) {
Total total = new Total();
total.setResults(recordTotal);
List results = new ArrayList();
results.add(total);
results.addAll(beanList);
XStream sm = new XStream(new DomDriver());
for (int i = 0; i < results.size(); i++) {
Class c = results.get(i).getClass();
String b = c.getName();
String[] temp = b.split("\\.");
sm.alias(temp[temp.length - 1], c);
}
String xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" + sm.toXML(results);
return xml;
}
/**
* 通过List生成XML数据
* @param beanList 包含bean对象的集合
* @return 生成的XML数据
*/
public static String getXmlFromList(List beanList){
return getXmlFromList(beanList.size(),beanList);
}
/**
* 通过List生成JSON数据
* @param recordTotal 记录总数，不一定与beanList中的记录数相等
* @param beanList 包含bean对象的集合
* @return 生成的JSON数据
*/
public static String getJsonFromList(long recordTotal , List beanList){
TotalJson total = new TotalJson();
total.setResults(recordTotal);
total.setItems(beanList);
JSONObject JsonObject = JSONObject.fromObject(total);
return JsonObject.toString();
}
/**
* 通过List生成JSON数据
* @param beanList 包含bean对象的集合
* @return 生成的JSON数据
*/
public static String getJsonFromList(List beanList){
return getJsonFromList(beanList.size(),beanList);
}
/**
* 通过bean生成JSON数据
* @param bean bean对象
* @return 生成的JSON数据
*/
public static String getJsonFromBean(Object bean){
JSONObject JsonObject = JSONObject.fromObject(bean);
return JsonObject.toString();
}
}

  调用方法： String xml = ExtHelper.getXmlFromList(phoneList.size(), phoneList);

  3）JSONLIB和struts2的生成
      简单例子：
         PhoneNumber homePhone = new PhoneNumber("宅电","123456");
PhoneNumber officePhone = new PhoneNumber("办公电话","654321");
Person person = new Person("tom",20,homePhone,officePhone);
JSONObject json = JSONObject.fromObject(person);
String jsonStr = json.toString();
System.out.println(json);

        public class TotalJson {
private long results;
private List items;
       ......
          }
   由于struts2直接支持JSON形式，后端直接LIST返回即可，所以前端：
        store: {
        fields: ['name','age','sex','birthday'],
        proxy: {
            type: 'ajax',
            url : '/ExtJS4-Examples/extjs.action',
            reader: {
            type: 'json',//Ext.data.reader.Json解析器
            root: 'items'
        }
        },
        autoLoad: true
    },
    
七   主题
     EXT JS 4中采用了SAAS来支持CSS的生成，SAAS为CSS的扩展，可以在SAAS中定义变量，甚至运算；COMPASS是开源CSS框架
使用SAAS样式；compass=saas样式表+大量优秀的CSS模式
     gem install compass后
  在ext js 4中的resources目录中，包含三个目录 css：编译后的级联样式文件，SAAS用于存放主题定制的SAAS源文件
     在saas目录中有config.rb文件，可以写一个SCSS
       @import 'compass';
        $base-color: #FF6666;
        @import 'ext4/default/all';
....
   编译
       compass compile  resources/my_sass  //将SCSS文件放在my_sass下编译。