EditorGridPanel的使用方法

最新推荐文章于 2025-05-31 11:34:28 发布

dz2008

最新推荐文章于 2025-05-31 11:34:28 发布

阅读量652

点赞数

分类专栏： Ext笔记文章标签： EXT JavaScript CSS 360 HTML ViewUI

Ext笔记专栏收录该内容

11 篇文章

订阅专栏

本文展示了一个使用ExtJS框架创建可编辑网格面板的例子。该示例包括如何配置SimpleStore来存储数据，定义ColumnModel来设置列属性，并实现EditorGridPanel以启用单元格编辑功能。此外还介绍了如何监听编辑事件及获取修改后的数据记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var myData=[
  [0,"MysTitle_0","Dangzhao_0"],
  [1,"MysTitle_1","Dangzhao_1"],
  [2,"MysTitle_2","Dangzhao_2"],
  [3,"MysTitle_3","Dangzhao_3"],
  [4,"MysTitle_4","Dangzhao_4"]
];

var store = new Ext.data.SimpleStore({
  autoLoad : true,
  baseParams : {
   "Action" : "Select",
   "Id" : "0"
  },
  data : myData,
  fields : [
   { name : "id" , mapping : 0},
   { name : "name" , mapping : 2},
   { name : "title" , mapping : 1}
  ],
  id : 0,
  listeners : {
   beforeload : function(){alert("beforedload")},
   load : function(){alert("load")},
   loadexception : function(){alert("loadexception")}
   //And all SimpleStore's Event
  },
  pruneModifiedRecords : false,
  remoteSort : false//because use client data so this property must false,
});

var colum = new Ext.grid.ColumnModel([
   {id : "id" ,header : "id" , width: 160 ,sortable: true, dataIndex : 'id'},
   {header : "name" , width: 160 , editor : new Ext.form.TextField({allowBlank: false}) ,sortable: true, dataIndex : 'name'},
   {header : "title" , width: 160 ,sortable: true, dataIndex : 'title'}
]);

colum.setEditable(1,true);

function modify(value){
return "<span style=\"color:red;\">" +value +"</span>";
}

var grid = new Ext.grid.EditorGridPanel({
  store : store,
  title:'Mys GridPanel',
  height:360,
        width:600,
  collapsible : true,
  animCollapse : true,
  allowDomMove : true,
  colModel : colum ,
  clicksToEdit : 2
});

grid.on({
afteredit : function(e){alert(e.field+" "+e.row+" "+e.column+" "+e.originalValue+" "+e.value)}
});

Ext.onReady(init);
function init(){
grid.render("gridDiv");

}

function checkData(){
var xData = grid.getStore();
var modR = xData.getModifiedRecords();
for(i=0;i<modR.length;i++){
var map=modR[i].modified;
alert(map["name"]);
}

}
</script>
</head>

</div>
</body>
</html>