关于自定义extjs查询控件的信息

发布时间：2023-12-08

关于自定义extjs查询控件的信息

更新：<time datetime="2022-11-16 21:23">2022-11-16 21:23</time>

本文目录一览：

  1. extjs怎么自定义函数
  2. [extjs 控件事件大全](#extjs 控件事件大全)
  3. [Extjs 4如何自定义Panel](#Extjs 4如何自定义Panel)
  4. [Extjs 如何自定义控件](#Extjs 如何自定义控件)

extjs怎么自定义函数

extjs的自定义事件主要分三步：

  1. 在类中定义事件名称：
Person = function(config) {
    Person.superclass.constructor.call(this, config);
    this.name = config.name || '';
    this.sex = config.sex || '';
    this.addEvents({
        "nameChange": true,
        "sexChange": true
    });
};
  1. 实例化对象，并在该对象中定义事件的监听函数：
var person = new Person({
    name: 'binoruv',
    sex: 'man'
});
person.on("nameChange", function() { alert("Name has been changed to " + this.name); });
person.on("sexChange", function() { alert("Sex has been changed to " + this.sex); });
  1. 触发事件：
Ext.extend(Person, Ext.util.Observable, {
    setName: function(_name) {
        if (this.name != _name) {
            this.name = _name;
            this.fireEvent("nameChange", this);
        }
    },
    setSex: function(_sex) {
        if (this.sex != _sex) {
            this.sex = _sex;
            this.fireEvent("sexChange", this);
        }
    }
});
person.setName("binoruv");
person.setSex("woman");

整个代码如下：

<script type="text/javascript">
Person = function(config) {
    /*
    此处addEvents是调用Person父类Ext.util.Observable的方法
    api中对Observable的描述：一个抽象基类（Abstract base class），为事件
    机制的管理提供一个公共接口。子类应有一个"events"属性来
    定义所有的事件。
    */
    Person.superclass.constructor.call(this, config);
    this.name = config.name || '';
    this.sex = config.sex || '';
    this.addEvents({
        "nameChange": true,
        "sexChange": true
    });
};
Ext.extend(Person, Ext.util.Observable, {
    setName : function(_name) {
        if (this.name != _name) {
            this.name = _name;
            this.fireEvent("nameChange", this);
        }
    },
    setSex : function(_sex) {
        if (this.sex != _sex) {
            this.sex = _sex;
            this.fireEvent("sexChange", this);
        }
    }
});
Ext.onReady(function() {
    var person = new Person({
        name: 'binoruv',
        sex: 'Man'
    });
    person.on("nameChange", function() { /*debugger;*/Ext.Msg.alert("Message","Name has been changed to " + this.name); });
    person.on("sexChange", function() { /*debugger;*/Ext.Msg.alert("Message", "Sex has been changed to " + this.sex); });
    person.setName("binoruv");
    person.setSex("Woman");
});
</script>

extjs 控件事件大全

Ext.form.TimeField

配置项：

  • maxValue：列表中允许的最大时间
  • maxText：当时间大于最大值时的错误提示信息
  • minValue：列表中允许的最小时间
  • minText：当时间小于最小值时的错误提示信息
  • increment：两个相邻选项间的时间间隔，默认为15分钟
  • format：显示格式，默认为“g:i A”。一般使用“H:i:s”
    • H：带前缀0的24小时
    • i：带前缀0的分钟
    • s：带前缀0的秒
  • invalidText：当时间值非法时显示的提示信息
  • altFormats：多个时间输入格式组成的字符串，不同的格式之间使用“|”进行分割

Ext.form.FieldSet

  • animCollapse：动画折叠，默认为false
  • checkboxToggle：设置是否显示字段集的checkbox选择框，默认为false
  • checkboxName：指定字段集中用于展开或隐藏字段集面板的checkbox的名字，该属性只有在checkboxToggle为true时生效
  • labelWidth：字段标签的宽度，可以级联到子容器
  • layout：布局，默认为form

Ext.form.DateField

  • maxValue：允许选择的最大日期
  • maxText：当日期大于最大值时的错误提示信息
  • minValue：允许选择的最小时间
  • minText：当日期小于最小值时的错误提示信息
  • format：日期显示格式，默认为“m/d/y”，一般使用“Y-m-d”
    • Y：四位年份
    • m：带前缀0的月份
    • d：带前缀0的日期
    • y：两位年份
    • n：不带前缀0的月份
    • j：不带前缀0的日期
    • w：星期的数字，0表示星期日，1代表星期一
  • showToday：是否显示今天按钮，默认为true
  • altFormats：多个日期输入格式组成的字符串，不同的格式之间使用“|”进行分割，默认值为'm/d/Y|n/j/Y|n/j/y|m/j /y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'
  • disabledDates：禁止选择的日期组成的数组
  • disabledDatesText：选择禁选日期时显示的提示信息
  • disabledDays：禁止选择的星期组成的数组，0代表星期日，1代表星期一
  • disabledDaysText：选择禁选星期时显示的提示信息
  • invalidText：当日期值非法时显示的提示信息 方法：
  • getValue()：取得日期值

Ext.form.ComboBox

  • displayField：被显示在下拉框中的字段名
  • editable：是否可编辑，默认为true
  • forceSelection：输入值是否严格为待选列表中存在的值。如果输入不存在的值，会自动选择第一个最接近的值。
  • hiddenName：隐藏字段的名字，如果提供该参数则一个隐藏字段将被创建，用来存储所选值，当表单提交时在服务器端可以通过该名字取得列表中的所选值
  • listWidth：下拉列表的宽度
  • minListWidth：下拉列表的最小宽度，默认为70像素
  • loadingText：当下拉框加载数据时显示的提示信息，只有当mode='remote'时才会生效
  • maxHeight：下拉列表框的最大高度，默认为300像素
  • minChars：下拉列表框自动选择前用户需要输入的最小字符数量。mode='remote'默认为4，mode='local'默认为0
  • mode：下拉列表框的数据读取模式。remote读取远程数据，local读取本地数据
  • pageSize：下拉列表框的分页大小。该项设置只在mode='remote'时生效
  • queryParam：查询的名字，默认为'query'，将被传递到查询字符串中
  • allQuery：一个发往服务器用来查询全部信息的查询字符串，默认为空字符串''
  • selectOnFocus：当获得焦点时立刻选择一个已存在的列表项。默认为false，此项只有在editable=true时才会生效
  • store：列表框绑定的数据源
  • transform：将页面中已存在的元素转换为组合框
  • lazyInit：延时初始化下拉列表，默认为true
  • lazyRender：延时渲染，默认为false
  • triggerAction：设置单击触发按钮时执行的默认操作，有效值包括all和query，默认为query，如果设置为all则会执行allQuery中设置的查询
  • typeAhead：设置在输入过程中是否自动选择匹配的剩余部分文本（选择第一个满足条件的），默认为false
  • value：初始化组合框中的值
  • valueField：组合框的值字段
  • valueNotFoundText：值不存在时的提示信息
  • tpl：Ext模板字符串或模板对象，可以通过该配置项自定义下拉列表的显示方式 方法：
  • clearValue()：清空字段当前值
  • doQuery( String query, Boolean forceAll )
  • getValue()
  • getStore()
  • setValue( String value )

Ext.form.RadioGroup

  • allowBlank
  • blankText

Ext.form.Radio

  • getGroupValue()
  • setValue( value {String/Boolean} )

Ext.form.CheckboxGroup

  • allowBlank：是否允许不选择，默认为true
  • blankText
  • columns：显示的列数，可选值包括：固定值auto、数值、数组（整数、小数）
  • items：对象数组
  • vertical：是否垂直方向显示对象，默认为false

Ext.form.Checkbox

  • boxLabel：复选框的文字描述
  • checked：复选框是否被选择，默认为false
  • handler：当checked值改变时触发的函数，函数包含两个参数：checkbox、checked
  • inputValue 方法：
  • getValue()：返回复选框的checked状态
  • setValue( Boolean/String checked )

Ext.form.NumberField

  • allowDecimals：是否允许输入小数，默认为true
  • allowNegative：是否允许输入负数，默认为true
  • baseChars：输入的有效数字集合，默认为'0123456789'
  • decimalPrecision：数字的精度，默认保留小数点后2位
  • decimalSeparator：十进制分隔符，默认为'.'
  • maxValue：允许输入的最大数值
  • maxText：超过最大值之后的提示信息
  • minValue：允许输入的最小数值
  • minText：超过最小值之后的提示信息
  • nanText：输入非有效数值之后的提示信息

Ext.form.TextArea

  • preventScrollbars：是否禁止出现滚动条，默认为false

Extjs 4如何自定义Panel

要达到你的效果，可以用2种方法：

  1. 每次使用都new一个panel组件，使用相同配置
  2. 只创建一个panel组件，每次使用时更新它的内容 这里你自己取舍吧。

方法1

function createNP(target){
    var config = {
        width: 200,
        height: 200,
        bodyStyle: {
            background: '#F00'
        },
        renderTo: target
    };
    return Ext.create('Ext.panel.Panel', config);
}

方法2

var p = Ext.create('Ext.panel.Panel', {
    width: 200,
    height: 200,
    bodyStyle: {
        background: '#F00'
    },
    renderTo: Ext.getBody()
});
p.update('字符串或html');
p.removeAll();
p.add({
    // 新组件
});

Extjs 如何自定义控件

一般可以在extjs的组件基础上扩展新的组件，比如Component，继承它并在里边动态生成HTML就可以当组件用了。方法可以直接写在类里。文档上的扩展组件没怎么看懂，尤其是绑事件。

推荐文章