Question

我在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();
}

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

Answer 1

首先，我认为你需要查看一些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'
            }]
        });
    }
});

Answer 2

您的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);

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

2 个答案: