extjs 4.2 教程 - 05 - 组件 - 2018
原创    xingfu2017    发表于:2018-04-02 15:05:13
  阅读 :91   收藏   编辑

上一节:extjs 4.2 教程 - 04 - Window - 2018

本节我们将介绍extjs组件,
上一节我们已经学习了一个容器面板窗口window的组件,

exjts4.2的组件可分为:

  • 容器组件:比较常见的容器有:表单form,窗口window,Tab标签tab

  • 表单组件: 表单form容器的子组件,包括:checkbox、comboBox、datefield、textfield等

  • 其他组件:button,progressBar等

每一个组件都有对应的class,xtype

  1. Class : exts为每个组件定了对应的类别。

  2. xtype : 类名比较长,每个组件有一个名为’xtype’的符号名,可理解为组件的简称

组件的创建方式

组件的创建主要分2种:

1) 通过Ext.create()方法直接创建组件的实例。

 Ext.create(name, [config]) :返回所创建的组件实例

如上节我们学习的window

var win = Ext.create("Ext.window.Window", {
    ...
});

2) 通过组件的xtype来配置组件

  Ext.onReady(function(){
                Ext.create('Ext.window.Window', {
                    renderTo: Ext.getBody(),
                     width:600,
                     height:300,
                    draggable : false,//是否可拖拽
                    closable: true,//是否能关闭window
                    plain : true,
                    resizable: false,//是否允许用户从window的四边和四角改变window的大小
                    modal : true,//是否遮罩
                    autoShow: true,//默认是否显示,这里不显示
                    maximizable: false,//是否可最大化
                    minimizable: false,//是否可最小化,默认情况下,点击最小化的时候是没有任何操作的。我们需要手动处理minimize事件
                    border: false,
                    closeAction:'hide',//点击右上角的关闭是,默认执行的“destroy”,改为“hide”,当执行destory时,是无法再显示的。
                    items: [
                        { xtype: 'textfield',name: 'username',  fieldLabel: '用户名',value: ''},
                        { xtype: 'textfield',name: 'password',  fieldLabel: '密码',value: ''}
                    ]
                });
            })

// 等同于

Ext.onReady(function(){
                Ext.create('Ext.window.Window', {
                    renderTo: Ext.getBody(),
                    width:600,
                    height:300,
                    draggable : false,//是否可拖拽
                    closable: true,//是否能关闭window
                    plain : true,
                    resizable: false,//是否允许用户从window的四边和四角改变window的大小
                    modal : true,//是否遮罩
                    autoShow: true,//默认是否显示,这里不显示
                    maximizable: false,//是否可最大化
                    minimizable: false,//是否可最小化,默认情况下,点击最小化的时候是没有任何操作的。我们需要手动处理minimize事件
                    border: false,
                    closeAction:'hide',//点击右上角的关闭是,默认执行的“destroy”,改为“hide”,当执行destory时,是无法再显示的。
                    items: [
                        Ext.create('Ext.form.field.Text',{
                                    name:'username',
                                    fieldLabel:'用户名'
                        }),
                        Ext.create('Ext.form.field.Text',{
                                    name:'password',
                                    fieldLabel:'密码'
                        })
                        ]
                });
            })
评论
条评论