标签：gridpanel 加载 添加 var colObj EXTJS columns panel
现在的开发中，出现一个需求，就是需要在界面 中根据后台的数据动态的显示 gridpanel的列，同时需要固定某些列，闲话不说，先看代码，
在 主界面中 只有一个 gridpanel,其他啥也没有，看下：
{
xtype:"gridpanel",
width:"100%",
title:"详细信息EQPID",
id:"lotview_lotdetail_eqpid",
border:false,
enableLocking:true,//为了使用锁定列，需要开启这个配置
columns : []
}
现在就需要在方法中 给这个 gridpanel动态的添加列 和 数据
首先 添加extjs的model，有几个列是固定的，所以这里写死
//grid的列对象
var colObj = [];
colObj.push({
text : 'Stage',
locked: true, //表示锁定
dataIndex : 'stage'
});
colObj.push({
text : 'Recipe ID',
locked: true,
dataIndex : 'recipeId'
});
colObj.push({
text : 'Recipe Seq',
locked: true,
dataIndex : 'recipeSeq'
});
//创建一个 新的model
var colModel = Ext.create("Ext.data.Model",{
fields: colObj
});
//添加data，这里的rtnObj是后台过来的数据json对象
for(var i=0;i<rtnObj.length;i++){
var objTmp = {
"stage":rtnObj[i].stage,
"recipeId":rtnObj[i].recipeId,
"recipeSeq":rtnObj[i].recipeSeq
}
data.push(objTmp)
}
//创建一个 store
var newStore = Ext.create('Ext.data.Store', {
model: colModel,
data:data
});
//重新替换 store和列，注意，主要是这句
panel.reconfigure( newStore,colObj);
上面的最后一句代码，是关键，替换gridpanel中的store和columns。
到这里，已经完成 对gridpanel的动态添加列，这时，又得到一个需求，需要将列的值根据不同的值显示不同颜色。
var columns = panel.getColumns();
Ext.each(columns,function(column){
//除了几个固定的 列，其他列都需要添加render方法
column.renderer = function(value,row){
if(value=="1"){
row.css="myColor"; //自己定义的 css样式，例: .myColor{background: #E0E0E0;}
}
return value;
}
})
这里可能有的同学会有问题，因为我的主页面是tabpanel，所以第一次加载数据的时候并没有渲染，等点击标签页的时候再加载，所以没问题，但是如果有的同学本来就是在一个panel中，因为已经加载完了数据，所以再配置这个方法的时候会发现没有触发显示不同颜色的效果，这里，我想到两个方法，没有实际过，有需要的同学可以参考一下，
第一个：重新渲染，将当前的panel重新渲染的他的父组件上，例 panel.render("父组件ID");
第二个：第一个我们 替换的时候 ，不替换store，就是这句话panel.reconfigure( newStore,colObj);修改成
panel.reconfigure( null,colObj);
等给 columns添加完方法属性以后，我们重新用panel.setStore（）这个方法来设置store。
标签：gridpanel,加载,添加,var,colObj,EXTJS,columns,panel 来源： https://blog.csdn.net/java_dotar_01/article/details/100112594
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。