extjs-EditorGridPanel学习

重要的方法：grid.getStore().getModifiedRecords();获得编辑后的结果

text: "增加",

handler: function() {

var Plant = store.recordType;

var p = new Plant({

common: 'New Plant 1',

light: 'Mostly Shade',

price: 0,

availDate: (new Date()).clearTime(),

indoor: false

});

grid.stopEditing();

store.insert(0, p); //插入第一行

grid.startEditing(0, 0);

Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.onReady(function() {  //Ext.Msg.alert("sf0", "sdf");  //格式化日期  function formatDate(value) {  return value ? value.dateFormat('Y年m月d日') : '';  }  // 别名  var fm = Ext.form;  //checkbox选择模型  var sm = new Ext.grid.CheckboxSelectionModel({ checkOnly: true });  //构造一个只能包含checkbox的列  var checkColumn = new Ext.grid.CheckColumn({  header: 'Indoor?', dataIndex: 'indoor',  width: 55  });  // 构造ColumnModel  var cm = new Ext.grid.ColumnModel({  columns: [  sm,  {  id: 'common',  header: 'Common Name',  dataIndex: 'common',  width: 220,  // 使用上边定义好的别名  editor: new fm.TextField({  allowBlank: false  })  }, {  header: 'Light',  dataIndex: 'light',  width: 130,  editor: new fm.ComboBox({  typeAhead: true,  triggerAction: 'all',  transform: 'light',  lazyRender: true,  listClass: 'x-combo-list-small'  })  }, {  header: 'Price',  dataIndex: 'price',  width: 70,  align: 'right',  renderer: 'usMoney',  editor: new fm.NumberField({  allowBlank: false,  allowNegative: false,  maxValue: 100000  })  }, {  header: 'Available',  dataIndex: 'availDate',  width: 95,  renderer: formatDate,  editor: new fm.DateField({  format: 'Y年m月d日',  minValue: '01/01/06',  disabledDays: [0, 6],  disabledDaysText: 'Plants are not available on the weekends'  })  },checkColumn  ],  defaults: {  sortable: true  }  });  // 构造一个Store对象  var store = new Ext.data.Store({  url: 'plants.xml',  reader: new Ext.data.XmlReader(  {  record:'plant' },  [  { name: 'common', type: 'string' },  { name: 'botanical', type: 'string' },  { name: 'light' },  { name: 'price', type: 'float' },  { name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },  { name: 'indoor', type: 'bool' }  ]  ),  sortInfo: { field: 'common', direction: 'ASC' }  });  // 构造可编辑的grid  var grid = new Ext.grid.EditorGridPanel({  //sm: new Ext.grid.RowSelectionModel({ singleSelect: false }),  sm: sm,  store: store,  cm: cm,  renderTo: 'grid',  width: 600,  height: 300,  autoExpandColumn: 'common',  title: 'Edit Plants?',  frame: true,  plugins: checkColumn,  clicksToEdit: 1,  //默认2次双击才触发编辑框事件listeners: {  "afterEdit": {  fn: afterEdit,  scope: this  }  }, bbar: new Ext.PagingToolbar({pageSize : 5,store : store,firstText : '第一页',nextText : '下一页',prevText : '上一页',refreshText : '刷新',lastText : '最后一页',beforePageText : '当前',afterPageText : '页/共{0}页',displayInfo : true,displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',emptyMsg : "没有记录"}),tbar: [{  text: "保存",  handler: function() { var  mod=grid.getStore().getModifiedRecords();for ( var i = 0; i < mod.length; i++) {alert(mod[i].data.common);}var mod = store.modified;  // updateData(mod);  }  },  '-',  {  text: "增加",  handler: function() {  var Plant = store.recordType;  var p = new Plant({  common: 'New Plant 1',  light: 'Mostly Shade',  price: 0,  availDate: (new Date()).clearTime(),  indoor: false  });  grid.stopEditing();  store.insert(0, p);  grid.startEditing(0, 0);  }  },  " ",  {  text: "删除",  handler: function() {  var selModel = grid.getSelectionModel();  if (selModel.hasSelection()) {  Ext.Msg.confirm("警告", "确定要删除吗？", function(button) {  if (button == "yes") {  var selections = selModel.getSelections();  Ext.each(selections, function(item) {  store.remove(item);  // store.removed.push(item);  });  }  // alert(store.removed.length);  });  }  else {  Ext.Msg.alert("错误", "没有任何行被选中，无法进行删除操作！");  }  }  }  ]  });  // 触发数据的加载  store.load();  //发送数据到服务器端进行更新
//    function updateData(mod) {
//        var json = [];
//        Ext.each(mod, function(item) {
//            json.push(item.data);
//        });
//        if (json.length >= 0) {
//            Ext.Ajax.request({
//                url: "EditGrid.aspx",
//                params: { data: Ext.util.JSON.encode(json) },
//                method: "POST",
//                success: function(response) {
//                    Ext.Msg.alert("信息", "数据更新成功！", function() { store.reload(); });
//                },
//                failure: function(response) {
//                    Ext.Msg.alert("警告", "数据更新失败，请稍后再试！");
//                }
//            });
//        }
//        else {
//            Ext.Msg.alert("警告", "没有任何需要更新的数据！");
//        }
//    }  //编辑后触发的事件，可在此进行数据有效性的验证  function afterEdit(e) {  if (e.field == 'common') {  if (e.value == '123') {  Ext.Msg.alert("错误", "大笨是人物不是植物", function() { grid.startEditing(e.row, e.column) });  }  }  }
});

extjs-EditorGridPanel学习相关推荐

Extjs——初步学习
最近在系统学习Extjs框架,从刚一开始接触Extjs到现在发现对Extjs越来越喜欢了.刚开始只是想在页面上实现一个展示大量图片的功能,就像在线订餐系统展示菜单的效果那样,每幅图片上都有一些 ...
Extjs EditorGridPanel中ComboBox列的显示问题
EditorGridPanel中嵌入ComboBox通常不会正常显示ComboBox的store中本想显示字段,而是显示的EditorGridPanel中 store的dataindex指定的字段内容 ...
ExtJs+php学习长连接comet技术开端。
传统AJAX技术 JavaScript 调用 XMLHttpRequest 对象发出 HTTP 请求,JavaScript 响应处理函数根据服务器返回的信息对 HTML 页面的显示进行更新. 使用 ...
ExtJS MVC 学习手记3
在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树.但也仅仅是这样,点击树或应用的其他地方获得不到任何响应.这个演示应用还是一个死的应用. 接下来,我们让这个应用活起来. 首先,给 ...
ExtJS MVC学习手记 1
开发环境: ExtJS4.2 eclipse indigo 开发目标搭建项目框架,创建viewport 开发步骤说明这次主要使用extjs4的mvc模式创建viewport.籍此初步了解mvc模 ...
时间紧任务重---extjs的学习就这么开始吧
我们的extjs借助了一个模板引擎--artTemplate,它是一个开源的项目,不多说,给个链接吧:http://aui.github.io/artTemplate/ 直接上代码: <!DOC ...
ExtJS视频学习笔记
JS的面向对象编程 Ajax熟练 JavaScript设计模式征服Ajax Web 2.0开发技术详解(附光盘) 百度,谷歌,开源的论坛官方的demo和API文档 Reader Ext.data. ...
ExtJS EditorGridPanel 示例之Array格式Store前后台增删改查（不支持分页）
示例入口页面html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
ExtJS EditorGridPanel 示例之xml格式Store前后台增删改查
程序入口html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
ExtJS EditorGridPanel 示例之Array格式（自定义Array解析器）Store前后台增删改查
本示例入口html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

extjs-EditorGridPanel学习

extjs-EditorGridPanel学习相关推荐

最新文章

热门文章