EditorGridPanel的使用方法

编程小6 (4) 2024-05-14 16:23

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说EditorGridPanel的使用方法,希望能够帮助你!!!。

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>