日期:2014-05-16  浏览次数:20276 次

Extjs Grid 编辑 新增 删除 保存

//创建edgrid.js
Ext.onReady(function(){
??? Ext.QuickTips.init();

??? // 格式化日期显示
??? function formatDate(value){
??????? return value ? value.dateFormat('Y, M d') : '';
??? }
??? // 格式化性别显示,这是个 renderer, 渲染器
??? function formatSex(value) {
??????? return value ? "男" : "女";
??? }
??? // 弄个缩写的别名
??? var fm = Ext.form;

??? // 列模型定义了表格所有列的信息,
??? // dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建)
??? var cm = new Ext.grid.ColumnModel([
??????????? {
?????????? id:'id',
?????????? header: "编号",
?????????? dataIndex: 'id',
?????????? width: 50
??????? },
??????? {
?????????? id:'name',
?????????? header: "用户名",
?????????? dataIndex: 'name',
?????????? width: 250,
?????????? editor: new fm.TextField({
?????????????? allowBlank: false// 不能为空
?????????? })
??????? },
??????? {
?????????? header: "地区",
?????????? dataIndex: 'area',
?????????? width: 100,
?????????? editor: new Ext.form.ComboBox({
?????????????? typeAhead: true,
?????????????? triggerAction: 'all',
?????????????? transform:'area',// 对应的选择框的ID
?????????????? lazyRender:true,
?????????????? listClass: 'x-combo-list-small'
??????????? })
??????? },
??????? {
?????????? header: "电子邮件",
?????????? dataIndex: 'email',
?????????? width: 220,
?????????? align: 'left',
?????????? editor: new fm.TextField({
?????????????? allowBlank: true
?????????? })
??????? },
??????? {
?????????? header: "年龄",
?????????? dataIndex: 'age',
?????????? width: 70,
?????????? align: 'right',
?????????? editor: new fm.NumberField({
?????????????? allowBlank: true,
?????????????? allowNegative: false,
?????????????? maxValue: 100
?????????? })
??????? },
??????? {
?????????? header: "生日",
?????????? dataIndex: 'birthDay',
?????????? width: 95,
?????????? renderer: formatDate,
?????????? editor: new fm.DateField({
??????????????? format: 'y/m/d',
??????????????? minValue: '1970/01/01',//最小值
??????????????? disabledDays: [0, 6],// 禁止选择的日期
??????????????? disabledDaysText: '不许周末出生孩子'
??????????? })
??????? },
??????? {
?????????? header: "性别",
?????????? dataIndex: 'sex',
?????????? width: 95,
?????????? renderer: formatSex,
?????????? editor: new fm.Checkbox()
??????? }
??? ]);

??? // 默认情况下列是可排序的
??? cm.defaultSortable = true;

??? // 定义一个用户对象,这样便于我们动态的添加记录,虽然也可以设置成匿名内置对象
??? var User = Ext.data.Record.create([
?????????? // 下面的 "name" 匹配读到的标签名称, 除了 "birthDay",它被映射到标签 "birth"
?????????? {name: 'id', type: 'int' },
?????????? {name: 'name', type: 'string'},
?????????? {name: 'area'},
?????????? {name: 'email', type: 'string'},
?????????? {name: 'age', type: 'int'},???????????? // automatic date conversions
?????????? {name: 'birthDay', mapping: 'birth', type: 'date', dateFormat: 'Y/m/d'},
?????????? {name: 'sex', type: 'bool'}
????? ]);

??? // 创建 Data Store
??? var store = new Ext.data.Store({
??????? // 使用 HTTP 加载
??????? url: 'users.xml',

??????? // 因为返回值是 XML, 所以我们创建一个解析器
??????? reader: new Ext.data.XmlReader({
?????????????? // 记录必须包含 "user" 标签
?????????????? record: 'user'
?????????? }, User),

??????? sortInfo:{field:'name', direction:'ASC'}// 排序信息
??? });

??? // 创建编辑器表格
??? var grid = new Ext.grid.EditorGridPanel({
??????? store: store,
??????? cm: cm,
??????? renderTo: 'editor-grid',
??????? width:800,
??????? height:300,
??????? autoExpandColumn:'name',
??????? title:'功能管理',// 标题
??????? frame:true,
??????? clicksToEdit:1,//设置点击几次才可编辑
??????? s