Extjs日常记录点滴

1、Grid中的日期格式化（字符串转换成日期显示、指定格式的日期显示）

                    text: '交易起始时间',
                    align: 'center',
                    dataIndex: 'startTime',
                    renderer : function (val) {
                        //val原格式是字符串形式例如20180101120000
                        if(val){
                            if(val instanceof Date){//时间类型
                                var date = new Date(val);
                                return Ext.util.Format.date(date, "Y-m-d H:i:s");
                            }else{//字符串类型
                                var date = Ext.Date.parse(val, "YmdHis");
                                return Ext.util.Format.date(date, "Y-m-d H:i:s");
                            }
                        }
                    },
                    width: 150

                    text: '更新时间',
                    dataIndex: 'updateTime',
                    align: 'center',
                    renderer: function (val) {
                    	//这里后台字段为Date类型经过json转换后变成1532489643000格式
                        if (val) {
                            return Ext.Date.format(new Date(val), 'Y-m-d H:i:s')
                        }
                    },
                    width: 150

2、日期控件（适用于起始时间与结束时间的范围限制选择）

1)、时间控件的制定

Ext.define('maizi.util.form.field.ExtendDateTimeField', {
    extend : 'Ext.ux.datetime.DateTimeField',
    alias : 'widget.extenddatetime',
    format : "Y-m-d H:i:s",
    altFormats : "Y-m-d H:i:s",
    endTimeField:'',
    startTimeField:'',
    reset : function(){
        var me = this;
        me.suspendEvents();
        me.callParent();
        me.applyEmptyText();
        me.resumeEvents();
    },
    listeners: {
        change: function(field,newVal,oldVal) {
            if(field.endTimeField){
                var endTime = field.up('form').down('datetimefield#'+field.endTimeField).getValue();
                if (endTime != null && newVal > endTime) {
                    field.setValue(oldVal);
                    Ext.Msg.alert('出错提示', '开始时间必须小于结束时间！');
                }
            }else if(field.startTimeField){
                var startTime = field.up('form').down('datetimefield#'+field.startTimeField).getValue();
                if (startTime != null && newVal < startTime) {
                    field.setValue(oldVal);
                    Ext.Msg.alert('出错提示', '结束时间必须大于开始时间！');
                }
            }
        }
    }
});

2)、时间控件的使用

首先在试图View中引入该组件requires: ['maizi.util.form.field.ExtendDateTimeField'],

items中的xtype配置为我们拓展的时间控件类型，如下：

                            {
                                fieldLabel: '激活开始时间',
                                name: 'startTime',
                                itemId: 'startTime',
                                endTimeField: 'endTime',
                                xtype: 'extenddatetime',
                                editable: false,
                                format: 'Y-m-d H:i:s',
                                value: Ext.Date.format(Ext.Date.add(new Date(), Ext.Date.DAY, -6), 'Y-m-d 00:00:00')
                            },{
                                fieldLabel: '激活结束时间',
                                name: 'endTime',
                                itemId: 'endTime',
                                startTimeField: 'startTime',
                                xtype: 'extenddatetime',
                                editable: false,
                                format: 'Y-m-d H:i:s',
                                value: Ext.Date.format(new Date(), 'Y-m-d 23:59:59')
                            }

 

3、Combox本地store的使用

                            {
                                name: 'validStatus',
                                xtype: 'combobox',
                                fieldLabel: '有效性',
                                store:Ext.create("Ext.data.Store", {
                                    fields: ["Code", "Text"],
                                    data: [
                                        { Code: "01", Text: "有效" },
                                        { Code: "02", Text: "失效" }
                                    ]
                                }),
                                editable: false,
                                displayField: "Text",
                                valueField: "Code",
                                emptyText: "全部",
                                queryMode: "local"
                            }

4、Combox的延伸拓展组件ExtendComboBox

1)、稍后补充..

5、错误处理

1)、not read property 'buffered' of undefined

Uncaught TypeError: Cannot read property 'buffered' of undefined

在view视图中引用store，出现这个错误。检查过store里的url，可以访问没有问题。

最后原因： controller层没有引用 store。

解决方案：

Ext.define('pcacmgr.controller.RiesMerchantInfoQueryController', {
    extend: 'Ext.app.Controller',
    views: ['riesMerchantInfoQueryView'],
    stores: ['pcacmgr.store.RiesMerchantInfoQueryFeedbackStore'],
    requires: ['pcacmgr.view.window.RiesMerchantInfoQueryFeedbackListWindow'],
    init: function () {
        this.control({
            'riesMerchantInfoQueryView': {
                afterrender: this.tabAfterRender
            },
            'riesMerchantInfoQueryView button[action=search]': {
                click: this.onSearchBtn
            },
            'riesMerchantInfoQueryView grid gridcolumn[action=feedbackList]': {
                click: this.feedbackListBtnClicked
            }
        });
    }
}

 

6、未完待续

1)、makeshift...