这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容。之后会发一个最近写的结合MVC项目的grid布局的案例。
上一篇关于ExtJS的学习资料什么的都已经更在上一篇了，这里只是对一些代码的记录。
【学习资料】（ExtJS4中的Grid、Tree、Form）http://www.cnblogs.com/niejunchan/p/4998512.html
【效果】
Array_Grid
Tree_Grid
【代码】
[Array_Grid的代码]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/Extjs/ext-all.js"></script>
<script src="Scripts/Extjs/packages/ext-locale/build/ext-locale-zh_CN.js"></script>
<script src="Scripts/Extjs/ux/app.js"></script>
<link href="Scripts/Extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />
<!--<script type="text/javascript">
//测试上面js,css文件是否连接进来用的
Ext.onReady(function () {
Ext.Msg.alert("hh", "welcome");
var win = new Ext.Window({ title: "hello", width: 200, height: 300, html: ‘<h1>ok....just a test....</h1>‘ });
win.show();
});
</script>-->
<script type="text/javascript">
Ext.onReady(function () {
var userStore = Ext.create("Ext.data.Store", {
fields: ["account", "name", "sex", "age", "role"],
data: [
["zhanglei", "张磊", "男", "30", "管理员"],
["liming", "黎明", "男", "27", "主编"],
["liuying","刘颖","女","22","内容编辑"]
]
});
Ext.create("Ext.grid.Panel", {
title: ‘多表头Grid‘,
margin: 10,
width: 600,
height: 400,
border: true,
//添加左边的checkbox
selModel: {
type:"checkboxmodel"
},
store: userStore,//加载数据
columns: [{
text: "账号",
dataIndex: "account",
flex: 1,
align:‘center‘,
}, {
text: "基本信息",
flex: 3,
align: ‘center‘,
columns: [{
text: ‘姓名‘,
dataIndex: ‘name‘,
align:‘center‘
}, {
text: ‘性别‘,
dataIndex: ‘sex‘,
align:‘center‘
}, {
text: ‘年龄‘,
dataIndex: ‘age‘,
align:‘center‘
}]},
{
text: ‘角色‘,
dataIndex: ‘role‘,
flex:1,
align:‘center‘
}, ],
//增加分页控件
bbar: {
xtype: ‘pagingtoolbar‘,
store: userStore,
displayInfo:true
},
renderTo:Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>
[Tree_Grid的代码]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/Extjs/ext-all.js"></script>
<script src="Scripts/Extjs/packages/ext-locale/build/ext-locale-zh_CN.js"></script>
<script src="Scripts/Extjs/ux/app.js"></script>
<link href="Scripts/Extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />
<!--<script type="text/javascript">
//测试上面js,css文件是否连接进来用的
Ext.onReady(function () {
Ext.Msg.alert("hh", "welcome");
var win = new Ext.Window({ title: "hello", width: 200, height: 300, html: ‘<h1>ok....just a test....</h1>‘ });
win.show();
});
</script>-->
<script type="text/javascript">
Ext.onReady(function () {
Ext.define("DeptModel", {
extend: "Ext.data.TreeModel",
fields: [
"DeptName","Leader"
]
});
var store = Ext.create("Ext.data.TreeStore", {
model: "DeptModel",
root: {
expanded: true,
DeptName: "总公司",
Leader: "Lin",
children: [
{ DeptName: "技术部", Leader: "xia", leaf: true },
{ DeptName: "财务部", Leader: "Li", leaf: true }
]
}
});
var viewport = Ext.create("Ext.container.Viewport", {
layout: "auto",
items: [{
xtype: "treepanel",
itemId: "tree",
width: 600,
height: 500,
store: store,
lines: false,
useArrows: true,
multiSelect:true,
columns: [
{
xtype: ‘treecolumn‘,
text: ‘部门‘,
dataIndex: "DeptName",
flex: 1,
sortable:false
},
{
text: "领导",
dataIndex: "Leader",
flex: 1,
sortable:true
}, {
xtype: ‘checkcolumn‘,
header: ‘选择‘,
dataIndex: ‘done‘,
flex: 1,
stopSelection: false,
menuDisabled:true,
}, {
xtype: ‘actioncolumn‘,
flex: 1,
items: [
{
icon: ‘Content/images/user_edit.png‘,//需要自己把图片弄进去才有
tooltip: ‘Edit‘,
handler: function (grid, rowIndex, colIndex) {//这里的方法只是一个弹出信息，可替换成具体实现
var rec = grid.getStore().getAt(rowIndex);
Ext.MessageBox.alert(‘Edit‘, rec.get(‘Leader‘));
}
}, {
icon: ‘Content/images/user_delete.png‘,
tooltip: ‘Delete‘,
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.MessageBox.alert(‘Delete‘, rec.get(‘Leader‘));
}
}
]
}
],
bbar: {
xtype: ‘pagingtoolbar‘,
store: store,
displayInfo: true
},
}]
});
});
</script>
</head>
<body>
</body>
</html>
时间： 2024-10-27 06:54:48