ExtJs之Ext.grid.GridPanel（部分未完）

今天在家休息，年假不用就作费啊。

看了几部香港老电影，陪爸爸看了勇士占奇才，

然后，测试了一下EXTJS未完的内容，

在京东上订了七本历史普及书，近两百块。。：）

搞定。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

<!DOCTYPE html>

<html>

<head>

<title>ExtJs</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">

<script type="text/javascript" src="ExtJs/ext-all.js"></script>

<script type="text/javascript" src="ExtJs/bootstrap.js"></script>

<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

<style type="text/css">

#uses the following css:

.red-row{ background-color: #F5C0C0 !important; }

.yellow-row{ background-color: #FBF8BF !important; }

.green-row{ background-color: #99CC99 !important; }

</style>

<script type="text/javascript">

Ext.onReady(function(){

function rendererSex(value){

if (value == 'male') {

return "<span style='color:red;font-weight: bold;'>男</span>";

}else {

return "<span style='color:green;font-weight: bold;'>女</span>";

}

};

function rendererDescn(value, cellmeta, record, rowIndex, columnIndex, store){

var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +

"这个单元格的值为: " + value + "\\n" +

"这个单元格的配置是: {cellID" + cellmeta.cellID + ", id: " + cellmeta.id + ", css: " + cellmeta.css + "}\\n" +

"这个单元格对应的record是： " + record + ", 一行里的数据都在里边\\n" +

"这是第" + rowIndex + "行\\n" +

"这是第" + columnIndex + "列\\n" +

"这个表格对应的Ext.data.Store在这里： " + store + "，随便用吧." +

"\")'>"

return str;

}

function rendererMotif(data, cell, record, rowIndex, columnIndex, store) {

var value = record.get('color');

cell.style = "background-color: " + value;

return data;

}

var sm = new Ext.selection.CheckboxModel({stringSelect: true});

var columns =[

new Ext.grid.RowNumberer(),

{header: '编号', dataIndex: 'id', width:80, sortable: false},

{header: '名称', dataIndex: 'name', width:180},

{header: '性别', dataIndex: 'sex', renderer: rendererSex, width:120},

{header: '日期', dataIndex: 'date', renderer: Ext.util.Format.dateRenderer('Y-m-d'), width:400},

{header: '描述', dataIndex: 'descn', renderer: rendererDescn, width:200},

{header: 'color', dataIndex: 'color', renderer: rendererMotif, width:200}

];

var data = [

['1', 'name1', 'male', '2017-01-15T02:58:04', 'descn1', '#FBF8BF'],

['2', 'name2', 'female', '2005-01-15T02:58:04', 'descn2', '#F5C0C0'],

['3', 'name3', 'male', '2017-06-15T02:58:04', 'descn3', '#99CC99'],

['4', 'name4', 'female', '2017-01-09T02:58:04', 'descn4', '#FBF8BF'],

['5', 'name5', 'male', '2017-12-15T02:58:04', 'descn5', '#F5C0C0']

];

var store = new Ext.data.ArrayStore({

data: data,

fields: [

{name: 'name', mapping: 1},

{name: 'sex', mapping: 2},

{name: 'id', mapping: 0},

{name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s', mapping: 3},

{name: 'descn', mapping: 4},

{name: 'color', mapping: 5}

]

});

/*

var store = new Ext.data.Store({

proxy: new Ext.data.ScriptTagProxy({url: 'source.html'}),

reader: new Ext.data.ArrayReader({}, [

{name: 'id'},

{name: 'name'},

{name: 'descn'}

]),

fields: [

{name: 'name', mapping: 1},

{name: 'id', mapping: 0},

{name: 'descn', mapping: 2}

]

});

*/

store.load();

var grid = new Ext.grid.GridPanel({

enableColumnMove: false,

enableColumnResize: true,

stripeRows: true,

autoHeight: true,

loadMask:true,

forceFit: true,

renderTo: 'grid',

store: store,

columns: columns,

selModel: sm,

bbar: new Ext.PagingToolbar({

pageSize: 3,

store: store,

displayInfo: true,

displayMsg: '显示第{0} 条到 {1}条记录，一共{2}条',

emptyMsg: '没有记录'

}),

viewConfig: {

enableRowBody: true,

columnsText:　'显示的列',

sortAscText: '升序',

getRowClass: function(record, rowIndex, p, ds) {

var cls = 'white-row';

switch (record.data.color) {

case '#FBF8BF' :

cls = 'yellow-row';

break;

case '#99CC99' :

cls = 'green-row';

break;

case '#F5C0C0' :

cls = 'red-row';

break;

}

return cls;

}

});

Ext.get('remove').on('click', function(){

store.remove(store.getAt(1));

grid.view.refresh();

})

var tree = new Ext.tree.TreePanel({

store: new Ext.data.TreeStore({

root: {

text: '我是根',

children: [{

text: '我是根的第一个枝子',

children: {

text: '我是根的第一个枝子的第一个叶子',

leaf: true

}

},{

text: '我是根的第一个叶子',

leaf: true

}]

}

})

});

tree.render('tree');

});

</script>

</head>

<body style="margin: 20px">

<div id='grid' style="width: 800px"></div>

<button id='remove'>删除第二行</button>

<div id="tree"></div>

</body>

</html>

ExtJs之Ext.grid.GridPanel（部分未完）相关推荐

Ext.grid.GridPanel + asp.net 数据分页
Ext.grid.GridPanel + asp.net 数据分页 [转]http://www.cnblogs.com/tujiang/archive/2009/07/03/1516488.html ...
Ext.grid.GridPanel,CheckboxSelectionModel的全选的问题
Ext.grid.CheckboxSelectionModel的小问题: 解决方法: //监视Store数据是否变化, 进行一些其它处理; pl_store.on('datachanged', fun ...
Ext.grid.GridPanel数据转json
var count = docAdGrid.getStore().getCount(); var jsonArray = []; for (var i = 0; i < count; i++) ...
[转]Ext Grid控件的配置与方法
http://www.blogjava.net/wangdetian168/archive/2011/04/12/348651.html 1.Ext.grid.GridPanel 主要配置项: sto ...
Ext Grid Json分页（asp.net）
首先感叹extjs的强大,无以言表! 今天瞎弄了很久的grid,看了很多网上的例子和教程,终于搞定了分页和返回的json数据中存在换行符的问题 . 刚开始参照网上的例子怎么弄都不能分页,经过调试发现d ...
ext Grid（三）
想让用户体验更高就应该让用户可以在自己刚刚查询出来的数据表格上进行数据编辑,可以进行增删改查.可编辑的表格就在在想要能编辑的列里注册一个TextField组件,这个组件需要使用Ext.grid.Gri ...
使用Dynamic LINQ实现Ext Grid的远程排序
要实现Ext Grid的远程排序其实很简单,只要修改查询语句的排序关键字就可以了,但是,如果你的项目是使用Linq进行开发的,会发现动态修改排序关键字并不是那么容易的事,解决办法就是使用LINQ Dy ...
ExtJS中的Grid分页
1.建立页面: <html> <head> <meta http-equiv="Content-Type" content=& ...
Ext.grid.CheckboxSelectionModel 只能选一行，不能全选和多选
[size=medium]解决方法就是需要在grid里面添加一个属性,sm: sm 把选择模型加上就OK啦如: [color=red] var sm = new Ext.grid.CheckboxS ...

ExtJs之Ext.grid.GridPanel（部分未完）

ExtJs之Ext.grid.GridPanel（部分未完）相关推荐

最新文章

热门文章