Question

有人可以帮我解决我无法将某些属性应用到我自己的自定义类的问题。这是我的来源：

Ext.define('com.amkor.web.common.client.GridPanel', {
alias : 'Web.common.client.GridPanel',
extend : 'Ext.grid.Panel',
isCheckbox : false,
initComponent : function(){ 
    var me = this;
    var sm = (me.isCheckbox)?Ext.create('Ext.selection.CheckboxModel'):'';          
    Ext.apply(me, {
        title : 'Grid',
        width : 560,
        height : 300,
        selModel : sm,
        frame : false,
        border : false,
        forceFit : true,
        columnLines : true,
        autoLoad : false,
        autoDestory : true
    });     
    me.callParent(arguments);
},
getGridSelection : function(){
    return this.getSelectionModel().getSelection();
},
removeGridSelection : function(){
    this.getStore().remove(this.getGridSelection());
}
});

如您所见，我通过扩展Ext.grid.Panel定义了新的自定义类，然后通过扩展自定义类com.amkor.web.common.client.GridPanel来定义新的自定义类。

Ext.define('EvaluationApp.view.EvaluationGrid', {
extend : 'com.amkor.web.common.client.GridPanel',
xtype : 'EnhancementGrid',
initComponent : function(){
    Ext.apply(this, {
        id : 'evalGrid',
        width : 556,
        height : 290,
        title : 'Wow',
        columns : columns,
        features : [Ext.create('Ext.grid.feature.Grouping', {
            groupHeaderTpl : '<div align="left">연도 : <font color="green">{[values.rows[0].grp_year]}</font> ({rows.length}) </div>'
        })]
    });
    this.callParent(arguments);
}
});

我想将标题从“网格”更改为“哇”，但它不适用。请给我一些建议。

Answer 1

Ext.define('com.amkor.web.common.client.GridPanel', {
    alias : 'Web.common.client.GridPanel',
    extend : 'Ext.grid.Panel',
    isCheckbox : false,

    title: 'Grid',

    initComponent : function(){ 
        var me = this;
        var sm = (me.isCheckbox)?Ext.create('Ext.selection.CheckboxModel'):'';          
        Ext.apply(me, {
            width : 560,
            height : 300,
            selModel : sm,
            frame : false,
            border : false,
            forceFit : true,
            columnLines : true,
            autoLoad : false,
            autoDestory : true
        });     
        me.callParent(arguments);
    },
    getGridSelection : function(){
        return this.getSelectionModel().getSelection();
    },
    removeGridSelection : function(){
        this.getStore().remove(this.getGridSelection());
    }
});

注意我是如何将标题配置从Ext.apply内部移动到类定义的。现在，当创建此网格时，如果传入标题，则将使用该标题。如果未传入标题，则标题将默认为'Grid'。

要了解这里发生的事情，您需要了解Ext.apply正在做什么。 Ext.apply获取传入的第二个对象，并将其属性复制到传入的第一个对象。更多信息可以在文档中找到：http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-apply。

因此，在上面的代码中，Ext.apply将属性复制到me（等于this），并从您传入的对象中获取这些属性作为第二个参数，显示如下。

{
    width : 560,
    height : 300,
    selModel : sm,
    frame : false,
    border : false,
    forceFit : true,
    columnLines : true,
    autoLoad : false,
    autoDestory : true
}

因此，上述对象中列出的任何内容都将覆盖this中找到的相同属性。当您创建或扩展上述类时，添加到其中的任何属性（例如您设置title: 'Wow'的示例）都将直接添加到this。正如我之前所说，第二个对象中定义的任何属性都将覆盖this中定义的任何属性，这就是为什么当你将title: 'Grid'放在第二个对象中时，它只是覆盖了任何title属性你在扩展课程时传入了。

为什么我不能在extjs4中将属性应用于我自己的自定义类？

1 个答案: