如何在Extjs4中的另一个函数中访问一个函数的变量?

时间:2013-05-29 07:16:54

标签: function extjs extjs4

我在extjs4工作。我有一个带复选框的视图。在控制器中,我编写了一个函数来获取这些复选框值。

chekfeature: function (cmp) {
    cmp.mon(cmp.getEl(), 'click', function (event, target) {
            getFeatureId = target.id;
            console.log(getFeatureId);
            return getFeatureId;
        }, this, {
            delegate: 'input'
        });
},

所以我在getFeatureId中获取了复选框值。我想在同一控制器的另一个函数中访问此变量。我试过这个:

getFeature:function()
{
     $getvalue = this.chekfeature();
}

但那不起作用。那么如何在另一个函数中访问一个函数变量呢?

2 个答案:

答案 0 :(得分:0)

首先,我认为你需要查看一些javascript基础知识......然后,如果你这样做,看看sencha的例子和教程。

在视图中,您有复选框组件。

在控制器中,您可以收听change event

如果您在控制器中有另一个需要该值的函数,则将其作为变量传递给您需要它的函数(=基本javascript),或者获取复选框组件并调用getValue()方法

这是一个例子: http://jsfiddle.net/Vandeplas/fDces/

//Defining a Controller
Ext.define('AM.controller.Pizza', {
    extend: 'Ext.app.Controller',

    init: function () {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            },
            'checkbox': {
                change: this.onCheckChange
            },
            'button[action=orderPizza]' : {
                click: this.onOrderPizza
            }
        });
    },

    onCheckChange: function (checkbox, newValue, oldValue, eOpts) {
        console.log(newValue ? 'you checked ' + checkbox.boxLabel : 'you unchecked ' + checkbox.boxLabel);
    },

    onOrderPizza: function(button, e, eOpts){
        var checkboxes = button.up('form').query('checkbox');
        Ext.each(checkboxes, function(chk){
            console.log(chk.boxLabel +  ': ' + chk.getValue());
        });
    },

    onPanelRendered: function () {
        console.log('The panel was rendered');
    }
});
//Defining a View
Ext.define('AM.view.CheckForm', {
    extend: 'Ext.form.Panel',
    alias: 'widget.checkform',

    title: 'Choose toppings',

    initComponent: function () {
        this.items = [{
            xtype: 'fieldcontainer',
            fieldLabel: 'Toppings',
            defaultType: 'checkboxfield',
            items: [{
                boxLabel: 'Anchovies',
                name: 'topping',
                inputValue: '1',
                id: 'checkbox1'
            }, {
                boxLabel: 'Artichoke Hearts',
                name: 'topping',
                inputValue: '2',
                checked: true,
                id: 'checkbox2'
            }, {
                boxLabel: 'Bacon',
                name: 'topping',
                inputValue: '3',
                id: 'checkbox3'
            }]
        }, {
            xtype: 'button',
            text: 'Order',
            action: 'orderPizza'
        }];

        this.callParent(arguments);
    }
});
//Creating the application
Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'AM',

    appFolder: 'app',
    controllers: ['Pizza'],

    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [{
                xtype: 'checkform'
            }]
        });
    }
});

答案 1 :(得分:0)

您的checkfeature函数未返回任何内容。实际上,您正在checkfeature内的事件处理函数返回。

您必须在此处质疑您的执行流程:知道只有在点击组件后您才会知道getFeatureId的价值,您无法随时拨打getFeature。您需要等待点击发生,然后从那里继续。

具体而言,您需要将要放入getFeature的处理包装在一个回调中,该回调将在>用户点击该组件后执行。

以下是如何操作:

checkFeature: function(cmp, callback) {
    cmp.mon(cmp.getEl(), 'click', function(event, target) {

        // you most use var with your local variables and
        // avoid messing up or depending on the global namespace
        var featureId = target.id;

        console.log(featureId);

        // fires the callback
        callback(featureId);

        // do not return from the event handler because this result
        // will be interpreted by the event manager (i.e. in many 
        // cases, returning false from an event handler will stop
        // the processing that fired the event)
    });

    // see, there's no return here
}

以下是使用此方法的方法:

getFeature: function() {
    this.checkFeature(function(featureId) {
        // featureId is available here
    });

    // unfortunately, you won't be able to return something
    // depending on featureId from here... if you need to do so,
    // you'll have to use another callback in this method.
}

为简单起见,在本例中,我通过简单的调用执行回调。但是,在使用此模式时,通常最好为函数的执行范围提供支持。

也就是说,通常你应该这样做(这个结构在Ext的代码和其他库中无处不在):

function myAsyncFunction(callback, scope) {
    // example results you want to pass 
    var result = 1,
        result2 = 2;

    // execute the callback in the given scope, or default
    // to the current `this`
    callback.call(scope || this, result, result2);
}

用法:

// let's say we are in the context of an object method
var that = this; 
myAsyncFunction(function(result, result2) {
    console.log(this === that); // true
}, this);