首页 > 代码库 > ExtJS基础知识总结(二)
ExtJS基础知识总结(二)
概述
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 ]});
ExtJS基础知识总结(二)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。