extjs构造矩阵.docVIP

使用extjs grid 组件构造矩阵 在实验室工作的时候，因为要帮学长 做流量矩阵的数据展示，所以要 构造一个矩阵视图， 类似下图： 我们使用的是EXTJS框架，在此对使用grid 如何构建矩阵给出一个实现实例，并贴出源代码，希望能与大家一起分享经验，共同进步。Email:sunlujing@ 第一步使用获得包含 矩阵的所有记录的store,我的矩阵是25*25的。 如代码： var TMstore = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : json/getMatrixInfo.do }), reader : new Ext.data.JsonReader({ root : tmList, fields : [{ name : srcAs, mapping : srcAs }, { name : dstAs, mapping : dstAs }, { name : bytes, mapping : bytes }] }) }); 第二步，获得矩阵的行包含的记录的 store 。 // 定义流量矩阵中源节点的store var fromNodestore = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : json/getSrcAs.do }), reader : new Ext.data.JsonReader({ root : asList, fields : [{ name : srcAs, mapping : srcAs }] }) }); 第三步，获得矩阵的列包含的记录 store 。 var toNodestore = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : json/getDstAs.do }), reader : new Ext.data.JsonReader({ root : asList, fields : [{ name : dstAs, mapping : dstAs }] 第四步 构建grid 的 column 显示模式。 var cloumn = [{ id : names, header : 源AS\\目标AS, width : 100, sortable : true, dataIndex : names }];// 列标签名 for (var fi = 0; fi len; fi++) { field.push({ name : fi }); cloumn.push({ header : FromNode[fi], width : 75, sortable : true, dataIndex : fi }); };// end for 第五步 构建grid 数据store 的 field 对象。 var records = [];// 每一条记录 var field = [{ name : names }];// 列值的属性 // 把值记录到records中 for (var i = 0; i len; i++) { var oneRec = [FromNode[i]]; for (var j = 0; j len; j++) { var value = Tmatric[i*len+j][0]; oneRec.push(value); }