组件通用配置

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 - 其它的更多相关文章

  1. Javascript - ExtJs - Ext.form.Panel组件

    FormPanel组件(Ext.form.FormPanel) logogram:Ext.form.Panel | xtype:form Ext.form.Panel.配置 frame }//旗下所有 ...

  2. Javascript - ExtJs - GridPanel组件

    GridPanel组件(Ext.grid.GridPanel)logogram:Ext.grid.Panel | xtype:gridpanel 此类派生自Ext.Panel,创建表格需要两个必须的对 ...

  3. Javascript - ExtJs - Itemselector

    引入扩展文件 Extjs4.2根目录下: examples \ ux \ css \ images (这是选择按钮的图片资源) examples \ ux \ css \ ItemSelector.c ...

  4. Javascript - ExtJs - 整合百度文章编辑器

    ExtJs - 整合百度文章编辑器(ExtJs UEditor) 第一步:去官网下载最新版本的UEditor,UEditor下载. 第二步:在编辑器根目录创建一个Extjs-Editor.js,录入以 ...

  5. Javascript - ExtJs - 事件

    事件(ExtJs Event) Ext.Util.observable类  Ext.Util.observable是一个接口,为Ext组件的事件提供了支持,组件的事件不同于传统事件,所以需要有这么一套 ...

  6. Javascript - ExtJs - 数据

    数据(ExtJs Data) Ext.data命名空间 有关数据存储.读取的类都定义在Ext.data命名空间中.Ext的gridPanel.combobox的数据源都是来自Ext.data提供的类. ...

  7. Javascript - ExtJs - 弹窗

    1.确认对话框 Ext.MessageBox.alert( title,content,fn) Ext.onReady(function () {    Ext.Msg.alert("好吧, ...

  8. Javascript - ExtJs - 组件 - 分页

    服务端只需要返回如下格式的字符串,ExtJs就可以解析并自动生成分页数据.  , name: "sam" }     ] } 准备: CREATE PROCEDURE [dbo]. ...

  9. Javascript - ExtJs - 常用方法和属性

    常用方法和属性(Common methods and attributes) ExtJs中的对象 Ext.Component Ext组件对象,表示一个可渲染的组件. Ext.dom.Element E ...

  10. [JAVASCRIPT][EXTJS]直接用JSON创建树形控件(Ext.tree.TreePanel )(转)

    直接用JSON创建树形控件(Ext.tree.TreePanel ) 1.创建多个根节点的树形 2.直接使用JsonList创建树形 <!DOCTYPE HTML PUBLIC "-/ ...

随机推荐

  1. 做错的题目——this的指向

    不管延不延时,setTimeout里面的function都是孤立的,并不属于哪一个对象,所以this只会指向全局

  2. E212: Can't open file for writing

    意思是不能保存. 原因是权限不够,普通用户用vi 进行不了保存,需要使用超级用户才可以 命令:sudo su     转换成超级用户 vi hello       打开文件 :wq 即可保存退出

  3. Linux(centos7)如何安装Zend Optimizer Zend Guard Loader

    下载地址:http://www.zend.com/en/products/loader/downloads#Linux 1.解压 wget http://downloads.zend.com/guar ...

  4. Mac iOS Mac Watch 应用和游戏编程开发工具推荐

    今日分享「iOS / Mac / Watch 应用和游戏开发工具」推荐,这期专题主要为iOS开发者推荐一些优秀的设计和开发工具,这些工具包含移动原型的设计.程序的开发等,可以大大提高开发的效率!专题会 ...

  5. flask 钩子函数

    说明: before_request函数,就是一个装饰器,他可以把需要设置为钩子函数的代码放到视图函数执行之前执行 示例: from flask import Flask,url_for,redire ...

  6. HDFS 读写数据流程

    一.上传数据 二.下载数据 三.读写时的节点位置选择 1.网络节点距离(机架感知) 下图中: client 到 DN1 的距离为 4 client 到 NN 的距离为 3 DN1 到 DN2 的距离为 ...

  7. C语言复习---矩形法求定积分函数

    一:分析: 大一学习积分的时候,我们学习过,可以通过矩形法来求定积分. 思路就是将积分区间划分成n等份,然后将这n等份近似看成矩形(或梯形),然后对所有的矩形(或梯形)的面积进行求和. 二:简单的例子 ...

  8. Tooltip导致的无法访问已释放对象

    最近C#项目中遇到了一个无法访问已释放对象问题,经过反复测试,最终发现问题出在控件Tootip上,因为tootip内部有一个定时器,如果在窗口销毁时,鼠标移动到控件上恰好产生了一个tooltip,就会 ...

  9. IDEA导入JUnit4

    Step 1. IDEA最上面一栏的菜单栏中,选File->Project Structure(从上往下第11个),弹出窗口左边有一个列表,选Module. Step 2. 右侧有一个带3个标签 ...

  10. 将.csv数据导入到mysql中

    1.首先看一下我需要导入的数据: 用excel打开的时候显示: 用notepad++打开显示为: 2.使用notepad++打开改变字符集为UTF-8 3,建立表,表中的字段要和文件中的一致 3.执行 ...