当前位置: 代码迷 >> JavaScript >> 高分求 extjs 4.1 CheckboxGroup 动态生成列跟保存
  详细解决方案

高分求 extjs 4.1 CheckboxGroup 动态生成列跟保存

热度:615   发布时间:2013-12-19 00:33:34.0
高分求 extjs 4.1 CheckboxGroup 动态生成列和保存
如题:

最近刚学extjs 有几个地方要求动态生成CheckboxGroup 的项,并能获取选中项,同时再次加载时要能绑定已选项

------解决方案--------------------
那不就发送ajax,再ajax成功回调时根据返回的内容生成checkboxgroup就好了?
参考:Ext4.1动态生成checkboxgroup对象
------解决方案--------------------
试一试把你控件调用(主程序)中的第一行代码 Ext.reg('ucCheckboxGroup', ucCheckboxGroup); 放到你的控件定义文件(也就是‘ucCheckboxGroup.js’)里。再运行下看看还有没有问题?
------解决方案--------------------
记得放到 ucCheckboxGroup.js 最下面,要先定义ucCheckboxGroup 再执行它
------解决方案--------------------
是我疏忽了!发现问题所在了。楼主你引用的例子一定是给extjs3写的,因为:

在extjs4中定义新的class要用Ext.define,而extjs3定义自己的class才用 Ext.extend

比如:

Ext.define('Ext.ux.form.MultiSelect', {
    extend: 'ClassNameYouAreExtending',
    alias: 'widget.multiselect'
});


应外楼主你引用的方法(var ckbSupporting = new ucCheckboxGroup )也是extjs3的方法,
extjs4应该是Ext.create(。。。)

所以建议你找一个extjs4的控件.现在用的这个extjs3的即使能引用了,数据调用或其他方面也可能遇到问题
------解决方案--------------------
extjs3的CheckboxGroup 插件里本身就没有innerCt这个属性,这个是extjs4 CheckboxGroup 里的属性。

你可能没理解全我10楼的回复,你以前的代码不光是引用那部分是extjs3,就连你在网上找的那个library(http://stevelee.iteye.com/blog/1328992)也是extjs3的。这样一定会有问题的。因为extjs4引擎基本全从写了,所以layout一定会出问题。

建议放弃那个library找一个extjs4的
------解决方案--------------------
其实你要做动态生成CheckboxGroup 的项,我认为根本不需要额外的控件,就用extjs本身自带的CheckboxGroup 就好了,只不过需要和后台还有数据库做连接。用数据库的一个field的值(比如yes/no, 0/1, true/false ...)来控制你某一个Checkbox是否被选中.你更新Checkbox后再传回数据库,这样下次加载去读取数据库自然就能绑定已选项了。

实施起来的话先用store 加载数据,然后再赋值给checkbox


//建立checkbocgroup
var myCheckboxGroup = Ext.create('Ext.form.CheckboxGroup', {
    fieldLabel: 'Checkboxes in two columns',
    renderTo: Ext.getBody()
});

//建立store,然后在load store的时候加载checkbocgroup
var myStore = Ext.create('Ext.data.Store', {
    autoLoad: true,
    model: operationTypeModel,
    listeners: {
        load: function(store, records) {
            myCheckboxGroup.removeAll();

            myCheckboxGroup.add(Ext.Array.map(records, function(record) {
                return {
                    boxLabel: record.get('oNameEn'),
                    inputValue: record.get('oNameEn'),
                    name: record.get('old')
                };
            }));
        }
    },
    proxy: {
        type: 'ajax',
        url: 'url', //你后台的url
        reader: {
            root: 'data',
            type: 'json'
        }
    }
});


参考下这个例子给你点启发
------解决方案--------------------
恭喜了,结婚第一工作第二,放假就休息何苦这么累呢

首先发现了几个问题,不至于影响程序运行但从4.0版本开始已经不建议使用: 
1. ext.extend 见这里
如果定义class建议写成Ext.define('myCheckboxGroup', { extend: 'Ext.form.CheckboxGroup', 。。。

2. Ext.regModel 见这里
建议写成Ext.define("MyModel", {extend: "Ext.data.Model",fields: [] });

还有就是你的那句 me.removeAll();用在这我不太理解,能否解释下? 我感觉用在这里是不对的。

你用store的方法加载data中却没有数据有可能是你没在store定义root,也有可能是取来的json格式和extjs的默认json格式不符,不过既然你要用Ext.Ajax.request也行。我现在没做web,手头没装extjs4的库,没办法调试,建议你找一个ext4 ajax request的例子比较着做,这样能减少不必要的语法上错误。
  相关解决方案