Ext2.2-用XML做数据源,可编辑Grid的例子
来源:互联网 发布:sql 00933 编辑:程序博客网 时间:2024/06/06 05:00
html源代码
<html>
<head>
<meta http-equiv="Content-Type" c>
<title>Editor Grid Example</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
// 日期格式化
function formatDate(value){
return value ? value.dateFormat('Y年m月d日') : '';
};
// shorthand alias
var fm = Ext.form;
// 自定义的字段
var checkColumn = new Ext.grid.CheckColumn({
header: "婚否?",
dataIndex: 'married',
width: 55
});
// 列数据的模型
// dataIndex 对应着数据里面的字段
var cm = new Ext.grid.ColumnModel([{
id:'name', // 数据模型的唯一编号
header: "姓名", // 标题
dataIndex: 'name', // 对应于数据源里面的字段
width: 220, // 宽度
editor: new fm.TextField({ // 编辑的类型
allowBlank: false // 不允许为空,如果为空,则会显示红色波浪线警告且恢复原始数值
})
},{
header: "学位", // 学位的标题
dataIndex: 'degree', // 对应于学位
width: 130,
editor: new Ext.form.ComboBox({ // 使用自定义的下拉框
typeAhead: true,
triggerAction: 'all',
transform:'degree', // 对应的下拉列表ID
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header: "薪资(元)",
dataIndex: 'salary',
width: 70,
align: 'right', // 右对齐
editor: new fm.NumberField({ // 数字编辑框
decimalPrecision: 0, // 默认的小数点位数
allowBlank: false,
allowNegative: false, // 不允许为负数
maxValue: 100000 // 最大值为10万
})
},{
header: "出生日期",
dataIndex: 'birthday',
width: 95,
renderer: formatDate,
editor: new fm.DateField({ // 日期的编辑框
format: 'Y-m-d', // 格式
minValue: '1908-08-08'
})
},
checkColumn // 自定义的婚否列
]);
// 默认列是可以排序的
cm.defaultSortable = true;
// 创建数据源的记录,代表一个员工
var Employee = Ext.data.Record.create([
// name对应着数据里面对应的标签,birthday例外,对应着birth
{name: 'name', type: 'string'},
{name: 'address', type: 'string'},
{name: 'degree'},
{name: 'salary', type: 'int'},
// 日期自动转换
{name: 'birthday', mapping: 'birth', type: 'date', dateFormat: 'm/d/Y'},
{name: 'married', type: 'bool'}
]);
// 创建数据集,读取员工数据
var store = new Ext.data.Store({
// 使用HTTP协议获得
url: 'employees.xml',
// the return will be XML, so lets set up a reader
// 返回的是一个XML数据,我们解析为我们定义的记录格式 Employee
reader: new Ext.data.XmlReader({
// 记录里面有个 "employee" 的标签
record: 'employee'
}, Employee),
sortInfo:{field:'name', direction:'ASC'} // 默认按照姓名正向排序
});
// 创建可编辑的 Grid
var grid = new Ext.grid.EditorGridPanel({
store: store, // 指定数据源
cm: cm,
renderTo: 'editor-grid', // 目标的id位置
width:600,
height:300,
autoExpandColumn:'name', // 默认自动扩展宽度的字段
title:'人员信息编辑', // 标题
frame:true,
plugins:checkColumn,
clicksToEdit: 0, // 默认为双击编辑,如果为1则单击就编辑
tbar: [{ // 顶部的工具栏 tools bar
text: '增加新员工',
handler : function(){
var p = new Employee({
name: '输入员工姓名',
degree: '学士',
salary: 0,
birthday: (new Date()).clearTime(),
married: false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});
// 装载数据
store.load();
});
Ext.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};
Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
onMouseDown : function(e, t){
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},
renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
};
</script>
</head>
<body>
<h1>可编辑的 Grid</h1>
<!-- 自定义的数据下拉框 -->
<select name="degree" id="degree" style="display: none;">
<option value="博士">博士</option>
<option value="硕士">硕士</option>
<option value="双学士">双学士</option>
<option value="学士">学士</option>
<option value="其它">其它</option>
</select>
<div id="editor-grid"></div>
</body>
</html>
用到的 employees.xml
<?xml version="1.0" encoding="UTF-8"?>
<catalog>
<employee>
<name>张三</name>
<address>天津市第一大街</address>
<zone>4</zone>
<degree>学士</degree>
<salary>2440</salary>
<birth>03/15/2006</birth>
<married>true</married>
</employee>
<employee>
<name>李四</name>
<address>北京市朝阳区</address>
<zone>3</zone>
<degree>学士</degree>
<salary>9370</salary>
<birth>03/06/2006</birth>
<married>true</married>
</employee>
<employee>
<name>王五</name>
<address>上海浦东</address>
<zone>4</zone>
<degree>博士</degree>
<salary>6810</salary>
<birth>05/17/2006</birth>
<married>false</married>
</employee>
<employee>
<name>赵六</name>
<address>广州</address>
<zone>4</zone>
<degree>学士</degree>
<salary>9900</salary>
<birth>03/06/2006</birth>
<married>true</married>
</employee>
<employee>
<name>孙武</name>
<address>四川成都</address>
<zone>3</zone>
<degree>学士</degree>
<salary>6440</salary>
<birth>01/20/2006</birth>
<married>true</married>
</employee>
</catalog>
- Ext2.2-用XML做数据源,可编辑Grid的例子
- Ext2.2-用XML做数据源,可编辑Grid的例子
- Ext2.2-用XML做数据源,可编辑Grid的例子
- Ext2.2-用XML做数据源,可编辑Grid的例子
- Ext2.2用数组为数据源显示Grid的例子
- 可编辑的grid
- ext2.2打造全新功能grid系列--编辑修改篇
- EXTJS4.x之可编辑的grid
- Extjs 可 编辑的grid行
- Ext 可编辑grid
- 做个DataList 可分页的数据源
- 做个DataList 可分页的数据源
- 做个DataList可分页的数据源
- 做个DataList 可分页的数据源
- Extjs4 可编辑grid实例
- 用vb做的语音课件,用xml作为数据源
- FLEX的menubar用外部xml做数据源
- 一个可编辑下拉框的例子
- DIV+CSS样式表的一些技巧
- 临时表和临时表空间组介绍
- 如何判断文件是否存在?
- 时间比较
- AJAX 自动刷新页面
- Ext2.2-用XML做数据源,可编辑Grid的例子
- 将普通表转变为分区表
- 怎样让百度快速收录你!
- C++模板
- Oracle 9i中表的在线重定义
- IE与FF浏览器CSS兼容技巧
- ActiveX,OLE,COM之间的关系
- c++友元
- Oracle无法通过同义词访问远端分区表的某个分区