ExtJs4.0 扩充控件（itemselector）

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个文件

ExtJs4.0 扩充控件（itemselector）

热点推荐