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

样式

 Ext的组件基本都有类似"style"这样的配置属性，大部分都可以直接写css样式的String,比如displayfield

labelStyle: 'color:#FF0000;',

fieldStyle: 'color:#FF0000;'

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

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

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

combobox正则匹配：

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

        selectOnFocus:true,

        forceSelection: true,

        editable: true,

        enableRegEx: true (允许正则)

 : 

效果： 

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

选择器：

常用的几种

      基于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来扩大或者缩小匹配范围