extjs3菜鳥教程的簡單介紹

本文目錄一覽：

• 1、本人現在學習ExtJS，誰有ExtJS的入門教程視頻，（清晰版的）適合初次接觸ExtJS的學員使用。
• 2、extjs 中 日期選擇起怎麼用?
• 3、轉：新手如何學習ExtJS 4
• 4、Extjs怎麼實現下拉框多選

本人現在學習ExtJS，誰有ExtJS的入門教程視頻，（清晰版的）適合初次接觸ExtJS的學員使用。

oc已全部翻譯完成視頻總4個視頻免費下載

鏈接:

提取碼:64s9

oc已全部翻譯完成視頻 總4個視頻|OC教程04：速建+講解.mp4|OC教程03：如何給機器人添加紋理與着色.mp4|OC教程02：場景管理.mp4|OC教程01：塗鴉的投射原理與應用.mp4

extjs 中 日期選擇起怎麼用?

Extjs中日期NumberField如果沒有默認值的話，默認值就是當天。

你的問題是：

1在頁面顯示時要將第一個NumberField的minValue改成當天new Date()

2 第一個NumberField值改變後修改第二個的minValue為第一個的value的下一天。

3 無限的話，數據庫中可以存NULL或任意一個你特定的值都可以

轉：新手如何學習ExtJS 4

最近運營ExtJS交流群的時候，感觸頗深，我感覺作為一個老手，我有必要介紹一下如何學習這種基礎性問題。新手如何學習ExtJS4？如何入門ExtJS4？如何快速學習ExtJS4？1.仔細閱讀新手教程新手教程是指ExtJS官方文檔中Guides那一系列文章，因為是英文的，新手閱讀起來可能有障礙，為此我特意翻譯了這一系列教程，根據使用頻度我已經差不多把最常用到的教程翻譯完了，後續還將繼續翻譯。

通讀這一系列教程後，你會對ExtJS的基本使用方法有個框架性的了解，你會大體上知道如何實現常用功能。現在我把所有已翻譯的教程列舉在此，記住，認真的讀一定對你有幫助。ExtJS 4 入門ExtJS 4 類系統(Class System)介紹ExtJS MVC架構講解ExtJS 4 布局和容器ExtJS 4 組件詳解ExtJS 4 數據(包)詳解ExtJS 4 Grids 詳解ExtJS 4 表單ExtJS 4 樹2.把官方文檔中的所有Demo都瀏覽一遍做這個事情是為了了解官方Demo中實現了哪些功能，當自己要做一個功能時，有例子照着做是最快的，瀏覽一遍就會對現有的Demo有個大概印象，當你沒有頭緒的時候你的大腦會在後台查找之前的印象的，仔細瀏覽一遍，沒有錯。3.熟讀API Docs(API文檔)最近遇到很多人問問題，把一段自己想當然寫出來的代碼貼上來問為什麼不對，事實上你仔細查一下API文檔就知道，你這種用法ExtJS根本就不支持，當然不對。

使用搜索的好處是：通常可以較快速的解決一些無頭緒的問題

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();