ExtJS3 插件

Ext.ns("CMONO");
Application = function(config){
    Ext.apply(config);
};
/**
 * 插件的实现
 * 在组件生命周期最后,会唤醒所有组件的插件,同时调用init方法,在将组件的引入传入作为参数
 * 需要创建自己的构造函数,parentOverrides存放父类中要重写的所有方法和属性
 */
//插件模板
/*
var plugin = Ext.extend(Object, {
    constructor:function(config){
        config = config || {};
        Ext.apply(this, config);
    },
    init:function(parent){
                    
    },
    parentOverrides:{
                    
    }
});
*/
Ext.onReady(function(){
                
    var GridPlugin = Ext.extend(Object, {
        constructor:function(config){
            config = config || {};
            Ext.apply(this, config);
        },
        init:function(parent){
            Ext.apply(parent, this.parentOverrides);
            parent.on('click', this.onGridClick);
            parent.on('cellcontextmenu', this.onCellCtxMenuCall);
        },
        parentOverrides:{
            width:500,
            height:350,
            getSelectedRecord:function(){//返回选择记录
                //获取选择模型
                var sm = this.getSelectionModel();
                //RowSelectionModel
                if(sm instanceof Ext.grid.RowSelectionModel){
                    return sm.getSelected();
                }
                            
                //CellSelectionModel
                if(sm instanceof Ext.grid.CellSelectionModel){
                    var cell = sm.getSelectedCell();
                    return this.getStore().getAt(cell[0]);
                }
            }//eo getSelectedRecord
        },
        onGridClick:function(evt){
            evt.stopEvent();
            console.info(this.getSelectedRecord());
        },
        onCellCtxMenuCall:function(grid, rowIndex, cellIndex, evt){
            evt.stopEvent();
            //获取选择模型
            var sm = this.getSelectionModel();
            //RowSelectionModel
            if(sm instanceof Ext.grid.RowSelectionModel){
                sm.selectRow(rowIndex);
            }
                        
            //CellSelectionModel
            if(sm instanceof Ext.grid.CellSelectionModel){
                sm.select(rowIndex, cellIndex);
            }
        }
    });
                
    //注册ptype
    Ext.preg('firstPlugin', GridPlugin);
                
    var cm = new Ext.grid.ColumnModel([
        { header:'ID', dataIndex:'id', width:30 },
        { header:'Name', dataIndex:'name', width:60 },
        { header:'Title', dataIndex:'title', width:60 },
        { header:'Age', dataIndex:'age', width:30 }
    ]);
                
    var data = [
        { id:1, name:'常伟华', title:'CEO', age:23},
        { id:2, name:'常伟华', title:'CEO', age:23},
        { id:3, name:'常伟华', title:'CEO', age:23}
    ];
                
    var store = new Ext.data.JsonStore({
        fields:[
            { name:'id', mapping:'id', type:'int'},
            { name:'name', mapping:'name', type:'string'},
            { name:'title', mapping:'title', type:'string'},
            { name:'age', mapping:'age', type:'int'}
        ],
        data:data
    });
                
    //通过ptype延迟初始化
    var p = {
        ptype:'firstPlugin'
    };
                
    var grid = new Ext.grid.GridPanel({
        store:store,
        cm:cm,
        plugins:[p],
        sm:new Ext.grid.RowSelectionModel ()
        //sm:new Ext.grid.CellSelectionModel ()
    });
                
    grid.render('container');
                
});

点击查看原图

知识共享许可协议
《ExtJS3 插件》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

1 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     183.81ms