extjs-grid数据加载

1、grid并没提供直接加载对象和对象数组的方法，但是可以通过其他的方式实现，所以我这里写了一个实现这样功能的方法arr2grid（即供参考）。grid只依赖一个store，所以受限，方法arr2grid，可以解决这个问题。

2、store配置autoLoad和使用load方法，都可以加载数据到store，grid依赖store，从而数据也就加载到grid上，本事例只是jsonp跨域加载store的事例。同样的ajax的方式也是可以的。

Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
{ 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

myGrid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],

columns: [
{ header: 'Name',  dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 , field: {
xtype: 'textfield',
allowBlank: false
}},
{ header: 'Phone', dataIndex: 'phone'}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
myGrid.store.sort([
{ property: 'name',  direction: 'ASC' },
{ property: 'email', direction: 'DESC' }
]);
//obj ---> grid
var obj = { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  };
obj2grid(obj,myGrid);
//arr ---> grid
var arr =[
{ 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
{ 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" }
];
arr2grid(arr,myGrid);
//*选择一行后*复制到控制台，才能看到效果
var arr = selection2arr(myGrid)
Logger.printfarr(arr);
//--------------------grid_store_jsonp_autoload--------------------------
var myStore = Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
proxy: {
type: 'jsonp',
url : 'grid.json',
reader: {
type: 'json',
root: 'items'
}
},
autoLoad:true,
});
myStore.on({
load: function(store,records,successful){
var modelarr = store.getRange()
var arr = modelarr2arr(modelarr);
Logger.printfarr(arr);
arr2grid(arr,myGrid);
}
})
//--------------------grid_store_jsonp_load------------------------
//都差不多，不多写了

})
//grid(selection) --> arr
function selection2arr(gird){
var selection = myGrid.getSelectionModel().getSelection()
var arr = [];
Ext.each(selection,function(item){
arr.push(item.getData());
})
return arr;
}

//arr --> grid : void
function arr2grid(arr,grid){
if ( Ext.isEmpty(arr) || !Ext.isArray(arr))return ;
Ext.each(arr,function(item){
obj2grid(item,grid)
})
}

//obj --> grid : void
function obj2grid(obj,grid){
if (Ext.isEmpty(obj) || !Ext.isObject(obj)) return;
var columnsArr = []
var columns = grid.columns
Ext.each(columns,function(item){
columnsArr.push(item.dataIndex||'');
});
var objkeyArr = Ext.Object.getKeys(obj);
var o = {};
Ext.each(objkeyArr,function(item){
if(Ext.Array.contains(columnsArr,item)){
o[item] = obj[item]||''
}
});
grid.store.add(o);
var items = grid.store.data.items;
Ext.each(items,function(item){
item.data=item.raw;
})
}

//model[]--->arr:arr
function modelarr2arr(modelarr){
if(Ext.isEmpty(modelarr)||!Ext.isArray(modelarr))return null;
var arr = [];
Ext.each(modelarr,function(item){
if(item.isModel){
arr.push(item.getData()||'')
}
})
return arr;
}

//记录器
Ext.define('Logger', {
singleton : true,
log : function (msg) {
console.log(msg);
},
error : function (msg) {
console.error(msg)
},
printferror : function (msg) {
this.error(Ext.id('', 'num:') + '   ' + msg);
},
printf : function (msg) {
this.log(Ext.id('', 'num:') + '   ' + msg);
},
printf2 : function (val, msg) {
this.printf(val + '--' + msg);
},
printfobj : function (obj) {
var s = '';
if (Ext.isObject(obj)) {
Ext.Object.each(obj, function (key, value, myself) {
s += key + ":" + (Ext.isObject(value) ? 'object' : value) + "  ";
})
}
if (s)
this.printf(s);
},
printfarr : function (arr) {
var s = '';
Ext.each(arr, function (item) {
if (Ext.isObject(item)) {
Ext.Object.each(item, function (key, value, myself) {
s += key + ":" + (Ext.isObject(value) ? 'object' : value) + "  ";
})
}
});
this.printf(s ? s : arr)
}
});

grid.json:

Ext.data.JsonP.callback1(
{
'items':[
{ 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
{ 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
]
});