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}不是组长'

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'?'男':'女';
}

二 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 = "\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下编译。