代码片段 ~ Extjs3

weixin_30642561

于 2019-03-05 17:44:00 发布

阅读量134

点赞数

文章标签：数据库 ux

原文链接：http://www.cnblogs.com/itck/p/10478396.html

版权

配置项
基础通用配置
属性
方法
事件
特性：
Component
Container
布局
Data
表单控件

标签：代码片段

配置项

基础通用配置

//定义一些比较常用的属性，总是忘记，记录下来，以便查询
1.cls: String //添加一个额外的类样式，自定义样式，将类选择器名放在这个配置里
2.disabled : Boolean //为true时无效，Read-only
3.disabledClass : String //当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。 
4.hideBorders : Boolean //设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设      置(默认为 false)。 
5.html : String/Object //一个HTML片段，或者一个 DomHelper 描述
6.itemCls : String //一个附加的CSS类，应用到div上，包装当前field的表单元素。
7.labelSeparator : String //每个fieldLabel 文本后面现实的分隔符
8.labelStyle : String //field的label样式 eg:labelStyle: 'font-weight:bold;'
9.layout : String/Object //布局方式
10.listeners : Object //一个包含一个或多个事件处理器的配置对象
11.margins : Object //此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作      为布局的容器
12.overCls : String //它将在鼠标移过元素时CSS类
13.xtype : String //类型
14.ref : String //定义组件的访问路径 eg ref:'abc' 则可以使用他的父级.abc实现对组件的访问
15.region : String //布局为BorderLayout的容器中使用
    renderTo : Mixed //该值可以是一个节点的id、一个DOM节点或者一个已存在的元素，选在在DOM内
    applyTo: //将组件渲染在DOM节点后面
16.stateEvents stateful Ext.state.Provider //组件状态保存功能，不会用，也比较少用
17.style : String //style: {marginBottom: '10px'} 参考Ext.Element.applyStyles
    bodyStyle: String //对组件起作用，也可用于布局 style主要用于布局
18.tabTip : String //Ext.QuickTips.init()调用的前提下，只用于当该组件作为TabPanel提示
19.tpl : Mixed //Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用
20.pageX : Number | pageY : Number //表示页面级的x y坐标值
21.x y: Number //被包含在一个指定位置的容器中，这个值表示x(left) y(top)坐标值

高级配置项

renderer

/*  column的渲染配置项
    格式为：renderer：function（value，metadata，record，rowIndex，colIndex，store）{}
    value 当前单元格的值；metadata 可配置单元的css类和attr样式属性； record 从数据中提取的          record； rowIndex 行号； colIndex 列号；Store 对象
*/
renderer: function(value, metaData, record){
    for(i=0;i<ptypeStore.getCount();i++){
        var rec = ptypeStore.getAt(i);
        if(rec.get('pt_id')==value){
            return rec.get('pt_name');
        }
    }
    return value; 
}

editor

/* editor是对可编辑Column提供的编辑控件，目前发现仅支持系统控件，不支持自定义控件 */
editor: {
    editor: {xtype: 'textfield', allowBlank: false}
}
editor:{xtype: 'combo', editable: false,triggerAction: 'all', valueField: 'wf_id',
    displayField:'wf_name', forceSelection: true, mode: 'remote', store: procStore
}
/* editor里面不需要filelabel、name、hiddenName这些属于表单提交控件的属性，因此可编辑Column也就不支持隐藏表单控件 */

region

//BorderLayout布局定义区域配置项
region: 'north' | 'south' | 'west' | 'east' | 'center'

属性

1.ownerCt : Ext.Container //父类容器
2.disabled : Boolean //设置是否可用
3.hidden : Boolean //设置隐藏状态
4.items : MixedCollection //子组件集合
5.refOwner : Ext.Container //通过ref配置的组件可以通过该属性访问引用祖先组件
6.rendered : Boolean //渲染状态

方法

1.add (  ...Object/Array component  ) : Ext.Component/Array //向当前容器中添加  Component(s),需要调用 doLayout 方法来刷新视图
2.addClass (  string cls  ) : Ext.Component //添加CSS class样式
3.destroy () : void //销毁
4.disable () : Ext.Component //将组件置为无效状态，并出发'disable'事件
5.doLayout (  [ Boolean shallow ],  [ Boolean force ] ) : Ext.Container //强制容器的布局进行重新计算
   参数:
    shallow : Boolean 
        (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为            flase，它将递归地调用每个子容器的doLayout方法) 
    force : Boolean 
        (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。 
    返回值:
        Ext.Container 
        this 
6.enable () : Ext.Component //将组件置为有效状态并触发'enable'事件
7.find (  String prop ,  String value  ) : Array //根据属性查找当前容器中任何层次上的组件 
8.findById (  String id  ) : Ext.Component //通过id查找容器中位于任何层级上的组件
9.findByType (  String/Class xtype ,  [ Boolean shallow ] ) : Array //根据xtype或者类型，查找当前容器中任何层级上的组件
参数:
    xtype : String/Class 
        组件的xtype字符串，或者直接是组件的class类型 
    shallow : Boolean 
        (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true，         将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。 
    返回值:
        Array 
        Ext.Component数组
10.findBy (  Function fn ,  [ Object scope ] ) : Array //自定义的函数查找容器内的组件
    //fn(component, this container) 函数将会被用如下参数(component, this container)进行调用
11.findParentBy (  Function fn  ) : Ext.Container //查找当前组件上层任何层次上的容器
    //fn(container, this component)
12.findParentByType (  String/Class xtype  ) : Ext.Container //根据xtype查找父组件
13.fireEvent( String eventName, Object... args ) : Boolean
    //用传入的参数触发指定的事件，一个事件可以被设置为冒泡到Observable父类继承树(参看                 Ext.Component.getBubbleTarget) 调用enableBubble实现。
14.focus (  [ Boolean selectText ],  [ Boolean/Number delay ] ) : Ext.Component 
    尝试将当前组件设为焦点。 
    参数:
        selectText : Boolean 
            (可选) 如果可用，同时选中组件内部的文本 
        delay : Boolean/Number 
            (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒) 
    返回值:
        Ext.Component 
        this 
15.get (  String/Number key  ) : Ext.Component 
    //根据索引获取当前容器包含的一个组件（items.get(key)方法的别名）
16.getComponent (  String/Number comp  ) : Ext.Component 
    //检查当前容器的 items property（id） 并且获取当前容器的一个直接的子组件。
17.hide () : Ext.Component //隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件    的操作。 在隐藏组件之后触发 ' hide' 事件。
18.insert (  Number index ,  Ext.Component component  ) : Ext.Component //在当前容器的指   定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件
19.isXType (  String xtype ,  [ Boolean shallow ] ) : Boolean //判断xtype
20.nextSibling () : Ext.Component  previousSibling () : Ext.Component //兄弟组件
21.remove (  Component/String component ,  [ Boolean autoDestroy ] ) : Ext.Component //从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件
22.removeAll (  [ Boolean autoDestroy ] ) : Array //从当前容器中删除所有组件
23.removeClass (  string cls  ) : Ext.Component //从组件底层的元素上删除一个CSS类
24.setPosition (  Number left ,  Number top  ) : Ext.BoxComponent 
    //设置组件的left和top值。设置组件的页面XY值
25.setPagePosition (  Number x ,  Number y  ) : Ext.BoxComponent //设置组件在页面中的XY位置
26.setSize (  Mixed width ,  Mixed height  ) : Ext.BoxComponent 
    //设置BoxComponent的宽度和高度
27.show () : Ext.Component //显示组件
28.setVisible (  Boolean visible  ) : Ext.Component //设置组件显示或隐藏
29.on(String eventName, Function handler)  un(String eventName, Function handler) 
    //添加 删除 事件监听
30.

事件

1.add : (  Ext.Container this ,  Ext.Component component ,  Number index  ) 
    //将组件添加到容器子组件集合时的位置索引 
    监听器将会被使用如下的参数被调用:
        this : Ext.Container 
        component : Ext.Component 
    被添加的组件 
        index : Number 
 2.

特性：

extend

Component

BoxComponent

属性

//BoxComponent 是盒子模型组件，用于布局和封装Html元素

Container

ViewPort

//ViewPort是一个特殊的容器，一个页面只能有一个，使用于做单页面应用，自动渲染到body上，并且宽高与浏览器一致
new Ext.Viewport({
    layout: 'border', //*必选* 设置viewport的布局方式
    split: true,    //组件之间的空隙
    defaults:{      //子类的默认配置
    }，
    items: []  //*重要* 这是内容填充的必须属性
});

Panel

//很常用的一个组件
new Ext.panel({
    title: 'Panel', //标题
    [layout: '', ]    //布局方式
    [ x | y ]         //这是相对于容器来说的讲的位置，且只有 absoulte 布局生效
    [ pageX | pageY ] //页面级的位置，一样只有 absolute 布局生效
    [padding: Number/String,] //设置padding值 数值设置所有边侧，或者CSS的padding样式
    items: []       //子组件
});

Window

//Ext窗口组件，常用于表单弹出窗的载体

布局

border布局

//border布局 就是将container组件分为 东南西北中 5个区域，将子组件放入到各个区域中去；
//这5个区域的特点是：南北通栏，西中东在南北中间水平分布，东西设置宽度，剩余的是中的
new Ext.Viewport({
    layout: 'border',
    items: []     //子组件需要设置 region: 'north' | 'south' | 'west' | 'east' | 'center'
});

absolute布局

//Absolute绝对定位布局，通过设置 x、y 或者  pageX、pageY 进行组件位置布局
new Ext.Viewport({
    layout: 'absolute',
    items: [{
        xtype: 'panel',
        title: 'Absolute',
        x: 50,
        y: 50,
        html: '<p>定位布局</p>'
    }]
}）

Accordion

//Accordion是手风琴折叠布局
new Ext.Viewport({
    layout: 'accordion',
    items: [{
        xtype: 'panel',
        title: 'Absolute'，
        html: '<p>accordion</p>'
    }]
}）

Grid

CheckBoxSelectionModel

//CheckBoxSelectionModel 继承自RowSelectionModel 这个控件就是列表页前面的选择框
var Sm = new Ext.grid.CheckboxSelectionModel({
    dataIndex: 'id',
    singleSelect: false，  //是否单选
});

//配置项：
width：//设置宽度
//公共属性
sm.grid //grid的引用，但是为只读
//公共方法
clearSelections (  [ Boolean fast ] ) : void   //清除所有的选中状态。 
getCount (): Number ； //获取选择的总数
getSelected (): Record ; //获取第一条选择的
getSelections () : Array ;  //返回所有选中的记录

//公共事件

ColumnModel

//ColumnModel是数据的展现形式就是表格的展现形式 {dataSource}-mapping->{dataStore}-dataIndex->ColumnModel

editGrid

//editGrid,注意事项，保存的时候发送 list为key的son对象 保存修改的数据

Data

Record

//简单说就是Store里数据的封装对象，可以通过record访问数据对象
1、get(String name);             :Object             查询制定key的value；

Store

//比较常用的方法
1、store.getCount();             : Number            查询Stroe的数据数量
2、store.getAt(Number index);    : Record            获取指定位置记录
3、store.load();                 : void              使用配置的reader从远程获取数据
4、removeAll(Boolean silent);    : void              删除所有数据，参数表示是否触发clear事件
5、removeAt(Number index);       : void              删除指定位置记录,触发remove事件
6、store.save();                 ：Number            保存所有挂起的更改，返回保存的条数|-1
7、

远程数据Store

//数据类型
var recordType = Ext.data.Record.create([
    {
        name:'cit_id', type:'int', mapping:'cit_id'
    },{
        name:'cit_name', type:'string', mapping:'cit_name'
    }]
);
    
//数据对象
var listStore = new Ext.data.Store({
    remoteSort: true,
    autoLoad:true,
    proxy:new Ext.data.HttpProxy(
        {
            url:"data/getList",
            method:"POST"
        }),
    reader:new Ext.data.JsonReader(
        {
            root : 'list',
            totalProperty : 'totalSize',
            id : 'cit_id'
        }, recordType)//recordType也可以直接申明一个数组进行数据解析
});

表单控件

combo

/* 使用属组作为备选数据 */
{name:【key】,layout:'form',anchor: '92%',xtype:'combo', fieldLabel: 【nameS】,
    triggerAction: 'all', allowBlank: 【isBlank】,hiddenName:【key】,
    forceSelection: true,valueField: 'code',displayField:'value',mode:'local',
    store:new  Ext.data.ArrayStore({fields:['code','value'],data:
   【Ext.decode(dataS)】})
};

/* 使用远程数据作为数据来源（默认的数据来源） */
{name:【key】,layout:'form',anchor: '92%',xtype:'combo', fieldLabel: 【nameS】,
    triggerAction: 'all',//触发器点击时使用的操作，目前一般选 all 
    allowBlank: 【isBlank】,//允许为空
    hiddenName: 【key】,//Input 的 name
    forceSelection: true,//限定单选
    valueField: 【'cit_id'】,//值
    displayField: 【'cit_name'】,//显示text
    mode: 【'remote'】, //数据 
    store: listStore
};

/* 常用方法 */
getCount(); //获取缓存数据数量
getAt(i);//获取制定位置数据 从0开始
get('key');//根据key取值

/* eg.遍历 */
for(var i=0;i<store.getCount();i++){
    var rec = store.getAt(i);
    if(rec.get('id')==val){
        return rec.get('name');
    }
}

/* 加入使用的时候发现第一次载入不能实现键值的转换，那么可能是因为我们的store还没有载入的原因，那么可以选择在控件上增加一个 beforerender 事件，来判断是否store是否已经load，如果没有就进行load() */

CheckColumn

/* 可编辑Grid中的打勾选项控件 Ext.ux.grid.CheckColumn */
{
    dataIndex: '对应的数据名称',
    header: '控件的表头',
    xtype: 'checkcolumn',
    align: 'center',
    width: 80
}
/* 值得注意的是：使用该控件的时候它的值为 true和false，后台存储
的时候要注意对控件值做处理，最好对应的数据库列为整数，读取数据的时
候就可以匹配0和1 */

转载于:https://www.cnblogs.com/itck/p/10478396.html