extjs3菜鸟教程的简单介绍

发布时间：2023-12-08

extjs3菜鸟教程的简单介绍

更新：2022-11-20 05:58

本文目录一览：

  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'
    }),
    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();
推荐文章