2

I am working in extjs4. I have a view with checkboxes. In a controller I have written a function to get these checkbox values.

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

So I'm getting the checkboxes values in getFeatureId. I want to access this variable in another function of same controller. I tried this:

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

But that's not working. So how do I access one functions variables in another function?

4

2 回答 2

0

首先，我认为您需要查看一些 javascript 基础知识……然后，如果您明白了，请查看 sencha 的示例和教程。

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

在控制器中，您侦听更改事件

如果控制器中有另一个需要该值的函数，则将其作为变量传递给需要它的函数（=basic 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'
            }]
        });
    }
});
于 2013-05-29T10:48:52.793 回答
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);
于 2013-05-29T10:58:52.450 回答