Extjs学习笔记之三 extjs form更多的表单项

具体：http://www.verydemo.com/demo_c101_i32273.html
1.日期选择框，DateField
日期选择框在日常项目中被广泛应用，一个方便的日期输入机制能够极大的提高用户体验。Extjs的DateField非常友好灵活强大。可以通过如下代码新建一个日期选择框：

代码如下:

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

})

效果如下：

注意，默认情况下，这个日历显示的是英文，如果需要显示中文，需要引入区域文件：

<script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script>对其他控件应该也是类似的。2.HTML编辑器,HTMLEditor

HTML编辑器可以使客户编辑html文档。启用HTML编辑器非常简单，而且几乎不需要额外的配置，默认的就很好用：

代码如下:

new Ext.form.HtmlEditor({

id:'HtmlContent',

autoHeight:false,

width:500,

fieldLabel:'HTML编辑'

})

遗憾的是这个编辑器不支持图文混排，不过对于轻量级的应用来说还是很好用的。如果需要图文混排还是使用专门的第三方的插件好了。

3.组合框, ComboBox

这是一个重量级的控件，因为它在实际应用中起着广泛而重要的作用。虽然它的使用频率没有TextField高，但是它的功能却比TestField丰富的多，所以把它放在比较靠后的位置来介绍。Extjs的ComboBox具有下拉提示，自动完成等功能，也同时支持本地和服务器端的数据源。下面先看一个本地数据源的示例。

本地数据源可以放在一个ArrayStore中，这是一个类似一个数组的结构。例如，可以定义下面的store:

代码如下:

var store = new Ext.data.ArrayStore({

fields: ['Name', 'Code'],

data: [['开发部', 1], ['行政部', 2], ['销售部', 3], ['质检部', 4], ['售后部', 5]]

});下面就可以添加一个combobox，var myform = new Ext.FormPanel({

applyTo: 'myform',

title: 'ComboxBox with local datasource',

height: 200…………………………………………………………………………