Javascript - ExtJs

组件通用配置

width：number | "%"

//宽

 

height：number | "%"

//高

 

autoEl：string | Json

//包裹组件的html元素

autoEl: { tag:"div",style:"padding:5px;"}

 

defaults：Json

//子组件共享Json的配置，但不会覆盖子组件独自的配置

 

cls：string

//css类名

 

html：string

//在组件的末尾处加入html元素

 

contentEl：HtmlString | HtmlID

//指定一个已存在的HTML元素, 或者一个已存在HTML元素的 id , 它们将被用作当前组件的内容

 

string：html标签ID

//将html标签插入到组件内

 

disabled：bool

//是否禁用此组件，动态设置组件的禁用和启用：enable()：启用，disable()：禁用

 

autoScroll：bool

//数据超过组件高度溢出时是否显示滚动条

组件通用方法

destroy()

//销毁自身，也可以使用Ext.destroy ( conponentId | [ conponentId,conponentId ] )销毁组件，存储器也可以销毁，使用Ext.StoreManager.remove ( storeId  )

enable();

// 启用此组件

disable();

//禁用此组件

addCls();

//添加css的className

removeCls()

//移除指定的css的className

容器组件通用配置（每一个有items配置的组件都是容器组件）

html：htmlString | htmlID

// 将html装进组件中，默认html将显示在items组件的后面，如果要让html显示在子组件的前面，可以为items增加一个panel子组件，设置该panel的html即可。

//示例：

items: [

        {

            xtype: "panel",

            style: "padding:10px;",

            height:,

            autoScroll:true,

            anchor: "100%",

            border:false,

            html: html,  //这样html会渲染到xxxxx组件的前面

        },

        {

            xtype: "xxxxx"                   

        },

]

 

defaultType: xtype

//子组件的默认类型，这样可省去每个子组件都要声明其xtype的代码量，非默认类型时再声明其xtype即可。

//示例：

Ext.create("Ext.form.Panel", {

    //……,

    defaultType: "textfield",

    items: [

        { fieldLabel: "用  户" }, //不用再写xtype

        { fieldLabel: "密  码" },

        {xtype:"combobox", /*……*/ } //不是默认类型时需要声明xtype

    ]

});

 

defaults：JsonConfig

// 如果当前容器组件有多个子组件，defaults可统一设置子组件的通用配置。如果defaults配置中的项与子组件自己的配置相同，默认子组件的配置权重更高。也即不会发生覆盖。

//示例：

defaults: { style: "display:inline-block !important;margin-right:10px !important;" }

items: [

    /*所有子组件会自动应用defaults*/

]

 

layout："anchor"

//指定当前容器组件的子组件将使用anchor布局，如：父组件{ layout:"anchor",items:[ { anchor : "100%" } ] }

容器组件通用方法

add(ExtComponent)

//添加子组件到末尾。利用这一性质配合Ajax动态为组件插入子组件。

insert(index, ExtComponent)

//添加子组件到指定处

//示例：

var x = { xtype: "xxxx" };

Ext.getCmp("fff").add(x);

update(htmlString)

//将htmlString填充到组件的html中，html将出现在子组件的后面

组件通用事件

beforerender：function() 

//组件渲染之前触发

afterrender：function()

//渲染完成后触发

设置标题栏宽

listeners : {

        afterrender : function(panel) {

            var header = panel.header;

            header.setHeight();

        }

}

祛除组件边框

baseCls: 'my-panel-no-border' //全透明

//或

style: "border:none;padding:10px;",

border: false,

巴特西

Javascript - ExtJs - 其它

最新文章

热门文章