extjs怎么自定义函数

Posted 2023-04-23

extjs的自定义事件主要分三步

1.在类中定义事件名称：

Person = function(config)
Person.superclass.constructor.call(this, config);
this.name = config.name || '';
this.sex = config.sex || '';
this.addEvents(
"nameChange": true,
"sexChange": true
);
;

2.实例化对象，并在该对象中定义事件的监听函数

var person = new Person(
name: 'binoruv',
sex: 'man'
);

person.on("nameChange", function() alert("Name has been changed to " + this.name); );
person.on("sexChange", function() alert("Sex has been changed to " + this.sex); );

3.触发事件

Ext.extend(Person, Ext.util.Observable,
//extend函数中可以自定义新的方法，也可以重写原类的方法
setName: function(_name)
if (this.name != _name)
this.name = _name;
this.fireEvent("nameChange", this);

,
setSex: function(_sex)
if (this.sex != _sex)
this.sex = _sex;
this.fireEvent("sexChange", this);


);

person.setName("binoruv");
person.setSex("woman");
整个代码如下：
<script type="text/javascript">
Person = function(config)
/*
此处addEvents是调用Person父类Ext.util.Observable的方法
api中对Observable的描述：一个抽象基类（Abstract base class），为事件
机制的管理提供一个公共接口。子类应有一个"events"属性来
定义所有的事件。
*/
Person.superclass.constructor.call(this, config);

this.name = config.name || '';
this.sex = config.sex || '';
this.addEvents(
"nameChange": true,
"sexChange": true
);
;

Ext.extend(Person, Ext.util.Observable,
setName : function(_name)
if (this.name != _name)
this.name = _name;
this.fireEvent("nameChange", this);

,
setSex : function(_sex)
if (this.sex != _sex)
this.sex = _sex;
this.fireEvent("sexChange", this);


);

Ext.onReady(function()
var person = new Person(
name: 'binoruv',
sex: 'Man'
);

person.on("nameChange", function() /*debugger;*/Ext.Msg.alert("Message","Name has been changed to " + this.name); );
person.on("sexChange", function() /*debugger;*/Ext.Msg.alert("Message", "Sex has been changed to " + this.sex); );

person.setName("binoruv");
person.setSex("Woman");
);
</script> 参考技术A 转：
Ext JS自定义函数，令人崩溃的语法~

项目中有一段一直没看懂，貌似是关于Ext JS中自定义函数的：

Ext.ux.MessageBox = function()

var msgCt;

function createBox(t, s, data, i)

…………



return

…………

;

();

函数(createBox)之后，没有逗号，也没有分号，直接来了个return……。我一下子就晕了。手头能找到的两本书中都没有相应语法的介绍。今天偶然看到某高人的文章，顿时豁然开朗。最后大括号后面又来一对儿括号，这部分还是没有搞明白，以后再来研究吧~转载如下供查阅：

EXTJS的自定义函数，以下语句可创建一个函数：
Ext.Login=function()

function IsLogin()
……

return

init:function()
IsLogin();
,

Login:function()

……


刚开始时让我比较郁闷的是这种JS里的函数调用机制，以上代码里，将创建一个名为Ext.Login()的对象，应该相当于一个类的意思吧，然后可在其里面写其他相关的方法。

在return里的为公有方法，这里面的方法可给外部程序调用（如在html文件里用），而在return以外的代码是其私有方法，只能在Ext.Login()这个对象里调用

如需要在其他页面调用里面的Login()方法，可直接写

<input id="login" onclick="Ext.Login().Login()" />
如果需要在页面加载时就调用，一般只需直接用EXTJS里的方法即可实现：

Ext.onReady(Ext.Login.init, Ext.Login);
这里的函数名并不需要加括号，第一个参数是要调用的方法，第二个是作用域，一般写此对象名即可。本回答被提问者和网友采纳

ExtJS：尝试为每列使用自定义渲染器，范围问题

【中文标题】ExtJS：尝试为每列使用自定义渲染器，范围问题

【英文标题】：ExtJS: Trying to use custom renderer for each column, scope issue

【发布时间】：2014-02-03 17:51:03

【问题描述】：

所以我试图将自定义函数设置为每列的渲染器，但是我需要知道当前正在渲染哪一列，以便知道在渲染器中要做什么。 我定义并扩展了该列并创建了我自己的自定义列。我想在那里我可以定义自定义渲染函数，它的范围将是调用列。从那里我可以使用 this.mode、this.unit 等从列中获取我需要的信息以继续。但是这行不通，我一定没有正确理解。

Ext.define('column.Custom',

    extend: 'Ext.grid.column.Column',
    alias: 'widget.customcolumn',       
    listeners: 
        beforerender: function(col)
            //console.log(col);
        
    ,
    gridRenderer: function(value, cell, record, row, column)
    
        console.log(this);
        if (record.data.StartDate == 'N/A' ||
            record.data.EndDate == 'N/A')
        
            cell.style = 'background:#EEE;';
            return 'N/A';
                   
        // the locked grid has it's own renderers, so if we're here, assume we want the normalGrid      
        column = grid.normalGrid.columns[column];

        if (column.mode == 'cool')
        
            cell.style = 'background:#CCFFFF;';
            //cell.style = 'background:rgb(47, 162, 223);';
        
        else if (column.mode == 'heat')
        
            cell.style = 'background:#FFCCCC;';
        

             ....etc

        return ret;
    
);

这是我的专栏之一。

                               
    // defaults
    xtype: 'customcolumn',
    align: 'center',
    flex: 0,
    width: 90,
    sortable: true,
    //renderer: this.gridRenderer,
    lockable: false,                    
    locked: false,
    //hideable: false,
    // end default
    text: 'Total',
    menuText: 'Total',
    id: 'TotalSavingsColumn',
    dataIndex: 'Total',
    mode: 'none',
    unit: '%',
    renderer: 
        fn: this.gridRenderer,
        scope: this
    
,

而不是通过列索引抓取列，返回错误的列索引，因为隐藏列，我希望能够只使用this.mode，this.unit等。 有任何想法吗？感谢您的帮助。

【参考方案1】：

您可以在 column.Custom 类定义中定义 renderer 函数。如果您想将scope 设置为列本身，您可以在initComponent 方法中执行此操作：

Ext.define('column.Custom',

    extend: 'Ext.grid.column.Column',
    alias: 'widget.customcolumn', 
    initComponent: function() 
        // set scope property to this, so in renderer this will refers to column itself
        this.scope = this;

        this.callParent();
    ,
    renderer: function() 
        console.log(this);

        // your renderer...
    

);

那么你不需要在列配置中指定渲染器，因为你已经在 column.Custom 类中定义了它：

    // defaults
    xtype: 'customcolumn',
    align: 'center',
    flex: 0,
    width: 90,
    sortable: true,
    lockable: false,                    
    locked: false,
    //hideable: false,
    // end default
    text: 'Total',
    menuText: 'Total',
    id: 'TotalSavingsColumn',
    dataIndex: 'Total',
    mode: 'none',
    unit: '%'
,