EXT JS学习1
1 GRIDPANEL中，比如某列的返回值，用图片表示：
renderer：function(value, metadata, record, rowIndex, colIndex, store){
}
value：原始值
metadata：可能的值为css或attr
record：Ext.data.Record，GridPanal的记录结构定义
rowIndex：行索引
colIndex：列索引
store：Ext.data.Store，数据源
renderer: function(v){
if(v == "男"){
return "<img src='../imgs/GGgif'>";
}else{
return "<img src='../imgs/MM.gif'>";
}
}
2 //列模型
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "姓名", width: 80, dataIndex: "Name", tooltip: "这是您的姓名"},
{header: "性别", width: 40, dataIndex: "Sex", align: "center",
renderer: function(v){
if(v == "男"){
return "<img src='../imgs/134.gif'>";
}else{
return "<img src='../imgs/133.gif'>";
}
}
},
{header: "生日", width: 100, format: "Y-m-d", dataIndex: "Birthday", renderer: Ext.util.Format.dateRenderer("Y-m-d")},
注意这里new Ext.grid.RowNumberer(),产生了一个序列号，
Ext.util.Format.dateRenderer("Y-m-d")},则产生了日期格式化
3
一个GRIDPANEL的例子：
buttons: [{
text: "第一行",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.selectFirstRow();
}
},{
text: "上一行",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
if(!rsm.hasPrevious()){
Ext.Msg.alert("警告", "已到达第一行");
}else{
rsm.selectPrevious();
}
}
},{
text: "下一行",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
if(!rsm.hasNext()){
Ext.Msg.alert("警告", "已到达最后一行");
}else{
rsm.selectNext();
}
}
},{
text: "最后一行",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.selectLastRow();
}
},{
text: "全选"
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.selectAll();
}
},{
text: "全不选",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.deselectRange(0, grid.getView().getRows().length - 1);
}
},{
text: "反选",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
for(var i = grid.getView().getRows().length - 1; i >= 0; i --){
if(rsm.isSelected(i)){
rsm.deselectRow(i);
}else{
rsm.selectRow(i, true);//必须保留原来的，否则效果无法实现
}
}
}
}]
});
4 删除某行：
{
text: "删除选定行",
icon: "../extjs/resources/images/default/dd/drop-no.gif",
cls: "x-btn-text-icon",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
var view = grid.getView();
var store = grid.getStore();
for(var i = view.getRows().length - 1; i >= 0 ; i --){
if(rsm.isSelected(i)){
store.remove(store.getAt(i));
}
}
view.refresh();
}
}
5 删除所有行：
var store = grid.getStore();
var view = grid.getView();
store.removeAll();
view.refresh();
6 grid中，在单元格中显示文字，图等
var cm = new Ext.grid.ColumnModel([
{header:'产品编号',dataIndex:'product_id'},
{header:'产品名称',dataIndex:'product_name'},
{header:'产品价格',dataIndex:'product_price',renderer:renderColor}
]);
function renderColor(value)
{
if(value >= 1000)
{
return "<span style='color:red;font-weight:bold'>" + value + "</span>";
}
else
{
return "<span style='color:blue'>" + value + "</span>";
}
}
如果获得单元格更详细信息：
var cm = new Ext.grid.ColumnModel([
{header:'产品编号',dataIndex:'product_id'},
{header:'产品名称',dataIndex:'product_name'},
{header:'产品价格',dataIndex:'product_price'},
{header:'详细信息',dataIndex:'msg',width:130, renderer:renderMsg}
]);
function renderMsg(value, cellmeta, record, rowIndex, columnIndex, store)
{
return "<input type='button' value='显示详细信息' onclick='alert(\"" +
"产品名称：" + record.get('product_name') + "\\n" +
"当前行：" + rowIndex + "\\n" +
"当前列：" + columnIndex + "\\n" +
"当前单元格的css：" + cellmeta.css +
"\")'/>";
}
7 复选框加上JAVASCRIPT判断全选等
<script type="text/javascript">
var gridPanel;
var sm;
var cm;
var store;
Ext.onReady(function(){
sm = new Ext.grid.CheckboxSelectionModel();
cm = new Ext.grid.ColumnModel([
sm,
{header:'产品编号',dataIndex:'product_id'},
{header:'产品名称',dataIndex:'product_name'},
{header:'产品价格',dataIndex:'product_price'}
]);
var data = [
['01','自行车','320'],
['02','电脑','3500'],
['03','手机','1200'],
['04','衬衫','238'],
['05','羽绒服','658']
];
store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'product_id'},
{name: 'product_name'},
{name: 'product_price'}
])
});
store.load();
gridPanel = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm,
sm: sm
});
});
function deleteCheckedRow()
{
for ( var i = store.getCount(); i >= 0 ; i--) {
if (sm.isSelected(i))
store.removeAt(i);
}
gridPanel.reconfigure(store,
cm);
}
</script>
8 表格分页：
A 简单分页
var gridPanel = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
store: store,
cm: cm,
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: '显示记录 {0} - {1} of {2}',
emptyMsg: "没有记录"
})
});
store.load();
//如果用tbar，则会显示在顶部，工具条
B 服务端的分页原理：
1）后端构建json的分页串，比如：
String start = request.getParameter("start");
String limit = request.getParameter("limit");
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);
int total = 100000;
String jsonStr = "{total:" + total + ",root:[";
for (int i = index; i < pageSize + index; i++)
{
int productIndex = i + 1;
jsonStr += "{product_id:" + productIndex + ",product_name:'产品"
+ productIndex + "',product_price:'价格" + productIndex
+ "'}";
if (i != pageSize + index - 1)
jsonStr += ",";
}
jsonStr += "]}";
out.println(jsonStr);
然后STORE中解析：
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'PaginationDataServlet'}),
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'root'
}, [
{name: 'product_id'},
{name: 'product_name'},
{name: 'product_price'}
])
});
store.load({params:{start:0,limit:10}});
9 可编辑的表格
var gridPanel = new Ext.grid.EditorGridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm
clicksToEdit;1,//如果要单击单元格就显示文本框
var cm = new Ext.grid.ColumnModel([
{header:'产品编号',dataIndex:'product_id'},
{header:'产品名称',dataIndex:'product_name',editor:new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank: false
}))},
{header:'产品价格',dataIndex:'product_price',editor:new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank: false
}))}
]);
10 在表格中添加新行
首先是所有列上都要指定 Ext.grid.GridEditor对象：
var gridPanel = new Ext.grid.EditorGridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm,
tbar: new Ext.Toolbar(['-', {
text: '添加一行',
handler: function(){
var record = new Ext.data.Record({
product_id:'',
product_name:'',
product_price:''
});
gridPanel.stopEditing();
store.insert(store.getCount(),record);
gridPanel.startEditing(store.getCount()-1,0);
}
}, '-', {
text: '删除一行',
handler: function(){
Ext.Msg.confirm('信息', '是否删除当前记录？', function(btn){
if (btn == 'yes') {
var sm = gridPanel.getSelectionModel();
var cell = sm.getSelectedCell();
var record = store.getAt(cell[0]);
store.remove(record);
}
});
}
}, '-'])
});
注意，是用"-"表示在工具栏中添加一条竖线,保存数据时，通过slice类，获得添加
text: '保存',
handler: function(){
var m = store.modified.slice(0);
var data = [];
Ext.each(m, function(item) {
data.push(item.data);
});
alert(Ext.encode(data));
Ext.lib.Ajax.request(
'POST',
'SaveData',
{success: function(response){
Ext.Msg.alert('信息', response.responseText, function(){
store.reload();
});
}},
'row=' + encodeURIComponent(Ext.encode(data))
);
}
},'-'])
会用ext.encode方法把数组转为JSON格式的数据
11 表格分组
var store = new Ext.data.GroupingStore({
reader: reader,
data: data,
groupField: 'sex',
sortInfo: {field: 'name', direction: "ASC"}
});
groupField指定了用什么字段进行分组，sortInFO用什么字段来排序：
var grid = new Ext.grid.GridPanel({
autoHeight: true,
store: store,
columns: columns,
view: new Ext.grid.GroupingView(),
renderTo: 'grid'
});
12