ExtJS基础知识总结

Posted 2020-08-21 风浪子

概述

　　1、ExtJS 5不支持日期选择框中只选择年月，为了满足ExtJs5可以实现选择年月的功能，查询网上资料，整理出来了相应的处理方式，最终实现的效果如下图：

     

 

　　2、ExtJS 控件丰富，如果需要实现下拉列表控件ComboBox中含有Check样式的皮肤，只需要在ComboBox控件中监听相应的下拉事件和选择事件即可。实现的效果如下：

　　

 

日历控显示年月的实现方式

1、编写ext-extendmonth.js，代码内容如下

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]);
    }
});

2、引入ext-extendmonth.js以及修改预显示控件  xtype: \'monthfield\'   属性值

    //头部菜单栏
    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()
        }]});

下拉列表控件ComboBox中含有Check实现

1、自定义JS控件Checktool

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\',          
});

 2、ExtJS引用控件即可

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

 

下拉列表控件ComboBox设置默认值

comboBox可以通过setValue设置值，但是准对Store后台返回Json的时候，通过Ext.getCmp(\'CategoryCode\').SetValue(\'000983\')设置相应的值时候，展示到页面的内容是空的，也就是说这样的设置默认值是无效的？比如下面这段代码：

{
xtype: "combobox",
store: Ext.create(\'Ext.data.Store\', {
    fields: ["CategoryCode", "Id"]
    autoLoad: false,
    proxy: {
    type: \'ajax\',
    url: \'/ProductManagement/GetTaxProfitList\',
    reader: {
        type: \'json\',
        rootProperty: \'Data\',
        totalProperty: \'TotalCount\'
        }
    }
}),
displayField: "CategoryCode",// ,   //显示出来的是name 
valueField: "Id",       //值是id
fieldLabel: "税收分类编码",     //label
editable: true,        //不可编辑
id: "CategoryCode",           //id
hiddenvalue: 20,
labelWidth: 60,
//allowBlank: isAllow,
width: 280,
minChars: 0
}

针对这种情况，我们可以通过修改如下代码处理：

{
xtype: "combobox",
store: Ext.create(\'Ext.data.Store\', {
    fields: ["CategoryCode", "Id"]
    autoLoad: false,
    proxy: {
    type: \'ajax\',
    url: \'/ProductManagement/GetTaxProfitList\',
    reader: {
        type: \'json\',
        rootProperty: \'Data\',
        totalProperty: \'TotalCount\'
        }
    }
}),
displayField: "CategoryCode",
valueField: "CategoryCode",       
fieldLabel: "税收分类编码",     //label
editable: true,        //不可编辑
id: "CategoryCode",           //id
hiddenvalue: 20,
labelWidth: 60,
width: 280,
minChars: 0
}

也就是说，将ComboBoxdisplayFiled和valueFile设置成同一个值；这个仅仅是结果内容是单个值的情况，如果是实体对象，另当别论；PS:ComboBox指定非自动加载数据的Store之后，通过点击下拉列表的时候，该Store会自动Load后台数据的；