Ext个人简单小结(样式和选择器)

样式

Ext的组件基本都有类似"style"这样的配置属性，大部分都可以直接写css样式的String,比如displayfield Ext个人简单小结(样式和选择器)

labelStyle: 'color:#FF0000;',

fieldStyle: 'color:#FF0000;' Ext个人简单小结(样式和选择器)

-----------------------------------------------------------------------------------------------------------------

分割虚线的实现：给上部组件加上下边框样式 style:'border-bottom:#35BAF6 1px dashed;',（当然也可以给下部组件加上边框）

Ext个人简单小结(样式和选择器)

-------------------------------------------------------------------------------------------------------

combobox正则匹配：

queryMode: 'local', (必须设置为'local')

selectOnFocus:true,

forceSelection: true,

editable: true,

enableRegEx: true (允许正则)

: Ext个人简单小结(样式和选择器)

效果：

Ext个人简单小结(样式和选择器)

-------------------------------------------------------------------------------------------------------

选择器：

常用的几种

基于xtype查找组件: var panels = Ext.ComponentQuery.query('panel');

查找二级xtype：var buttons = Ext.ComponentQuery.query('panel button');

基于属性值检索组件：var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');

使用query查找出的是数组，哪怕只有一个匹配结果，调用时要使用下标

var window = me.getView();
var partsId = window.query("hidden[name='partsId']")[0].getValue();

Ext.getCmp('id') 使用id查找，简单粗暴类似于jquey的$("#id")，不过个人不喜欢使用id，据说有很多匪夷所思的问题，比较调皮。

up()和down(), 获取父级和子级元素

var partsId = btn.up().down("combobox").getValue();

nextSibling(),下一个相邻的兄弟元素,对应的也有previousSibling()，及上一个相邻兄弟元素

var panel = btn.nextSibling();

一般个人还是喜欢使用Container.query()，比较简单明了，不用考虑父子级关系，只需要在匹配元素中通过下标拿到想要的结果就OK，同时可通过改变Container来扩大或者缩小匹配范围