Extjs高级表单项：日期选择、HTML编辑器与ComboBox

本文是关于Extjs学习笔记系列的第三部分，主要探讨了Extjs表单中除了基础的HTML form元素外，更高级、功能丰富的表单项。首先，日期选择框（DateField）在用户体验设计中扮演重要角色，它提供了易于使用的界面和可定制的选项，如设置日期范围、禁选特定日期等。创建一个DateField的例子展示了如何通过配置项如格式、宽度和语言支持来定制组件： ```javascript var diliveryDate = new Ext.form.DateField({ id: 'diliveryDate', format: 'Y年m月d日', maxValue: new Date(), minValue: '1900-01-01', disabledDays: [0, 6], disabledDaysText: '禁止选择该日期', fieldLabel: '选择日期', width: 200, showToday: false }); ``` 为了实现中文显示，需引入区域文件`ext-3.1.0/src/locale/ext-lang-zh_CN.js`。 其次，Extjs中的HTMLEditor是一个HTML编辑器，用户可以直接在界面上编辑HTML内容，虽然功能上不支持图文混排，但适用于轻量级应用场景。默认配置即可满足基本需求，例如： ```javascript var HtmlContent = new Ext.form.HtmlEditor({ id: 'HtmlContent', autoHeight: false, width: 500, fieldLabel: 'HTML编辑' }); ``` 最后，ComboBox（组合框）是一个多功能控件，它结合了下拉列表和文本输入，支持自动完成和本地或服务器端数据源。以下是使用本地数据源的示例： ```javascript var comboBox = new Ext.form.ComboBox({ id: 'comboBox', store: Ext.create('Ext.data.Store', { fields: ['name', 'value'], data: [ {name: '选项1', value: 'option1'}, {name: '选项2', value: 'option2'} ] }), displayField: 'name', valueField: 'value', fieldLabel: '请选择' }); ``` 组合框可以根据实际需求配置不同的数据源类型，使得数据的检索更加灵活。 本文深入介绍了Extjs中几种高级表单项的使用方法和特性，包括日期选择框、HTML编辑器和组合框，这些控件不仅增强了表单的交互性和功能性，还能提升用户的操作体验。