[Extjs4.1]Grid生成简单table
代码 ：
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>les01</title>
<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="../Extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="griddemo1.js"></script>
<style type="text/css">
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 8px/100% Arial, Helvetica, sans-serif;
padding: .2em 2em .5em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
/* green */
.green {
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}
</style>
</head>
<body>
<div id="griddemo">
</div>
</body>
</html>
griddemo1.js
(function(){
Ext.onReady(function(){
Ext.QuickTips.init();
//数据集
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'age', 'email'],
data:{'items':[
{ 'name': 'Lisa', "age":33, "email":"[email protected]" },
{ 'name': 'Bart', "age":33, "email":"[email protected]" },
{ 'name': 'Homer', "age":33, "email":"[email protected]" },
{ 'name': 'Marge', "age":33,"email":"[email protected]"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
},
writer:{
type: 'json'
}
}
});
//big panel
var grid = Ext.create("Ext.grid.Panel",{
title:"Grid demo",
frame: true, //大边框
forceFit: true, //自动填充
columns:[ //age email 可编辑
{text:"name",dataIndex:"name" },
{text:"age", dataIndex:"age",field:{xtype:"textfield",allowBlank:false}},
{text:"email", dataIndex:"email",field:{xtype:"textfield",allowBlank:false}}
],
renderTo:Ext.get("griddemo"), //要渲染的页面组件，就是一个div
width:500,
height:300,
store: Ext.data.StoreManager.lookup('simpsonsStore'), //载入数据集
tbar:[ //topbar 上面工具栏,每个配置依次是组件名称，名字，样式，单击事件
{xtype:"button", text:"添加",cls:"button green"},
{xtype:"button", text:"修改",cls:"button green"},
{xtype:"button", text:"查看",cls:"button green"},
{xtype:"button", text:"删除",cls:"button green",
handler:function(button){
//获取选中的行
var grid = button.findParentByType("gridpanel");
var data = grid.getSelectionModel().getSelection();
if(data.length==0){
alert("请选择一条数据");
}else{
//先得到主键 这里假定是name
var store = grid.getStore();
var ids = [];
Ext.Array.each(data,function(record){
ids.push(record.get("name"));
});
console.log(ids);
//后台删除 这里没有后台 假定成功了, 返回一个数组，ids
Ext.Array.each(data,function(record){
store.remove(record);
});
}
}
}
],
dockedItems:[{
xtype:"pagingtoolbar", //分页组件
store:Ext.data.StoreManager.lookup('simpsonsStore'),
dock:"bottom", //下面的分页栏
displayInfo:true //右下方信息显示
}],
selType:"checkboxmodel", //多选框选择模式
multiSelect:true, //允许多选
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
})
//ready end
});
})();
效果：
![[Extjs4.1]Grid生成简单table_第1张图片](http://img.e-com-net.com/image/info5/4dce50f5af834a00abf45dac792f36d2.png)