概述
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[] + ) + '/1/' + d[]);
}
});
2、引入ext-extendmonth.js以及修改预显示控件 xtype: 'monthfield' 属性值
//头部菜单栏
var proctoolbarText = Ext.create('Ext.toolbar.Toolbar', {
renderTo: 'ReportData',
items: [{
xtype: 'monthfield',
id: 'CountData',
width: ,
labelWidth: ,
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 : ,
labelAlign : 'right',
editable : false,
allowBlank : false,
multiSelect : true,
store : {
fields : ['personId', 'personName'],
data : [
{'personId':'',personName:'张三'},
{'personId':'',personName:'李四'},
{'personId':'',personName:'王五'},
{'personId':'',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[];
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[];
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: ,
labelWidth: ,
//allowBlank: isAllow,
width: ,
minChars:
}
针对这种情况，我们可以通过修改如下代码处理：
{
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: ,
labelWidth: ,
width: ,
minChars:
}
也就是说，将ComboBoxdisplayFiled和valueFile设置成同一个值；这个仅仅是结果内容是单个值的情况，如果是实体对象，另当别论；PS:ComboBox指定非自动加载数据的Store之后，通过点击下拉列表的时候，该Store会自动Load后台数据的；