var colM = "company,id,flyline";
var colMArr = colM.split(",");
var colLength = colMArr.length;
var colMArray = new Array();
for(var i=0; i<colLength; i++) {
colMArray[i] = {header:colMArr[i],width: 75,dataIndex:fieldArray[i]}
//此处的fieldArray[i]是fields的数据
}
//然后colMarray数组即是我们要动态构造的那个ColumnModel的参数,此处的动态的意
//思是colM可以从request中获取,然后用来动态创建header即表头信息,同
//理dataIndex也是一样的
var column = new Ext.grid.ColumnModel(colMArray);
//然后GridPanel中的制定cm属性值为column即可
var storeCpye = new Ext.data.GroupingStore({
proxy : new Ext.data.HttpProxy({
url : 'cxgl_cpye.app?dateTime=' + new Date().getTime() + '&subTranCode=list'
}),
reader : new Ext.data.JsonReader({
root : 'hstamcx',
totalProperty : "results",
fields : ["khbh","bankacc","fundacc","dxjgdm","cpdm","tazh"]
}),
sortInfo : {
field : 'cpdm',
direction : 'DESC'
},
groupField : 'cpdm'
}); var colMArray = new Array();
colMArray = [{header : "产品代码", dataIndex : "cpdm", width : 100},
{header : "代销机构代码", dataIndex : "dxjgdm", width : 100},
{header : "客户编号", dataIndex : "khbh", width : 100},
{header : "理财账号", dataIndex : "bankacc", width : 100},
{header : "客户资金账号", dataIndex : "fundacc", width : 100} var colQd = new Ext.grid.ColumnModel(colMArray); // GRID定义
var gridCpye = new Ext.grid.GridPanel({
id : 'cpye_grid',
title:'[产品余额]查询',
height : 800,
stripeRows : true,
bodyStyle : 'width:100%',
disableSelection : true,
cm : colQd,
viewConfig : {
forceFit : false
},
store : storeCpye,
iconCls : 'details',
animCollapse : true,
trackMouseOver : false,
loadMask : {
msg : '正在加载[产品余额]信息,请稍侯……'
},
//selModel : smQd,
selModel : new Ext.grid.RowSelectionModel({singleSelect:true}),
tbar : ['-',new Ext.form.Label({
text : '产品代码:'
}),new Ext.form.TextField({
id : 'cpdm',
name : 'cpdm',
width : 130
}),'-',new Ext.form.Label({
text : '代销机构代码:'
}), new Ext.form.TextField({
id : 'dxjgdm',
name : 'dxjgdm',
width : 130
}), '-', {
pressed : true,
text : '&nbsp;&nbsp;查&nbsp;&nbsp;&nbsp;&nbsp;询&nbsp;&nbsp;&nbsp;&nbsp;',
iconCls : 'yes',
handler : selinfo
},'-',new Ext.Toolbar.Fill(),'-',new Ext.form.Label({
text : ' 查询方式: '
}),new Ext.form.Radio({
id:"cpdm_radio",
name : "select_method",
inputValue : "cpdm desc,dxjgdm desc",
checked : true,
boxLabel : " 产 品&nbsp;&nbsp;" }),
new Ext.form.Radio({
id:"dxjgdm_radio",
name : "select_method",
inputValue : "dxjgdm desc,cpdm desc",
boxLabel : "代销机构&nbsp;&nbsp;"
}),'-'
],
bbar : new Ext.PagingToolbar({
pageSize : 20,
store : storeCpye,
displayInfo : true,
emptyMsg : '没有记录'
})
}); function selinfo(){
var cpdm_sel = Ext.get("cpdm").getValue();
var dxjgdm_sel = Ext.get("dxjgdm").getValue();
var select_method_sel = Ext.get("cpdm_radio").getValue();
if(document.getElementById("dxjgdm_radio").checked){
select_method_sel = Ext.get("dxjgdm_radio").getValue();
colMArray[0] = {header : "代销机构代码", dataIndex : "dxjgdm", width : 100};
colMArray[1] = {header : "产品代码", dataIndex : "cpdm", width : 100};
}else{
colMArray[0] = {header : "产品代码", dataIndex : "cpdm", width : 100};
colMArray[1] = {header : "代销机构代码", dataIndex : "dxjgdm", width : 100};
}
var params = {};
params.cpdm_sel = cpdm_sel;
params.dxjgdm_sel = dxjgdm_sel;
params.select_method_sel = select_method_sel;
//params.whereStr = " and feetype in ('1','2')";
storeCpye.baseParams = params;
colQd = new Ext.grid.ColumnModel(colMArray);
//gridCpye.reconfigure(storeCpye,colQd),
storeCpye.load({
callback : function(r, options, success) {
if (success == true){
gridCpye.reconfigure(storeCpye,colQd);
}else if (success == false) {
Ext.Msg.alert("错误", storeCpye.reader.jsonData.msg);
}
}
});
}

ExtJS GridPanel的ColumnModel 动态加载的更多相关文章

  1. ExtJS 4.1 TabPanel动态加载页面并执行脚本【转】

    ExtJS 4.1 TabPanel动态加载页面并执行脚本 按照官方示例,可以动态加载页面,可是脚本不执行,于是查SDK.google,发现scripts需要设置为true,于是设置该属性,整个代码如 ...

  2. ExtJs中动态加载机制研究(转)

    觉得写的太好了,怕弄丢了,转一下:http://extjs.org.cn/node/659 昨天我们team对于extjs的动态加载机制做了些深入研究,这里先share下controller加载的结果 ...

  3. Extjs-树 Ext.tree.TreePanel 动态加载数据

    先上效果图 1.说明Ext.tree.Panel 控件是树形控件,大家知道树形结构在软件开发过程中的应用是很广泛的,树形控件的数据有本地数据.服务器端返回的数据两种.对于本地数据的加载,在extjs的 ...

  4. ExtJs 4.2.1 复选框数据项动态加载(更新一下)

    最近在做博客项目,后台管理用的是ExtJs4.2.1版本,因为是初学所以在使用的时候也遇到不少的这样或那样的问题,也写了不少这方面的博客,今天要写的博客是关于复选框数据项动态的加载功能,以前也没用过, ...

  5. ExtJs 通过分析源代码解决动态加载Controller的问题

    通过分析源代码解决动态加载Controller的问题 最近在研究ExtJs(4.2.0)的MVC开发模式,具体Extjs的MVC如何使用这里不解释,具体参见ExtJs的官方文档.这里要解决的问题是如何 ...

  6. 关于实现Extjs动态加载类的方式实现

    Extjs4以前的版本没有动态加载类的方式,这样开发程序的时候加载很多的js会导致加载变慢,由于本人一直使用extjs3的版本进行开发,于是简单实现了一个动态加载类的管理器,使用方式与extjs4的方 ...

  7. Ext动态加载Toolbar

    在使用Ext的GridPanel时候,有时候需要面板不用重新加载而去更新Store或者Toolbar,Store的方法有很多,例如官方api给我们提供的Store.load(),Store.reLoa ...

  8. ExtJS4 动态加载

    由于有人说不要每次都调用ext-all.js,会影响性能,所以有考虑动态加载,动态加载时页面调用ext.js(4.0.7在调试时可考虑用ext-dev.js),然后在onReady之前调用 Ext.L ...

  9. ExtJS4.x动态加载js文件

    动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...

随机推荐

  1. c语言双向循环链表

    双向循环链表,先来说说双向链表,双向链表也叫双链表,是链表的一种,它的每个数据结点中都有两个指针,分别指向直接后继和直接前驱.所以,从双向链表中的任意一个结点开始,都可以很方便地访问它的前驱结点和后继 ...

  2. PHP性能调优,PHP慢日志---善用php-fpm的慢执行日志slow log,分析php性能问题

    众所周知,MySQL有slow query log,根据慢查询日志,我们可以知道那些sql语句有性能问题.作为mysql的好搭档,php也有这样的功能.如果你使用php-fpm来管理php的话,你可以 ...

  3. Web前端开发最佳实践(11):使用更严格的JavaScript编码方式,提高代码质量

    前言 JavaScript语言由于其固有的灵活性,所以导致开发者可以写出很多诡异的代码,甚至一些较为正常的特性,如类型隐式转换.this的指代等等,也会让刚接触此语言的开发者头大不已.尤其是那些熟知其 ...

  4. Linux下 rz 和 sz 命令的安装与使用

    目录 Linux下 rz 和 sz 命令的安装与使用 rz/sz命令的安装 sz命令-发送文件到本地(下载): rz命令-本地上传文件到服务器(上传): 声明 Linux下 rz 和 sz 命令的安装 ...

  5. Linux下MySQL主从同步故障:"Slave_SQL_Running:No"的解决方法

    故障现象: 进入slave服务器,运行: mysql> show slave status\G          .......              Relay_Log_File: loc ...

  6. 安装 Git

    是时候动手尝试下 Git 了,不过得先安装好它.有许多种安装方式,主要分为两种,一种是通过编译源代码来安装:另一种是使用为特定平台预编译好的安装包. 从源代码安装 若是条件允许,从源代码安装有很多好处 ...

  7. Socket 编程之 TCP 实现

    前几天介绍了计算机网络的一些概念,并介绍了几个协议.下面就说说 Java 中的 Socket 编程,服务器和客户端是如何通信的呢? 首先要介绍一下 Socket ,我们知道在 TCP/IP 协议簇中, ...

  8. OpenGL笔记<第一章> 构建 GLSL class

    恭喜,我们终于很扎实地完成了第一章——glsl 入门 不幸的是,it's not the basic of GLSL shader ,我们下一节开篇,basic of GLSL shader 在下一章 ...

  9. 【转】JQuery Validate使用总结二

    Jquery Validate使用总结一 五.常用方法及注意问题 1.用其他方式替代默认的SUBMIT $().ready(function() { $("#signupForm" ...

  10. JavaScript基础-DAY1

    JavaScript介绍 你不知道它是什么就学?这就是一个网页嵌入式脚本语言...仅此而已 JavaScript组成 一个完整的 JavaScript 实现是由以下 3 个不同部分组成的: 核心(EC ...