ExtJS基础知识总结(二)

Ext.define(‘Ext.form.field.Month‘, {
    extend: ‘Ext.form.field.Date‘,
    alias: ‘widget.monthfield‘,
    requires: [‘Ext.picker.Month‘],
    alternateClassName: [‘Ext.form.MonthField‘, ‘Ext.form.Month‘],
    selectMonth: null,
    createPicker: function () {
        var me = this,
            format = Ext.String.format,
            pickerConfig;
        pickerConfig = {
            pickerField: me,
            ownerCmp: me,
            renderTo: document.body,
            floating: true,
            hidden: true,
            focusOnShow: true,
            minDate: me.minValue,
            maxDate: me.maxValue,
            disabledDatesRE: me.disabledDatesRE,
            disabledDatesText: me.disabledDatesText,
            disabledDays: me.disabledDays,
            disabledDaysText: me.disabledDaysText,
            format: me.format,
            showToday: me.showToday,
            startDay: me.startDay,
            minText: format(me.minText, me.formatDate(me.minValue)),
            maxText: format(me.maxText, me.formatDate(me.maxValue)),
            listeners: {
                select: { scope: me, fn: me.onSelect },
                monthdblclick: { scope: me, fn: me.onOKClick },
                yeardblclick: { scope: me, fn: me.onOKClick },
                OkClick: { scope: me, fn: me.onOKClick },
                CancelClick: { scope: me, fn: me.onCancelClick }
            },
            keyNavConfig: {
                esc: function () {
                    me.collapse();
                }
            }
        };
        if (Ext.isChrome) {
            me.originalCollapse = me.collapse;
            pickerConfig.listeners.boxready = {
                fn: function () {
                    this.picker.el.on({
                        mousedown: function () {
                            this.collapse = Ext.emptyFn;
                        },
                        mouseup: function () {
                            this.collapse = this.originalCollapse;
                        },
                        scope: this
                    });
                },
                scope: me,
                single: true
            }
        }
        return Ext.create(‘Ext.picker.Month‘, pickerConfig);
    },
    onCancelClick: function () {
        var me = this;
        me.selectMonth = null;
        me.collapse();
    },
    onOKClick: function () {
        var me = this;
        if (me.selectMonth) {
            me.setValue(me.selectMonth);
            me.fireEvent(‘select‘, me, me.selectMonth);
            
        }
        me.collapse();
    },
    onSelect: function (m, d) {
        var me = this;
        me.selectMonth = new Date((d[0] + 1) + ‘/1/‘ + d[1]);
    }
});

    //头部菜单栏
    var proctoolbarText = Ext.create(‘Ext.toolbar.Toolbar‘, {
        renderTo: ‘ReportData‘,
        items: [{
            xtype: ‘monthfield‘,
            id: ‘CountData‘,
            width: 180,
            labelWidth: 30,
            format: ‘Y-m‘,
            fieldLabel: ‘日期‘,
            emptyText: ‘请输入开始时间‘,
            editable: false,        //不可编辑
            value: Ext.get("countDate").getValue()
        }]});

var Checktool=Ext.create(‘Ext.form.field.ComboBox‘,{    
    name : ‘cmb‘,    
    fieldLabel : ‘人员‘,    
    margin:‘2 0 2 0‘,    
    labelWidth : 135,    
    labelAlign : ‘right‘,    
    editable : false,    
    allowBlank : false,    
    multiSelect : true,    
    store : {    
        fields : [‘personId‘, ‘personName‘],    
        data : [    
            {‘personId‘:‘0‘,personName:‘张三‘},    
            {‘personId‘:‘1‘,personName:‘李四‘},    
            {‘personId‘:‘2‘,personName:‘王五‘},    
            {‘personId‘:‘3‘,personName:‘小名‘}    
        ]    
    },    
    listConfig : {    
        itemTpl : Ext.create(‘Ext.XTemplate‘,‘<input type=checkbox>{[values.personName]}‘),    
        onItemSelect : function(record) {    
            var node = this.getNode(record);    
            if (node) {    
                Ext.fly(node).addCls(this.selectedItemCls);    
                var checkboxs = node.getElementsByTagName("input");    
                if (checkboxs != null)    
                    var checkbox = checkboxs[0];    
                checkbox.checked = true;    
            }    
        },    
        listeners : {    
            itemclick : function(view, record, item, index, e, eOpts) {    
                var isSelected = view.isSelected(item);    
                var checkboxs = item.getElementsByTagName("input");    
                if (checkboxs != null) {    
                    var checkbox = checkboxs[0];    
                    if (!isSelected) {    
                        checkbox.checked = true;    
                    } else {    
                        checkbox.checked = false;    
                    }    
                }    
            }    
        }    
    },    
    queryMode : ‘local‘,    
    displayField : ‘personName‘,    
    valueField : ‘personId‘,          
});

//头部菜单栏
    var proctoolbarText = Ext.create(‘Ext.toolbar.Toolbar‘, {
        renderTo: ‘ReportData‘,
        items: [
        Checktool
        ]});