EXTJS-6常见的属性参数

requires:如果你需要引用其他类的时候就会用到这个属性，相当于java开发中的import.

 

extend:在自定义类时，用来制定年定义类的扩展类，与java的继承概念是一样的。

 

mixins：将一个类混入要定义的类。

 

items:用来定义当前组件的子组件。

 

xtype:用来声明当前配置对象使用的是那个类。

 

config:在config中定义的属性，框架会自动为属性创建修改和询问方法。

 

id:可以为组件定义个唯一的标识，以方便查找组件。

 

itemId:作用与id类是，不过不会将他作为组件最终的HTML代码标识，而且该标识的活动范围限制在容器内。这样做的好处就是，避免标识冲突。

 

scope:用来定义作用域。

 

defaults:用来简化组件的定义。当父组件使用了defaults配置项，在创建子组件的时候，会将该配置项中定义的配置应用到子组件中。

 

defaultType:与default的作用是类似的，不过它是用来设置子组件的默认类型的，如工具栏中可以有很多按钮，若将工具栏的defaultType指定为按钮,则在定义按钮的时候就不需要写xtype配置项了。

layout:用来定义容器的布局

 

reference:为组件指定一个名称，以便在视图控制内使用lookupReference方法来获取组件。

 

bind:为组件设置绑定。它的值可以是配置对象，也可以是字符串。当值为配置对象时，配置对象的属性为组件的属性，值为要绑定的数据对象。当值为字符串时，会使用组件defaultBindProperty属性指定的属性作为绑定的属性。

Ext.onReady(function(){
        // 初始化标签中的Ext:Qtip属性。
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    // 提交按钮处理方法
    var btnsubmitclick = function() {
        if (form.getForm().isValid()) {
            // 通常发送到服务器端获取返回值再进行处理，我们在以后的教程中再讲解表单与服务器的交互问题。
            Ext.Msg.alert("提示", "登陆成功!");
        }
    }
    // 重置按钮"点击时"处理方法
    var btnresetclick = function() {
        form.getForm().reset();
    }
    // 提交按钮
    var btnsubmit = new Ext.Button({
        text : '提 交',
        handler : btnsubmitclick
    });
    // 重置按钮
    var btnreset = new Ext.Button({
        text : '重 置',
        handler : btnresetclick
    });
    // 用户名input
    //创建一个新的TextField文本框对象
    var txtusername = new Ext.form.TextField({
        width : 140,
        //不允许文本框为空
        allowBlank : false,
        //文本框最大长度为20，当超过20个字符任然可以输入但是文本框会报错
        maxLength : 20,
        //表单名称，与服务器交互的时候，服务端是按name接收post的参数值。 
        name : 'username',
        //文本框前面显示的文字标题，如用户名，密码等
        fieldLabel : '用户名',
        //当非空验证没有通过时的提示信息
        blankText : '请输入用户名',
        //用户不超过20个字符，当最大长度小件没有通过时的提示信息
        maxLengthText : '用户名不能超过20个字符',
        //当文本为空的时候默认显示信息
        emptyText:"字母+手机号",
        //输入框收缩true为收缩，false则反
        grow:false,
        //收缩的最小宽度
        growMin:"30",
        //伸展的最大宽度 
        growMax:"40"
    });
    // 密码input
    var txtpassword = new Ext.form.TextField({
        width : 140,
        allowBlank : false,
        maxLength : 20,
        //inputType字段类型，默认为Text
        inputType : 'password',
        name : 'password',
        fieldLabel : '密　码',
        blankText : '请输入密码',
        maxLengthText : '密码不能超过20个字符'
    });
    // 验证码input
    var txtcheckcode = new Ext.form.TextField({
        fieldLabel : '验证码',
        id : 'checkcode',
        //不允许为空
        allowBlank:false,
        width : 76,
        blankText : '请输入验证码！',
        maxLength : 4,
        maxLengthText : '验证码不能超过4个字符!'
    });
    // 表单
    var form = new Ext.form.FormPanel({
        url : '******',
        labelAlign : 'right',
        labelWidth : 45,
        frame : true,
        cls : 'loginform',
        buttonAlign : 'center',
        bodyStyle : 'padding:6px 0px 0px 15px',
        items : [ txtusername, txtpassword, txtcheckcode ],
        buttons : [ btnsubmit, btnreset ]
    });
    // 窗体
    var win = new Ext.Window({
        title : '用户登陆',
        iconCls : 'loginicon',
        plain : true,
        width : 276,
        height : 174,
        resizable : false,
        shadow : true,
        modal : true,
        closable : false,
        animCollapse : true,
        items : form
    });
    win.show();
    // 创建验证码
    var checkcode = Ext.getDom('checkcode');
    var checkimage = Ext.get(checkcode.parentNode);
    checkimage.createChild({
        tag : 'img',
        src : 'xxxxxx',
        align : 'absbottom',
        style : 'padding-left:23px;cursor:pointer;'
    });

 

表单：FormPanel 说明：
(1)var form = new Ext.form.FormPanel({}):创建一个新的form表单对象。
(2)title: ‘表单标题’：表单的标题，如果不加的话，不会出现上面的浅色表单标题栏。
(3)style: ‘margin:10px’:表单的样式，加了个外10px的外边距。
(4)html: ‘<div style="padding:10px">这里表单内容</div>‘：表单内显示html的内容。

form 组件常用的：属性、方法及事件

一、属性

width:整型，表单宽度。

height:整型，表单高度。

url:字符串，表单提交地址。

二、方法

reset:表单重置。

isValid:表单是否验证全部通过。

submit:表单提交。

文本框：TextField 说明：
(1)Ext.QuickTips.init()：QuickTips的作用是初始化标签中的Ext:Qtip属性，并为它赋予显示提示的动作。
(2)Ext.form.Field.prototype.msgTarget = ‘side’：TextField的提示方式为：在右边缘，如上图所示，参数枚举值为”qtip”,”title”,”under”,”side”,id(元素id)，side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示。
(3)var txtusername = new Ext.form.TextField():创建一个新的TextField文本框对象。
(4)allowBlank: false：不允许文本框为空。
(5)maxLength: 20：文本框的最大长度为20个字符，当超过20个字符时仍然可以继续输入，但是Ext会提示警告信息。
(6)name: ‘password’：表单名称，这个比较重要，因为我们在与服务器交互的时候，服务端是按name接收post的参数值。
(7)fieldLabel: ‘用户名’：文本框前面显示的文字标题，如“用户名”，“密码”等。
(8)blankText: ‘请输入用户名’：当非空校验没有通过时的提示信息。
(9) maxLengthText: ‘用户不能超过20个字符’：当最大长度校验没有通过时的提示信息。

textfield组件常用的：属性、方法及事件

一、属性

allowBlank：是否允许为空，默认为true
blankText：空验证失败后显示的提示信息
emptyText：在一个空字段中默认显示的信息
grow：字段是否自动伸展和收缩，默认为false
growMin：收缩的最小宽度
growMax：伸展的最大宽度
inputType：字段类型：默认为text
maskRe：用于过滤不匹配字符输入的正则表达式
maxLength：字段允许输入的最大长度
maxLengthText：最大长度验证失败后显示的提示信息
minLength：字段允许输入的最小长度
minLengthText：最小长度验证失败后显示的提示信息

按钮：Button 说明：
(1)var btnsubmit = new Ext.Button():创建一个新的Button按钮对象。
(2)handler: btnsubmitclick：当用户点击的时候[即js中的onclick事件]执行方法btnsubmitclick。
(3)listeners: {‘mouseover’: btnresetmouseover,’click’: btnresetclick}：当用户点击的时候[即js中的onclick事件]执行方法btnresetclick，鼠标悬停时执行方法btnresetmouseover。
(4)handler与listeners的区别：
handler:执行的是首发事件，click是button这个组件的首发事件。这就是handler的运行方式：被某个组件的首要event所触发。 handler是一个特殊的listener。
listener：是一个事件名 + 处理函数的组合，事件监听，如上例代码所示，我们监听了两个事件”click”，与”mouseover”事件，并且会顺序执行。

button组件常用的：属性、方法及事件

一、属性

text:字符串，显示在按钮上的文字。
minWidth: 整型，最小宽度。

二、事件

handler:首发方法处理事件。
listeners:事件监听。