您的位置:

extjs全选的简单介绍

本文目录一览:

extjs4.0 grid 对所有页进行全选

我建议不要前台全选,你做一个“全部操作”,直接写一个请求,去后台把所有的id取过来就行了。

大批量操作百万个id 也不是小数目,批量操作建议后台执行。

换个方式,直接请求后台,去后台批量操作。

Extjs怎么实现下拉框多选

1、扩展js类库,在项目中建立一个 js文件,命名为:xxx.js  其代码为

if ('function' !== typeof RegExp.escape)   

{  

    RegExp.escape = function (s)   

    {  

        if ('string' !== typeof s)   

        {  

            return s;  

        }  

        return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');  

    };  

}  

  

Ext.ns('Ext.form');  

  

Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox,   

{  

    checkField: 'checked',  

    multi: true,  

    separator: ',',  

    initComponent: function ()   

    {  

        if (!this.tpl)   

        {  

            this.tpl = 'tpl for="."' + 'div class="x-combo-list-item"'  

                    + 'img src="' + Ext.BLANK_IMAGE_URL + '" '  

                    + 'class="ux-MultiSelect-icon ux-MultiSelect-icon-'  

                    + '{[values.' + this.checkField + '?"checked":"unchecked"'  

                    + ']}"'  

                    + '{[values.' + this.displayField + ']}'  

                    + '/div'  

                    + '/tpl';  

        }  

  

        Ext.form.MultiSelect.superclass.initComponent.apply(this, arguments);  

  

        this.on(  

        {  

            scope: this,  

            beforequery: this.onBeforeQuery,  

            blur: this.onRealBlur  

        });  

  

        this.onLoad = this.onLoad.createSequence(function ()   

        {  

            if (this.el)   

            {  

                var v = this.el.dom.value;  

                this.el.dom.value = '';  

                this.el.dom.value = v;  

            }  

        });  

    },  

    initEvents: function ()   

    {  

        Ext.form.MultiSelect.superclass.initEvents.apply(this, arguments);  

        this.keyNav.tab = false;  

    },  

    beforeBlur: function ()   

    {  

    },  

    postBlur: function ()   

    {  

    },  

  

    clearValue: function ()   

    {  

        this.value = '';  

        this.setRawValue(this.value);  

        this.store.clearFilter();  

        this.store.each(function (r)   

        {  

            r.set(this.checkField, false);  

        }, this);  

        if (this.hiddenField)   

        {  

            this.hiddenField.value = '';  

        }  

        this.applyEmptyText();  

    },  

    getCheckedDisplay: function ()   

    {  

        var re = new RegExp(this.separator, "g");  

        return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');  

    },  

    getCheckedValue: function (field)   

    {  

        field = field || this.valueField;  

        var c = [];  

        var snapshot = this.store.snapshot || this.store.data;  

        snapshot.each(function (r)   

        {  

            if (r.get(this.checkField))   

            {  

                c.push(r.get(field));  

            }  

        }, this);  

  

        return c.join(this.separator);  

    },  

    onBeforeQuery: function (qe)   

    {  

        qe.query = qe.query.replace(new RegExp(RegExp.escape(this.getCheckedDisplay()) + '[ ' + this.separator + ']*'), '');  

    },  

    onRealBlur: function ()   

    {  

        this.list.hide();  

        var rv = this.getRawValue();  

        var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));  

        var va = [];  

        var snapshot = this.store.snapshot || this.store.data;  

  

        Ext.each(rva, function (v)   

        {  

            snapshot.each(function (r)   

            {  

                if (v === r.get(this.displayField))   

                {  

                    va.push(r.get(this.valueField));  

                }  

            }, this);  

        }, this);  

        this.setValue(va.join(this.separator));  

        this.store.clearFilter();  

    },  

    onSelect: function (record, index)   

    {  

        if (this.fireEvent('beforeselect', this, record, index) !== false)   

        {  

            record.set(this.checkField, !record.get(this.checkField));  

  

            if (this.store.isFiltered())   

            {  

                this.doQuery(this.allQuery);  

            }  

  

            if (this.multi)   

            {  

                if (record.get("key") == "---"  record.get(this.checkField))   

                {  

                    this.setValue("---");  

                }  

                else   

                {  

                    this.setValue(this.getCheckedValue());  

                }  

            }  

            else   

            {  

                this.clearValue();  

                this.value = record.get(this.valueField);  

                this.setRawValue(record.get(this.displayField));  

                this.list.hide();  

            }  

  

            this.fireEvent('select', this, record, index);  

        }  

    },  

    setValue: function (v)   

    {  

        if (v)   

        {  

            v = '' + v;  

            if (this.valueField)   

            {  

                this.store.clearFilter();  

                this.store.each(function (r)   

                {  

                    var checked = !(!v.match('(^|' + this.separator + ')'  

                                + RegExp.escape(r.get(this.valueField))  

                                + '(' + this.separator + '|$)'));  

                    r.set(this.checkField, checked);  

                }, this);  

                this.value = this.getCheckedValue();  

                this.setRawValue(this.getCheckedDisplay());  

                if (this.hiddenField)   

                {  

                    this.hiddenField.value = this.value;  

                }  

            }  

            else   

            {  

                this.value = v;  

                this.setRawValue(v);  

                if (this.hiddenField)   

                {  

                    this.hiddenField.value = v;  

                }  

            }  

            if (this.el)   

            {  

                this.el.removeClass(this.emptyClass);  

            }  

        }  

        else   

        {  

            this.clearValue();  

        }  

    },  

    selectAll: function ()   

    {  

        this.store.each(function (record)   

        {  

            record.set(this.checkField, true);  

        }, this);  

        this.doQuery(this.allQuery);  

        this.setValue(this.getCheckedValue());  

    },  

    deselectAll: function ()   

    {  

        this.clearValue();  

    }  

});  

Ext.reg('multiSelect', Ext.form.MultiSelect);

2、在ext-all.css文件最后,加入css样式

.ux-MultiSelect-icon { width:16px; height:16px; float:left; background-position: -1px -1px ! important; background-repeat:no-repeat ! important; }  

.ux-MultiSelect-icon-checked { background: transparent url(../images/default/menu/checked.gif); }  

.ux-MultiSelect-icon-unchecked { background: transparent url(../images/default/menu/unchecked.gif); }

3、使用

    var DepartUserStore=new Ext.data.Store(  

     {  

            proxy: new Ext.data.HttpProxy(  

            {  

                    url:'/Web/Manage/DeskTop/JSON/ScheduleManager/GetSimpleDepartUserInfo.aspx'  

            }),  

            //读取Json  

            reader: new Ext.data.JsonReader(  

            { totalProperty: "totalCount", root: "root" },   

            [  

                    {name:'UserId',type:'int'},  

                    {name:'UserName',type:'string'}  

            ])  

    });  

      

    var DepartUserCbox = new Ext.form.MultiSelect(  

    {  

            fieldLabel: '    姓名',  

            labelStyle: 'width:80px',  

            width: 150,  

            editable: false,  

            id: 'DepartUserDS',  

            hiddenName:'DepartUserIdDS',  

            store: DepartUserStore,  

            emptyText: '--请选择--',  

            allowBlank: false,   

            blankText: '请选择',   

            mode:'remote',  

            displayField: 'UserName',  

            valueField: 'UserId',  

            triggerAction: 'all',  

            selectOnFocus: true,  

            listWidth: 200  

    });  

      

    DepartUserStore.on('load', function ()   

    {  

            DepartUserCbox.selectAll(); //全选  

    }); 

    

    DepartUserStore.load();

extjs 根据fieldset的checkBox情况,来全选checkBoxGroup

!doctype html

html lang="en"

head

meta charset="UTF-8"

titleExtjs 4.2 demo/title

link rel="stylesheet" href="../resources/css/ext-all.css"

script src="../bootstrap.js"/script

script

Ext.onReady(function(){

Ext.create('Ext.Panel',{

width:450,

items:[{

xtype: 'checkboxgroup',

listeners:{

change:function(gp,nv,ov,eOpts){

// 全选

if(nv.all  !ov.all) 

return gp.eachBox(function(box,idx){

box.setRawValue(true);

});

// 反选

if(ov.all  !nv.all)

return gp.eachBox(function(box,idx){

box.setRawValue(false);

});

}

},

width:'100%',

fieldLabel: 'Auto Layout',

cls: 'x-check-group-alt',

items: [

{boxLabel: '全选', name: 'all'},

{boxLabel: 'Item 1', name: 'cb-auto-1', checked: true},

{boxLabel: 'Item 2', name: 'cb-auto-2'},

{boxLabel: 'Item 3', name: 'cb-auto-3'},

{boxLabel: 'Item 4', name: 'cb-auto-4'}

]

},{

xtype:'button',

text:'GetChecked',

handler:function(){

Ext.Msg.alert('选中数量',String(this.up('panel').items.items[0].getChecked().length));

}

}],

renderTo:Ext.getBody()

});

});

/script

/head

body

/body

/html

extjs 实现checktree 树全选

你可以用一些JS框架, 比如extjs, 有现成的树控件, 你把数据组织成json格式的,就可以显示了

extjs如何实现全选

extjs几的?

思路就是,点击全选按钮,里面加个click事件,然后里面获取你下拉列表里的grid的selectmodel

像这样:grid.getSelectionModel().selectAll();

主要是你得拿到你这下来列表里grid这个对象

我没你这个组件,所以只能大概一说,也可以把你这组件发给我,我帮你弄

extjs在线demo的简单介绍

本文目录一览: 1、谁有extjs4选择记录并修改的demo? 2、各位同志们,请问这个页面用EXTJS怎么做出来?有没有demo版本的示例啊,求教啊 3、extjs官方在线demo究竟怎么看源码 4

2023-12-08
extjs全选的简单介绍

2022-11-25
extjs的简单介绍

本文目录一览: 1、extjs是什么??用来做什么的?麻烦不要复制,通俗点,3Q 2、Extjs框架是什么 3、extjs怎么自定义函数 extjs是什么??用来做什么的?麻烦不要复制,通俗点,3Q

2023-12-08
extjs的jsp标签库的简单介绍

本文目录一览: 1、怎么样理解Jsp页面里面写的Ext代码,或者是怎么把界面显示出来的 2、ExtJS 中JS页面如何调用另外一个XX.jsp页面javascript中的方法? 3、extjs里面怎么

2023-12-08
extjs教程的简单介绍

本文目录一览: 1、下载Extjs 视频教程网站 2、extjs5.0日历控件calendar教程资料 3、ExtJS 2.0实用简明教程之应用ExtJS 4、求推荐学习ExtJS的资料,网站。 5、

2023-12-08
extjs添加方法的简单介绍

本文目录一览: 1、EXTJS 如何给一个文本框添加点击事件 2、Extjs 2.0 如何动态的添加checkBox 3、extjs中怎么添加事件 EXTJS 如何给一个文本框添加点击事件 有两种方法

2023-12-08
extjs快速开发入门指南的简单介绍

本文目录一览: 1、ExtJS是什么,一位学长说的,对这个从未听说 2、ext基本语法 3、转:新手如何学习ExtJS 4 4、extjs实用开发指南 ExtJS是什么,一位学长说的,对这个从未听说

2023-12-08
extjs框架面试的简单介绍

本文目录一览: 1、Extjs框架是什么 2、Extjs怎么样? 3、Web前端框架是什么?优就业面试题目! 4、新建java web项目如何添加extjs.js配置文件 Extjs框架是什么 Ext

2023-12-08
extjs模板循环的简单介绍

本文目录一览: 1、如何销毁extjs窗体? 2、extjs的card布局中使用XTemplate模板填充item的问题 3、Extjs如何动态加载Extjs脚本 4、extJS4.0 我在for循环

2023-12-08
再探extjs的简单介绍

本文目录一览: 1、怎么用Extjs做报表啊,求源代码,跪求啊 . 2、请问如何使用EXTjs脚本实现页面跳转? 3、extjs 先闪一下然后再显示 怎么用Extjs做报表啊,求源代码,跪求啊 . 你

2023-12-08
extjs清空选择框的简单介绍

本文目录一览: 1、Extjs4 怎么清空datepicke 2、extjs monthfield如何清空 3、extjs grid checkboxmodel为什么选择一行其他选择就清除了 4、ex

2023-12-08
extjs商城的简单介绍

本文目录一览: 1、本人现在学习ExtJS,谁有ExtJS的入门教程视频,(清晰版的)适合初次接触ExtJS的学员使用。 2、知乎小米商城后端用的是什么框架 3、ExtJs中如何在事件中传值 4、Ex

2023-12-08
extjs怎么删除的简单介绍

本文目录一览: 1、extjs combobox 到底怎么清除啊 2、extjs 怎么删除controller 3、Extjs 如何获取当前路径删除指定的文件? 4、在ExtJS中,想批量添加,删除S

2023-12-08
extjs常用工具函数详解的简单介绍

本文目录一览: 1、extjs怎么自定义函数 2、extjs函数调用方法 3、ExtJs里页面初始化函数是什么? extjs怎么自定义函数 extjs的自定义事件主要分三步1.在类中定义事件名称: P

2023-12-08
extjscheckboxfield的简单介绍

本文目录一览: 1、extjs CheckboxGroup默认选中问题 2、在ext中如何动态设置checkbox的checked属性! 3、Extjs怎么实现下拉框多选 4、extjs 根据fiel

2023-12-08
如何下载extjs的简单介绍

本文目录一览: 1、extjs怎么做下载,只能将后台传递的流交给浏览器么? 2、什么是Extjs 怎么下载 3、怎样下载extJS API文档 4、extjs中的下载功能怎么实现 5、extjs4.0

2023-12-08
自定义extjs主题的简单介绍

本文目录一览: 1、Extjs 4如何自定义Panel 2、extjs3 中怎么动态的增加自定义样式 3、extjs怎样自定义图片,并把它变成iconcls类 4、extjs怎么自定义函数 5、ext

2023-12-08
extjs教程完整版的简单介绍

本文目录一览: 1、下载Extjs 视频教程网站 2、本人现在学习ExtJS,谁有ExtJS的入门教程视频,(清晰版的)适合初次接触ExtJS的学员使用。 3、转:新手如何学习ExtJS 4 下载Ex

2023-12-08
extjs哪个更好的简单介绍

本文目录一览: 1、Jquery与Extjs这两个哪个比较好点? 2、jquery和extjs哪个好一点?他们有什么区别? 3、Ext js和jQuery两个哪个比较好? 4、easyui和extjs

2023-12-08
extjs中时间格式的简单介绍

本文目录一览: 1、Extjs 前台向后台传时间类型数据 数据格式发生变化怎么解决 2、extjs日期格式化成java的yyyyMMddHHmmssSSS的形式,怎样写 3、extjs timefie

2023-12-08