您的位置:

关于自定义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

});

};

2.实例化对象,并在该对象中定义事件的监听函数

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); });

3.触发事件

Ext.extend(Person, Ext.util.Observable, {

//extend函数中可以自定义新的方法,也可以重写原类的方法

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.DateFied

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.from.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就可以当组件用了。方法可以直接写在类里。~话说文档上的扩展组件没怎么看懂。。。尤其是绑事件。。。

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

本文目录一览: 1、extjs怎么自定义函数 2、extjs 控件事件大全 3、Extjs 4如何自定义Panel 4、Extjs 如何自定义控件 extjs怎么自定义函数 extjs的自定义事件主要

2023-12-08
关于extjs嵌入html的信息

2022-11-23
关于extjs无法复制的信息

本文目录一览: 1、extjs3.4如何让页面上的内容无法复制,包括禁止ctrl+c和鼠标右键等操作,求高人解答! 2、extjs中,对store复制的一些问题 3、关于extjs grid复制粘贴功

2023-12-08
关于extjs的一个方法的信息

本文目录一览: 1、extjs怎么自定义函数 2、ExtJs中怎么上传文件 3、extjs函数调用方法 extjs怎么自定义函数 extjs的自定义事件主要分三步1.在类中定义事件名称: Person

2023-12-08
关于extjs跟vue的信息

本文目录一览: 1、web前端开发需要天天加班熬夜吗? 2、做web前端开发都应该会些什么 3、关于后端程序员写前端用什么框架更好 4、VUEJS 和EXTJS,VUE能不能代替EXTJS来用呢 5、

2023-12-08
关于extjs效果的信息

本文目录一览: 1、extjs 做出这样的效果如何做 2、请问extjs如何实现这种报表效果? 3、使用Extjs怎么做出如下效果 4、ExtJS 有没有很炫效果? 5、Extjs的优点 extjs

2023-12-08
关于extjs日期怎么写的信息

本文目录一览: 1、extjs获取当前时间并且怎么取7天前的时间 2、extjs中的日期文本框怎么写 3、如何转化extjs的model中的日期类型字段格式 4、Extjs怎么格式化Grid的日期列

2023-12-08
关于extjs打包教程的信息

本文目录一览: 1、ExtJs与Java结合的教程!! 2、extjs 如何与adobe air整合 3、下载Extjs 视频教程网站 4、extjs项目打包的时候为什么添加的菜单项没有加载 ExtJ

2023-12-08
关于js定时查询数据库数据库数据的信息

2022-11-24
关于extjs文档及api的信息

本文目录一览: 1、如何理解及阅读EXTJS的API文档 2、我想查看EXTjs的API文档,在官网上下了3.4.0,部署在eclipse的动态web项目上,但是会有报错。 3、extJs api文档

2023-12-08
关于extjs向导的信息

本文目录一览: 1、extjs 如何与adobe air整合 2、问问在extjs里怎么限制访问设计页面的ip 3、想用Extjs做一个左右布局的格式 4、extjs的card布局中使用XTempla

2023-12-08
关于已前的学习笔记java的信息

2022-11-18
关于extjs模板引擎的信息

本文目录一览: 1、VUEJS 和EXTJS,VUE能不能代替EXTJS来用呢 2、PHP 怎样的模板分离最完美? - PHP框架开发 3、Extjs如何动态加载Extjs脚本 4、ExtJS应用怎么

2023-12-08
关于学extjs已经了解基本了的信息

本文目录一览: 1、学习extJS之前,应该具备什么基础 2、extjs是什么啊 3、如何学习Extjs 4、谁能分享下学习extjs的心得体验 5、转:新手如何学习ExtJS 4 6、学习EXTJS

2023-12-08
关于extjs5框架的信息

2022-11-25
关于extjs开发实战pdf的信息

本文目录一览: 1、extjs实用开发指南 2、本人想要学习extjs...完全不知道如何下手...看一些教程都没有讲原理的...觉的都没有学到东西。 3、extjs框架工作原理 4、《ExtJS实战

2023-12-08
关于java学习笔记良葛格的信息

2022-11-11
关于extjs数据表格的信息

本文目录一览: 1、extjs 添加类似excel的表格 (添加一个空的表格)表格行数通过点击+号自动添加 2、如何Extjs将Excel导入到数据库 3、extjs6.0数据表格(带复选框) 4、e

2023-12-08
关于eclipse搭建extjs6的信息

本文目录一览: 1、eclipse怎么配置ext插件 2、在eclipse里使用extjs6.0版本应该引用哪些文件 3、如何在eclipse中部署extjs mvc 4、Eclipse里可以直接使用

2023-12-08
关于extjs6主题的信息

本文目录一览: 1、extjs6 pivot grid 在哪个目录 2、extjs 中修改整个框架的颜色怎么弄??比如现在的蓝色我改成黄色的 3、extjs 6 grid 更改选中行背景颜色,直影响当

2023-12-08