概述
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后台数据的;