JavaScript的ExtJS框架中表格的编写教程

var cm = new Ext.grid.ColumnModel({
{header: '角色',dataIndex: 'role',width:90,sortable: true},//width设置列宽度，默认为100px，sortable设置排序功能
{id:'grade',header: '等级',dataIndex: 'grade',width:40}
});
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',cm: cm
viewConfig:{ //让每列自动填充满表格
forceFit: true
}
autoExpandColumn: 'grade' //自动延伸列，列的id在ColumnModel中定义
});

var cm = new Ext.grid.ColumnModel([
{header:'id',dataIndex:'id'},{header:'name',dataIndex:'name'},{header:'sex',dataIndex:'sex',renderer:renderSex},]);

var data = [
['1','Jason','male'],['2','Kate','female']
];

var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),[
{name: 'id'},{name: 'name'},{name: 'sex'}
])
});
store.load();

var grid = new Ext.grid.GridPanel({
autoHeight: true,renderTo: 'grid',cm: cm
});

var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),sm,{header:'编号',{header:'名称',dataIndex:'name'}
]);

var data = [
['1','name1'],'name2']
];

var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),{name: 'name'}
])

});
store.load();

var grid = new Ext.grid.GridPanel({
autoHeight: true,cm: cm,sm: sm
});

for (var j = 0; j < fields.length; j++) {
  var name = fields[j];
  var value = record.data[name];

  var colIndex = cm.findColumnIndex(name);
  var rowIndex = store.indexOfId(record.id);
  var editor = cm.getCellEditor(colIndex).field;

  if (!editor.validateValue(value)) {
    Ext.Msg.alert('<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>','请检查输入的数据是否正确！',function(){
      grid.startEditing(rowIndex,colIndex);
    });
    return;
  }
}

}
var jsonArray = [];
Ext.each(m,function(item) {
jsonArray.push(item.data); //把修改过得数据放到jsonArray中
});

Ext.lib.Ajax.request( //使用Ajax请求提交给后台
'POST','save_data.jsp',{success: function(response){ //返回成功
Ext.Msg.alert('信息',response.responseText,function(){
store.reload();
});
},failure: function(){ //返回失败
Ext.Msg.alert("错误","服务器保存数据出错！");
}},'data=' + encodeURIComponent(Ext.encode(jsonArray))
);
}