- 浏览: 65635 次
- 性别:
- 来自: 成都
-
文章分类
最新评论
-
wdfyqsdy：
请问如何设置READONLY属性，设置READONLY就不能显 ...
Ext dateField扩展 可单独选择年月,年,月.可清空 -
向往前途：
楼主，你好啊，能否传给demo给我呢？谢谢！403826222 ...
java版qWikiOffice -
a734797702：
楼主你好！做得漂亮 能否传给demo给我呢？谢谢zhangjx ...
java版qWikiOffice -
jacky66666：
拖动后有白屏的现象，请问怎么解决？
Ext4.1 desktop 实现桌面图标可拖拽 -
qifan.yang：
没有源码,居然用exe4j打包
Swing+Spring-3.1.1+Mybatis-3.1.1+C3p0-0.9.1.2+Sqlite 实现Swing版网络爬虫
效果图1：只选择年
效果图2：只显示月
效果图3：显示年月
代码如下：
/**
* 超级时间选择控件：在原有时间控件功能上，新增了单独选择年/月，年，月的功能，清空时间功能
* Ext-3.0.0
* 用法：
* <br><input type="text" name="dateField" id="dateField" />
* new Ext.form.SuperDateField({
applyTo : 'dateField',
format:'Y'
});
<br>重要参数说明：
format
<br>1：当时间格式参数中不含'd'，则只显示年月选择面板。如：'Y-m','Y年m月'
<br>2：当时间格式参数中不含'd','m'，并以'Y'开头，则只显示年份选择面板。如：'Y','Y年'
<br>3：当时间格式参数中不含'd','Y'，并以'm'开头，则只显示月份选择面板。如：'m','m月'
<br>4：当时间格式参数中包含'd'，则和普通时间控件一样
* @author DuanYong
* @since 2011-07-08
* @version 2.0
* @class Ext.form.SuperDateField
* @extends Ext.form.DateField
*/
Ext.form.SuperDateField = Ext.extend(Ext.form.DateField, {
format : 'Y',
onTriggerClick : function() {
Ext.form.SuperDateField.superclass.onTriggerClick.call(this);
Ext.apply(this.menu.picker, {
input : this
});
// 当显示时间格式不含'd'时，直接调用showMonthPicker()显示年月选择面板
if(this.format.indexOf('d') == -1){
this.menu.picker.showMonthPicker();
}
}
});
// 注册xtype
Ext.reg('superDateField', Ext.form.SuperDateField);
/**
* 覆盖Ext.DatePicker部分方法，新增只显示年月，年，月选择面板功能
* 注意：修改方法时需注意不要影响正常时间控件功能
*/
Ext.override(Ext.DatePicker, {
clearText:'清空',
onRender : function(container, position) {
var m = [
'<table cellspacing="0">',
'<tr><td class="x-date-left"><a href="#" title="',
this.prevText,
'"> </a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="',
this.nextText, '"> </a></td></tr>',
'<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'], dn = this.dayNames, i;
for (i = 0; i < 7; i++) {
var d = this.startDay + i;
if (d > 6) {
d = d - 7;
}
m.push('<th><span>', dn[d].substr(0, 1), '</span></th>');
}
m[m.length] = '</tr></thead><tbody><tr>';
for (i = 0; i < 42; i++) {
if (i % 7 === 0 && i !== 0) {
m[m.length] = '</tr><tr>';
}
m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
}
m.push('</tr></tbody></table></td></tr>',
'<tr><td colspan="3" class="x-date-bottom" align="center"><table><tr>',
this.showToday ?'<td class="x-date-today"></td>' : '',
'<td class="x-date-clear"></td></tr></table></td></tr>',
'</table><div class="x-date-mp"></div>');
var el = document.createElement('div');
el.className = 'x-date-picker';
el.innerHTML = m.join('');
container.dom.insertBefore(el, position);
this.el = Ext.get(el);
this.eventEl = Ext.get(el.firstChild);
this.prevRepeater = new Ext.util.ClickRepeater(this.el
.child('td.x-date-left a'), {
handler : this.showPrevMonth,
scope : this,
preventDefault : true,
stopDefault : true
});
this.nextRepeater = new Ext.util.ClickRepeater(this.el
.child('td.x-date-right a'), {
handler : this.showNextMonth,
scope : this,
preventDefault : true,
stopDefault : true
});
this.monthPicker = this.el.down('div.x-date-mp');
this.monthPicker.enableDisplayMode('block');
this.keyNav = new Ext.KeyNav(this.eventEl, {
'left' : function(e) {
if (e.ctrlKey) {
this.showPrevMonth();
} else {
this.update(this.activeDate.add('d', -1));
}
},
'right' : function(e) {
if (e.ctrlKey) {
this.showNextMonth();
} else {
this.update(this.activeDate.add('d', 1));
}
},
'up' : function(e) {
if (e.ctrlKey) {
this.showNextYear();
} else {
this.update(this.activeDate.add('d', -7));
}
},
'down' : function(e) {
if (e.ctrlKey) {
this.showPrevYear();
} else {
this.update(this.activeDate.add('d', 7));
}
},
'pageUp' : function(e) {
this.showNextMonth();
},
'pageDown' : function(e) {
this.showPrevMonth();
},
'enter' : function(e) {
e.stopPropagation();
return true;
},
scope : this
});
this.el.unselectable();
this.cells = this.el.select('table.x-date-inner tbody td');
this.textNodes = this.el.query('table.x-date-inner tbody span');
this.mbtn = new Ext.Button({
text : ' ',
tooltip : this.monthYearText,
renderTo : this.el.child('td.x-date-middle', true)
});
this.mbtn.el.child('em').addClass('x-btn-arrow');
if (this.showToday) {
this.todayKeyListener = this.eventEl.addKeyListener(
Ext.EventObject.SPACE, this.selectToday, this);
var today = (new Date()).dateFormat(this.format);
this.todayBtn = new Ext.Button({
renderTo : this.el.child('td.x-date-today', true),
text : String.format(this.todayText, today),
tooltip : String.format(this.todayTip, today),
handler : this.selectToday,
scope : this
});
//增加清空按钮事件
this.clearDate=function(){
this.setValue(new Date().clearTime());
this.fireEvent('select', this, null);
};
}
//增加清空按钮事件
this.clearBtn = new Ext.Button({
renderTo: this.el.child('td.x-date-clear', true),
text: this.clearText,
handler: this.clearDate,
scope: this
});
this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this);
this.mon(this.eventEl, 'click', this.handleDateClick, this, {
delegate : 'a.x-date-date'
});
this.mon(this.mbtn, 'click', this.showMonthPicker, this);
this.onEnable(true);
//当显示时间格式只为'Y'时， 隐藏日期选择面板及按钮
if(this.format.indexOf('d') == -1){
this.el.select("table.x-date-inner").hide();
this.el.child("td.x-date-bottom").hide();
}
},
// private
createMonthPicker : function() {
if (!this.monthPicker.dom.firstChild) {
var buf = ['<table border="0" cellspacing="0">'];
//只保留选择年份面板
if(this.format.indexOf('d') == -1 && this.format.indexOf('Y') == 0 && this.format.indexOf('m') == -1){
for (var i = 0; i < 6; i++) {
buf.push(i === 0 ? '<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>' : '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>');
}
}else if(this.format.indexOf('d') == -1 && this.format.indexOf('m') == 0 && this.format.indexOf('Y') == -1){//只保留选择月份面板
for (var i = 0; i < 6; i++) {
buf.push(
'<tr><td class="x-date-mp-month"><a href="#">', Date.getShortMonthName(i), '</a></td>',
'<td class="x-date-mp-month x-date-mp-sep"><a href="#">', Date.getShortMonthName(i + 6), '</a></td></tr>'
);
}
}else{
for(var i = 0; i < 6; i++){
buf.push(
'<td class="x-date-mp-month"><a href="#">', Date.getShortMonthName(i), '</a></td>',
'<td class="x-date-mp-month x-date-mp-sep"><a href="#">', Date.getShortMonthName(i + 6), '</a></td>',
i === 0 ?
'<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>' :
'<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
);
}
}
buf.push('<tr class="x-date-mp-btns"><td colspan="4">',
'<button type="button" class="x-date-mp-ok">'+this.okText+'</button>',
'<button type="button" class="x-date-mp-cancel">'+this.cancelText+'</button>',
this.format.indexOf('d') == -1 ? ' <button type="button" class="x-data-mp-clear">'+this.clearText+'</button>':'',
'</td></tr>', '</table>');
this.monthPicker.update(buf.join(''));
this.mon(this.monthPicker, 'click', this.onMonthClick, this);
//当显示时间格式只为'Y'时， 取消双击事件
if(this.format.indexOf('d') != -1){
this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick,this);
}
this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
this.mpYears = this.monthPicker.select('td.x-date-mp-year');
this.mpMonths.each(function(m, a, i) {
i += 1;
if ((i % 2) === 0) {
m.dom.xmonth = 5 + Math.round(i * 0.5);
} else {
m.dom.xmonth = Math.round((i - 1) * 0.5);
}
});
}
},
// private
showMonthPicker : function(){
if(!this.disabled){
this.createMonthPicker();
var size = this.el.getSize();
this.monthPicker.setSize(size);
this.monthPicker.child('table').setSize(size);
//只更新年份面板
if(this.format.indexOf('d') == -1 && this.format.indexOf('Y') == 0 && this.format.indexOf('m') == -1){
this.mpSelYear = (this.activeDate || this.value).getFullYear();
this.updateMPYear(this.mpSelYear);
}else if(this.format.indexOf('d') == -1 && this.format.indexOf('m') == 0 && this.format.indexOf('Y') == -1){//只更新月份面板
this.mpSelMonth = (this.activeDate || this.value).getMonth();
this.updateMPMonth(this.mpSelMonth);
}else{
this.mpSelYear = (this.activeDate || this.value).getFullYear();
this.updateMPYear(this.mpSelYear);
this.mpSelMonth = (this.activeDate || this.value).getMonth();
this.updateMPMonth(this.mpSelMonth);
}
this.monthPicker.slideIn('t', {duration:0.2});
}
},
// private
onMonthClick : function(e, t) {
e.stopEvent();
var el = new Ext.Element(t), pn;
if (el.is('button.x-date-mp-cancel')) {
this.hideMonthPicker();
if (this.format.indexOf('d') == -1) {
this.fireEvent("select", this, this.value);
}
}else if (el.is('button.x-data-mp-clear')) {
this.hideMonthPicker();
//清空值
this.setValue(new Date().clearTime());
this.fireEvent('select', this, null);
} else if (el.is('button.x-date-mp-ok')) {
var d;
//只显示月份时，默认年是系统当前年份
if(this.format.indexOf('d') == -1 && this.format.indexOf('m') == 0 && this.format.indexOf('Y') == -1){
this.mpSelYear = (this.activeDate || this.value).getFullYear();
}else if(this.format.indexOf('d') == -1 && this.format.indexOf('Y') == 0 && this.format.indexOf('m') == -1){//只显示年份时，默认年是系统当前月份
this.mpSelMonth = (this.activeDate || this.value).getMonth();
}
d = new Date(this.mpSelYear, this.mpSelMonth,(this.activeDate || this.value).getDate());
if (d.getMonth() != this.mpSelMonth) {
// 'fix' the JS rolling date conversion if needed
d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth();
}
this.update(d);
this.hideMonthPicker();
//当显示时间格式只为'Y'时，设置值,并激发select事件
if(this.format.indexOf('d') == -1){
this.setValue(d);
this.fireEvent("select", this, this.value);
}
} else if ((pn = el.up('td.x-date-mp-month', 2))) {
this.mpMonths.removeClass('x-date-mp-sel');
pn.addClass('x-date-mp-sel');
this.mpSelMonth = pn.dom.xmonth;
} else if ((pn = el.up('td.x-date-mp-year', 2))) {
this.mpYears.removeClass('x-date-mp-sel');
pn.addClass('x-date-mp-sel');
this.mpSelYear = pn.dom.xyear;
} else if (el.is('a.x-date-mp-prev')) {
this.updateMPYear(this.mpyear - 10);
} else if (el.is('a.x-date-mp-next')) {
this.updateMPYear(this.mpyear + 10);
}
},
// private
onMonthDblClick : function(e, t) {
e.stopEvent();
var el = new Ext.Element(t), pn;
if ((pn = el.up('td.x-date-mp-month', 2))) {
this.update(new Date(this.mpSelYear, pn.dom.xmonth,
(this.activeDate || this.value).getDate()));
this.hideMonthPicker();
//当显示时间格式只为'Y'时，设置值,并激发select事件
if(this.format.indexOf('d') == -1){
this.setValue(new Date(this.mpSelYear, pn.dom.xmonth,(this.activeDate || this.value).getDate()));
this.fireEvent("select", this, this.value);
}
} else if ((pn = el.up('td.x-date-mp-year', 2))) {
this.update(new Date(pn.dom.xyear, this.mpSelMonth,
(this.activeDate || this.value).getDate()));
this.hideMonthPicker();
//当显示时间格式只为'Y'时，设置值,并激发select事件
if(this.format.indexOf('d') == -1){
this.setValue(new Date(this.mpSelYear, pn.dom.xmonth,(this.activeDate || this.value).getDate()));
this.fireEvent("select", this, this.value);
}
}
},
// private
update : function(date, forceRefresh) {
var vd = this.activeDate, vis = this.isVisible();
this.activeDate = date;
if (!forceRefresh && vd && this.el) {
var t = date.getTime();
if (vd.getMonth() == date.getMonth()
&& vd.getFullYear() == date.getFullYear()) {
this.cells.removeClass('x-date-selected');
this.cells.each(function(c) {
if (c.dom.firstChild.dateValue == t) {
c.addClass('x-date-selected');
if (vis) {
Ext.fly(c.dom.firstChild).focus(50);
}
return false;
}
});
return;
}
}
var days = date.getDaysInMonth();
var firstOfMonth = date.getFirstDateOfMonth();
var startingPos = firstOfMonth.getDay() - this.startDay;
if (startingPos <= this.startDay) {
startingPos += 7;
}
var pm = date.add('mo', -1);
var prevStart = pm.getDaysInMonth() - startingPos;
var cells = this.cells.elements;
var textEls = this.textNodes;
days += startingPos;
// convert everything to numbers so it's fast
var day = 86400000;
var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart))
.clearTime();
var today = new Date().clearTime().getTime();
var sel = date.clearTime().getTime();
var min = this.minDate
? this.minDate.clearTime()
: Number.NEGATIVE_INFINITY;
var max = this.maxDate
? this.maxDate.clearTime()
: Number.POSITIVE_INFINITY;
var ddMatch = this.disabledDatesRE;
var ddText = this.disabledDatesText;
var ddays = this.disabledDays ? this.disabledDays.join('') : false;
var ddaysText = this.disabledDaysText;
var format = this.format;
if (this.showToday) {
var td = new Date().clearTime();
var disable = (td < min
|| td > max
|| (ddMatch && format && ddMatch
.test(td.dateFormat(format))) || (ddays && ddays
.indexOf(td.getDay()) != -1));
if (!this.disabled) {
this.todayBtn.setDisabled(disable);
this.todayKeyListener[disable ? 'disable' : 'enable']();
}
}
var setCellClass = function(cal, cell) {
cell.title = '';
var t = d.getTime();
cell.firstChild.dateValue = t;
if (t == today) {
cell.className += ' x-date-today';
cell.title = cal.todayText;
}
if (t == sel) {
cell.className += ' x-date-selected';
if (vis) {
Ext.fly(cell.firstChild).focus(50);
}
}
// disabling
if (t < min) {
cell.className = ' x-date-disabled';
cell.title = cal.minText;
return;
}
if (t > max) {
cell.className = ' x-date-disabled';
cell.title = cal.maxText;
return;
}
if (ddays) {
if (ddays.indexOf(d.getDay()) != -1) {
cell.title = ddaysText;
cell.className = ' x-date-disabled';
}
}
if (ddMatch && format) {
var fvalue = d.dateFormat(format);
if (ddMatch.test(fvalue)) {
cell.title = ddText.replace('%0', fvalue);
cell.className = ' x-date-disabled';
}
}
};
var i = 0;
for (; i < startingPos; i++) {
textEls[i].innerHTML = (++prevStart);
d.setDate(d.getDate() + 1);
cells[i].className = 'x-date-prevday';
setCellClass(this, cells[i]);
}
for (; i < days; i++) {
var intDay = i - startingPos + 1;
textEls[i].innerHTML = (intDay);
d.setDate(d.getDate() + 1);
cells[i].className = 'x-date-active';
setCellClass(this, cells[i]);
}
var extraDays = 0;
for (; i < 42; i++) {
textEls[i].innerHTML = (++extraDays);
d.setDate(d.getDate() + 1);
cells[i].className = 'x-date-nextday';
setCellClass(this, cells[i]);
}
//当显示时间格式只为'Y'时，设置值,并激发select事件
if (this.format.indexOf('d') == -1 && this.getValue() != date) {
this.input.setValue(date);
this.input.fireEvent("select", this, this.value);
}
this.mbtn.setText(this.monthNames[date.getMonth()] + ' '
+ date.getFullYear());
if (!this.internalRender) {
var main = this.el.dom.firstChild;
var w = main.offsetWidth;
this.el.setWidth(w + this.el.getBorderWidth('lr'));
Ext.fly(main).setWidth(w);
this.internalRender = true;
// opera does not respect the auto grow header center column
// then, after it gets a width opera refuses to recalculate
// without a second pass
if (Ext.isOpera && !this.secondPass) {
main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth + main.rows[0].cells[2].offsetWidth))
+ 'px';
this.secondPass = true;
this.update.defer(10, this, [date]);
}
}
}
});
顶
踩
评论
这个js第388行 ，var cells = this.cells.elements; 显示空指针异常。
从js上看，应该是没有进入 45行的 onRender 方法。
帮忙解决一下，期待中..
报错了
网页错误详细信息
消息: 'undefined' 为空或不是对象
行: 375
字符: 3
代码: 0
URI: http://10.188.180.128:8088/tms/jsp/intsale/when/SuperDateField.js
发表评论
-
简易而不简单的定时任务框架
2011-11-03 22:31 1979今天在网上发现了这个定时任务框架，绝对的好东西啊，废话不多直接 ... -
贫血，充血模型的解释以及一些经验（非常经典）(转载)
2011-08-02 00:18 2233转自：http://www.cnblogs.com/gener ... -
jawr提升EXT加载速度
2011-07-19 20:59 2573大家平时在用EXT作开发时，或多或少会对EXT效率不满，其实最 ... -
ext 文件输入域控件
2011-07-08 22:17 1411直接上代码： /** * 文件输入域控件 ex ... -
eclipse 中velocity插件
2008-10-28 10:21 7585工具特性： 1）用户自定义模版 2）根据vel ... -
velocity学习-----问题来了
2008-10-28 09:46 1839最近开始研究velocity,不 ...
相关推荐
DateField是Ext JS中处理日期输入的一种控件，通常允许用户选择完整的日期（年、月、日）。然而，在某些情况下，我们可能只需要用户选择年和月，这就需要对DateField进行定制或扩展。 在给定的资源`monthPick.js`中...
在本文中，我们将深入探讨`Ext`框架中的`dateField`扩展，特别是在允许用户选择不同时间范围方面的能力，如年月日、年月、年或仅月。`Ext`是Sencha公司开发的一个强大的JavaScript应用框架，常用于构建富客户端Web...
总结来说，"Ext DateField控件 - 只选择年月插件"是一个方便易用的工具，能够帮助开发者在Ext JS应用程序中实现更精细的日期选择功能，专注于年月的选取，从而满足特定场景下的用户需求。通过合理地配置和集成，你...
DateField提供了一个日期选择器，允许用户通过日历图标选择日期，或者直接在文本框中输入日期。默认情况下，它会按照指定的格式显示和验证日期。 要创建一个带清空功能的DateField，我们需要实现以下几个步骤： 1....
通过这样的扩展，EXT DateField从原本只能选择日期，进化为能同时选择日期和时间，大大提升了EXT在处理时间数据方面的功能。开发者可以根据项目需求，灵活选择和定制这些用户扩展控件，以满足各种复杂场景下的交互...
一个对Ext年月日控件进行更改的Js 更改后的控件只能选择年月 对月统计或其他只选择年月的方面 非常好用 在写datefield控件的时候 加上 plugins: 'monthPickerPlugin', 就可以了 format设置为'Y-m'
1.此控件支持Ext3.2及以上版本 2.用法与Ext.form.DateField一样，xtype:'datetimefield' 3.不需要导入css或其他js 4.解决某些插件导入会显示对象未定义问题
标题 "Ext2的日期组件只选择年月" 暗示了我们正在讨论一个特定的JavaScript库，可能是ExtJS的旧版本（版本2），其中的一个日期选择组件。这个组件允许用户仅选择年份和月份，而不是完整的日期。ExtJS是一个流行的富...
最近刚好用到DateField组件,却无奈的发现只能选择年月日,不支持时分秒,在晚上找了好多,有的勉强可以用,但是很不完善.对从网上拿到一份代码进行了改善,具体从哪里拿的也忘了,请原作者勿怪. 改善之后的功能: 1.可以...
往往是需要修改源码的方法,如: 修改Ext.DatePicker使得Ext.form.DateField只选择年月 等,但是修改源码有个不好的地方,如果ext升级了,又需要改一次,很不方便.干脆,就重写了一个月份选择控件.使用接口和DateField类似,...
标题所提及的"ext 时间控件带有时分秒的控件"，实际上是一种自定义的EXT JS组件，它扩展了原生的日期选择器，增加了对时间精确到秒的选择支持。这种控件对于需要精确时间输入的场景特别有用，比如排程、日程安排或者...
4. `datefield`：`Ext.form.DateField`是日期选择组件，用户可以通过日历控件选择日期，支持自定义日期格式和禁用特定日期。 5. `field`：`Ext.form.Field`是所有表单字段的基础类，提供了一般性的属性和方法，如...
Ext中控件非常丰富,有各种格式的日期选择DateField,但是要选择月份,非常麻烦.往往是需要修改源码的方法 我添加了一个插件 代码及调用见 下载资源 本人已测 无问题
然而，原生的`Ext.DateField` 只允许用户选择年、月、日，不包含时间选择功能。为了解决这个问题，EXTJS 社区开发了扩展功能，使得用户可以同时选择小时、分钟和秒，这正是"ext 可以选择小时分钟秒"这个主题的核心。...
Extjs DateField控件 - 只选择年份（找了很久发现网上只有选择年月的控件，于是基于extjs年月控件设计了只选择年份的控件）
**Ext.form.ComboBox** 是一个下拉列表框组件，用于提供可选列表供用户选择。 - **allQuery**: 类型为 `String`，当用户在组合框中输入时，此属性定义所有匹配的项都将显示在列表中。 - **autoCreate**: 类型为 `...
6.1.7 扩展选择器 / 248 6.1.8 ext.domquery的使用方法 / 249 6.1.9 ext js选择器的总结 / 252 6.2 获取单一元素：ext.dom.element / 252 6.2.1 从错误开始 / 252 6.2.2 使用ext.get获取元素 / 253 6.2.3 ...
在EXTJS这个强大的JavaScript框架中，DateField是一个用于输入日期的控件，通常它只允许用户选择年、月、日。然而，在某些情况下，我们可能需要将日期字段扩展到包括小时、分钟和秒，以便更精确地管理时间数据。这篇...
在Ext JS这个强大的JavaScript框架中，开发者经常使用各种组件来构建富客户端应用，其中包括TextField（文本字段）和DatePicker（日期选择器）。有时，我们可能需要根据应用需求在运行时禁用这些组件的编辑功能，...