Question

我喜欢在ExtJs中填充JSon响应中的checkboxgroup。单击“发送”按钮时，它将在控制台中显示响应。

Ext.define('myclass', {
extend: 'Ext.form.Panel',
initComponent: function(){
Ext.apply(this, {
renderTo: Ext.getBody(),
title: 'Message',
tbar: [{
    text: 'Send',
    handler: function(){
    console.log(this.getValues());
    },
    scope: this
}],
items: []
});
    this.callParent(arguments);
}
});
    var messagePanel = new myclass();

loadCheckboxes : function(){
Ext.Ajax.request({
    url: 'recipients.json',
    success: function(response){
        console.log(response);
    },
    scope: this
    });
}

this.loadCheckboxes();

onLoad : function(response){
var jsonResponse = Ext.decode(response.responseText);
    if (jsonResponse.success) {
    // success
    console.log(jsonResponse);
    }
}

    Ext.Ajax.request({
    url: 'recipients.json',
    success: onLoad(),
    scope: this
    });

var checkboxGroup = {
xtype: 'checkboxgroup',
columns: 2,
fieldLabel: 'Recipients',
name: 'recipients',
style: {
padding: '10px'
},
items: []
};
this.add(checkboxGroup);

var i, len = jsonResponse.recipients.length, recipient;
for (i = 0; i < len; i++) {
recipient = jsonResponse.recipients[i];
    checkboxGroup.items.push({
    xtype: 'checkbox',
    boxLabel: recipient.fullName,
    name: 'recipients',
    inputValue: recipient.userID,
    checked: recipient.selected
    });
}

以下是此代码的Json代码。

{
"success": true,
"recipients": [{
"fullName": "Stuart Ashworth",
"userID": 1,
"selected": true
}, {
"fullName": "Andrew Duncan",
"userID": 2,
"selected": false
}
]
}

当我运行此代码时，在控制台中显示错误。 SyntaxError：函数语句需要一个名称 loadCheckboxes：function（）{

请建议我解决这个问题。

Answer 1

您似乎正在尝试定义对象的键值：

loadCheckboxes : function(){
    // ...
}

但是，这些应该是声明的变量或函数：

var loadCheckboxes = function () {
    // ...
};

function loadCheckboxes() {
    // ...
}

因为它们不在object literal - {...}范围内 - 其中语法name: value会定义设置为function expressions的对象的键，这可以是匿名的

相反，它们是labels后跟function declarations，后者不能是匿名的。

Answer 2

检查这对您有何用处

Ext.define('myclass', {
    extend: 'Ext.form.Panel',
    initComponent: function() {
        Ext.apply(this, {
            renderTo: Ext.getBody(),
            title: 'Message',
            tbar: [
                {
                    text: 'Send',
                    handler: function() {
                        console.log(this.getValues());
                    },
                    scope: this
                }
            ],
            items: [
                {
                    xtype: 'checkboxgroup',
                    columns: 2,
                    fieldLabel: 'Recipients',
                    name: 'recipients',
                    style: {
                        padding: '10px'
                    },
                    items: []
                }
            ]
        });
        this.callParent(arguments);
    },
    onLoad: function(response) {
        var jsonResponse = Ext.decode(response.responseText);
        if (jsonResponse.success) {
            // success
            console.log(jsonResponse);
            var i, len = jsonResponse.recipients.length, recipient;
            var checkboxGroup = this.down('checkboxgroup[name="recipients"]');
            for (i = 0; i < len; i++) {
                recipient = jsonResponse.recipients[i];
                checkboxGroup.add({
                    xtype: 'checkbox',
                    boxLabel: recipient.fullName,
                    name: 'recipients',
                    inputValue: recipient.userID,
                    checked: recipient.selected
                });
            }
        }
    }
});

var messagePanel = new myclass();

function loadCheckboxes() {
    Ext.Ajax.request({
        url: 'recipients.json',
        success: function(response){
            console.log(response);
        }
        // , scope: this <-- you don't need scope here, you are not in a class
    });
}

loadCheckboxes(); // <-- I assume this call and the next are for debugging pourposes

Ext.Ajax.request({
    url: 'recipients.json',
    success: messagePanel.onLoad,
    scope: messagePanel
});

SyntaxError：函数语句需要ExtJs中的名称

2 个答案: