ExtJs4.0 扩充控件（itemselector）

2013-01-08

ExtJs4.0 扩展控件（itemselector）本帖最后由 fengyunzb1 于 2012-08-20 15:37:54 编辑{xtype: itemselect

ExtJs4.0 扩展控件（itemselector）
本帖最后由 fengyunzb1 于 2012-08-20 15:37:54 编辑

{
                        xtype: 'itemselector',
                        name: 'itemselector',
                        id: 'itemselector-Yfield',
                        anchor: '100%',
                        height: 300,

                        autoScroll: true,
                        hideLabel: true,
                        buttons: ["top", "add", "remove", "bottom"],
                        buttonsText: {
                            top: "添加所有项",
                            add: "添加选中项",
                            remove: "移除选中项",
                            bottom: "移除所有项"
                        },
                        imagePath: '@Url.Content("~/ux/css/images/")',
                        store: itemselectStore,
                        allowBlank: false,
                        blankText: '@Html.GetLocalText("Common_SelectAtLeastOneDim")', //请至少选择一个可用用户和组
                        multiselects: [
                                    { listTitle: '@Html.GetLocalText("WebMetaDataAccessDim")', height: 300 }, //可用用户和组
                                    {listTitle: '@Html.GetLocalText("WebMetaDataSelectDim")', id: 'selected', height: 300}//选择用户和组

                                ],
                        displayField: 'DIMmemberName',
                        valueField: 'DIMmemberId',
                        msgTarget: 'side'

                    }

为了实现将top的事件改成全选的事件，bottom实现全部反选的功能，代码如下

                        Ext.override(Ext.ux.form.ItemSelector, {
                            onTopBtnClick: function () {       //将top的事件改成全选的事件
                                var me = this,
                                    fromList = me.fromField.boundList,
                                    allRec = fromList.getStore().getRange();

                                fromList.getStore().remove(allRec);
                                me.toField.boundList.getStore().add(allRec);
                            },
                            onBottomBtnClick: function () {
                                var me = this,
                                    toList = me.toField.boundList,
                                    allRec = toList.getStore().getRange();

                                toList.getStore().remove(allRec);
                                me.fromField.boundList.getStore().add(allRec); 
 
                            }
                        });

有比较多的页面要用的上面这个扩展，于是我就将这个模块放到了一个JS文件（Common_SelectItem.js）里面，有用到的页面就引入Common_SelectItem.js文件，但是这样做就报错：cls is undefined，

 override: function(cls, overrides) {
            if (cls.prototype.$className) {
                return cls.override(overrides);
            }
            else {
                Ext.apply(cls.prototype, overrides);
            }
        }

不知道怎么改，求帮助！！！
[解决办法]
应该是你没导入itemselector那个js文件

bootstrap.js只是控制输出调式版本的ext核心或者是压缩版本的，ux之类可能需要自己手动导入，没有集成到ext核心里面，应为下面的代码输出undefined。。

Ext.onReady(function () {
            alert(Ext.ux.form.ItemSelector)
        });

ux.form.ItemSelector依赖前面2个js，注意一起导入，路径修改为你自己对应的
    <script type="text/javascript" src="../ux/layout/component/form/ItemSelector.js"></script>
    <script type="text/javascript" src="../ux/form/MultiSelect.js"></script>
    <script type="text/javascript" src="../ux/form/ItemSelector.js"></script>
[解决办法]

引用:

引用:
应该是你没导入itemselector那个js文件

bootstrap.js只是控制输出调式版本的ext核心或者是压缩版本的，ux之类可能需要自己手动导入，没有集成到ext核心里面，应为下面的代码输出undefined。。

JScript code

Ext.onReady(function () {
alert(Ext.ux.form.ItemSel……

你没有写到Common_SelectItem.js时可以，说明按照你直接写在页面时加载JS的顺序是没有问题的，你现在只是想要提取一个公共方法，但是你是直接写的，不是方法，可以在Common_SelectItem.js中这样写：

function ItemSelectorMoveAll(){
 Ext.override(Ext.ux.form.ItemSelector, {
                            onTopBtnClick: function () {       //将top的事件改成全选的事件
                                var me = this,
                                    fromList = me.fromField.boundList,
                                    allRec = fromList.getStore().getRange();

                                fromList.getStore().remove(allRec); 
 
                                me.toField.boundList.getStore().add(allRec);
                            },
                            onBottomBtnClick: function () {
                                var me = this,
                                    toList = me.toField.boundList,
                                    allRec = toList.getStore().getRange();

                                toList.getStore().remove(allRec);
                                me.fromField.boundList.getStore().add(allRec);
                            }
                        });
}

在页面里（你原来写这写代码的地方）调用这个方法应该就可以了。
[解决办法]

引用:

引用:
应该是你没导入itemselector那个js文件

bootstrap.js只是控制输出调式版本的ext核心或者是压缩版本的，ux之类可能需要自己手动导入，没有集成到ext核心里面，应为下面的代码输出undefined。。

JScript code

Ext.onReady(function () {
alert(Ext.ux.form.ItemS……

ext.require感觉是鸡肋吧，都导入了ext-all了还require干嘛？只是没有生成实例吧。。具体require干嘛的我也不清楚，应该是也只是引用ext-all.js里面的东西，而不是根据需要导入相关的js文件

你的问题应该就是ux类库js没有导入，你用firebug监视下，应该没有下载 'Ext.ux.form.MultiSelect',
'Ext.ux.form.ItemSelector'这2个文件

热点排行

Ajax

ExtJs4.0 扩充控件（itemselector）