Ext 初级UI设计

Ext.Button

说明：该组件代替了传统submit,reset,buuton HTML控件
构造参数：
text: 按钮上的名称
handler:指定一个函数句柄,在默认事件触发时调用,此时的默认事件为click
listeners:在对象初始化之前,就将一系列事件进行定义的手段,在进行组件化编程时,特别有用

属性：
text: 获得当前按钮上的名称
minWidth:按钮的最小宽度
renderTo:将当前对象所生成的HTML对象存放进指定的对象中

方法：
setText:设置按钮上的名称
事件：
click: 点击时触发

Ext.form.TextField

说明：该组件代替了传统的text组件

属性：
fieldLabel:文本框的标签名称

方法：
getValue():得到当前文本框的值

form.TextField 产生的话题

Ext.layout.FormLayout:
只有在些布局下才能正确显示文件框的标签名,布局的宿主对象必须是Ext.Container或者Ext.Container的子类
在应用FormLayout布局时只要在宿主对象的构造参数中指定layout:"form"即可
Ext.getCmp(string _id):
得到id为_id的组件对象

Ext.Panel

说明：从某种意义来讲,其彻底改变了网页界面是通过HTML Table进行而已的历史

属性：
title: 面板的标签名
width: 面板的宽度
heigth: 面板的高度
frame: 将四个角变成圆角,为true时
xtype: 在ExtJS的可视化组件部署中有一种xtype机制,通过指定xtype的值,来初始化包含组件,如xtype:"textfield",表示使用Ext.form.TextField来进行初始化

方法：
addButton(String/Object_config,Function _handler,Object_scope)：添加一个按钮对象到面板中
add(Ext.Component/Object_component):添加一个组件到面板中

事件：
render:当当前对象被正确构造后触发

综合实例

通过构造参数方式进行组构

defaults: 默认参数
items: 指定包含在面板中的组件的配置数组
buttons: 指定包含在厕所中的按钮的配置数组

如下：

      Ext.onReady(function () {
        var _panel = new Ext.Panel({
        title: "人员信息",
        frame: true,
        width: 300,
        height: 200,
        layout: "form",
        labelWidth: 45,
        defaults: { xtype: "textfield", width: 200 },
        items: [{ fieldLabel: "姓名" }, { fieldLabel: "地址"}],
        buttons: [{ text: "确 定" }, {text:"取 消"}]
        });

        _panel.append(Ext.getBody());
     });

Ext.Window

说明：该组件是实现窗体化开发的基础
构造参数：
title: 窗体名称
minimizable: 是否显示最小化按钮
maximizable:是否显示最大化按钮

方法：
show: 使得窗口显示
hide: 隐藏窗口

事件：
hide：窗口隐藏时触发
show: 窗口显现时触发

实例：

Ext.onReady(function () {
            var _window = new Ext.Window({
                title: "登 陆",
                frame: true,
                width: 260,
                height: 130,
                layout: "form",
                labelWidth: 45,
                plain: true,
                resizable: false,
                bodyStyle: "padding:3px",
                buttonAlign: "center",
                closeAction: "hide",
                defaults: { xtype: "textfield", width: 180 },
                items: [{ fieldLabel: "账 号" }, { fieldLabel: "密 码"}],
                buttons: [{ text: "确 定" }, { text: "取 消", handler: function () {
                    _window.hide();
                }
                }],
                listeners: {
                    "show": function () {
                        alert("窗体显示");
                    },
                    "hide": function () {
                        alert("窗体隐藏");
                    },
                    "close": function () {
                        alert("窗体关闭");
                    }
                }
            });

            _window.show();
        });

DateField 日期选择

format: 日期选择后的生成格式，如："Y-m-d" 等于 "2012-08-05"
value: 默认值
readOnly: 是否只读

ComboBox 下拉列表

mode: 数据来源模式, local 为本地,默认为 remote
triggerAction: 点击下拉框后显示所有值(alL),还是只显示选中值(query)
displayField: 绑定到当前BomboBox的底层数据项的名称
store: 数据源