我在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();
}
但那不起作用。那么如何在另一个函数中访问一个函数变量呢?
答案 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);