×

extjs菜鸟教程 js

extjs菜鸟教程(如何正确使用Extjs)

admin admin 发表于2022-09-03 02:35:15 浏览181 评论0

抢沙发发表评论

本文目录

如何正确使用Extjs


extjs说白了,就是一套做界面的东西,但是呢,他的界面都是用javascript来写的,写出来,经过渲染,就变成了你看到的界面。
至于怎么用,你只要把ext要用到的js文件和css文件引用了,然后写出前端显示的js代码,就能使用了。
如果要学习,推荐你看蔡世友的extjs视频教程,讲的很好的,就是有点老。
-js

extjs到底怎么用啊


extjs是集UI和ajax框架与一身的,界面又好看,又有很强的ajax交互功能,适合不会做漂亮页面的程序员用的,缺点就是太大了,要导入近800KB左右的js和css文件,这对于web应用来说是一个比较大的开销

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样式-extjs菜鸟教程

.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、使用-js

    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菜鸟教程

extjs 在项目中怎么使用


extjs说白了,就是一套做界面的东西,但是呢,他的界面都是用javascript来写的,写出来,经过渲染,就变成了你看到的界面。
至于怎么用,你只要把ext要用到的js文件和css文件引用了,然后写出前端显示的js代码,就能使用了。
如果要学习,推荐你看蔡世友的extjs视频教程,讲的很好的,就是有点老。
-js

extjs中 想取一个 组件的 对象 用Ext.getCmp()方法 取不到


你这种写法本来就不对的。既然用了extjs,为啥还要很多jsp页面?用了extjs,那就抛弃老的jsp编写规则。
所有的功能都写在一个jsp页面里面,然后调用组件就不存在你的问题。
学习extjs,你可以去搜搜 蔡世友extjs教程,我以前就是看这个入门的。现在都用extjs做前端界面。
-extjs菜鸟教程

Dreamweaver cs6+ExtJs框架要怎么用菜鸟一个,求各位指教详细点


dw是开发工具, 可以考虑下用eclipse
建议先把官方的例子先跑起来,再逐步去学习
或者找到群,Extjs开发与技术交流
参考的网站:http://www.extjs-tutorial.com/

EXTJS 表格默认选中第一行的问题


用keydown事件监听,监听到事件后取表格选中当前行的行号,键盘下键,行号加1,如果是上则减1,注意首行,末行.再根据行号选中表格中的行就行了