javascript - 当调用函数位于 html 属性中时，无法在 sencha touch 中获取父引用

Question

我需要在sencha touch的 Controller 中创建一个通用方法，以便应用程序中的其他类似模块可以获取这些代码。但现在我陷入了困境，因为我无处得到它的解决方案(即使在谷歌上尝试了 100 次之后)。问题是调用函数位于 'html' 属性中，现在我们需要它的父引用，以便可以引用它的所有其他兄弟函数，看一下下面的代码:

<Ext.form.IFieldSet>{   //  THIS SHOWS ONLY if there is existing data under "other income"
                    xtype: 'fieldset',
                    title: 'Other Income',
                    itemId: 'OtherIncomeFirstSet',
                    //instructions: '<hr class="separate" />',
                    items: [
                        <Ext.field.ISelect>{
                            xtype: 'selectfield',
                            name: 'BorrowerPositionFirstSet',
                            label: 'Borrower Position',
                            store: 'BorrowerPositionSelectorStore',
                            //usePicker: false,
                            disabled: true,
                        },
                        <Ext.field.ISelect> {
                            xtype: 'selectfield',
                            name: 'IncomeTypeFirstSet',
                            label: 'Income Type',
                            store: 'IncomeTypeSelectorStore',
                            //usePicker: false,
                            disabled: true,
                        },
                        {
                            xtype: 'textfield',
                            name: 'DescriptionFirstSet',
                            label: 'Description',
                            disabled: true,
                        },
                        {
                            xtype: 'numberfield',
                            name: 'MonthlyAmountFirstSet',
                            label: 'Monthly Amount',
                            disabled: true,
                        },
                        <Ext.form.IField>{
                            xtype: 'field',
                            label: ' ',
                            //this is the html attribute I am talking about...
                            html: '<a href="#" onclick="event.preventDefault();App.app.getController(\'lead.leadsListController\').onClickDelete(this)" class="ta-textlink deleteLink">Delete</a><a href="#" onclick="event.preventDefault();App.app.getController(\'lead.leadsListController\').onClickEdit(this)" class="ta-textlink editLink">Edit</a>'
                        }
                    ]

正如你所看到的，调用函数位于 html 内部，我不想使用“parentNode”(这是纯 JavaScript)，因为我必须做这样的事情:

var parentRef = (ref.parentNode.parentNode.parentNode.....);

你会发现这简直就是垃圾!请 sencha 开发人员帮助我找到解决方案。如何通过其子项获取引用 itemId: 'OtherIncomeFirstSet'？

Answer 1

为什么不使用一个(或两个)按钮来实现此目的。听起来有点 CSS，按钮就可以解决问题。另外，您确实可以在 Controller 内使用它。 Fieldset 并不意味着您不能使用按钮。

提示:永远不要从外部调用 Controller 。

如果您确实必须使用字段和单击事件，请使用以下代码(不要忘记，这不是我的偏好，因为这可以用两个按钮在 ST 中很好地编写，真的!!!):

<Ext.form.IField>{
    xtype: 'field',
    label: ' ',
    //this is the html attribute I am talking about...
    html: '<a href="#" onclick="event.preventDefault(); ' +
        'Ext.Viewport.down('.form').fireEvent('delete') ' + // <<<< Here fire the event
        'class="ta-textlink deleteLink">' +
            'Delete' +
        '</a>' +
        '<a href="#" onclick="event.preventDefault(); ' +
        'Ext.Viewport.down('.form').fireEvent('edit') ' +  // <<<<< And here
        'class="ta-textlink editLink">' +
            'Edit' +
        '</a>'
}

以及 Controller 内部

config: {
    refs: {
        myView: '.myView', //Whatever the basic view is you created
        form: '.myview .form'
    },
    control: {
        form: {
            delete: 'onDelete',  // <<<< here you listen to the event
            edit: 'onEdit'
        }
    }
},

onDelete: function() {},
onEdit: function() {}