Extjs6.2 现代工具包 - 扩展文本框

Question

我仍在学习 EXTJ，我尝试做的一件事是扩展一个组件。下面是我的例子：

Ext.define('MyApp.view.CustomTextField',{
extend: 'Ext.field.Text',
xtype: 'customtextfield',

config:
{
    fieldID: null,
    langID: null
},
initialize: function() {
    alert("init"); //1. called before I navigate to view
     Call a controller method here
    this.callParent(arguments);
},
initComponent: function () {
    alert("initComp"); //2. not called at all
    Call a controller method here
    this.callParent(arguments);

}

我想调用控制器方法来验证用户是否有权查看此字段并相应地执行下一步操作。我希望在导航到视图时进行此验证
我在视图中将此自定义字段用作：

xtype: 'fieldset',
        margin: 10,
        bind: '{workOrders}',
        title: 'Dispatch Information',
        items: [
            {   
                id: 'Tag',
                xtype: 'customtextfield',
                name: 'Tag',
                label: 'Tag',
                bind: '{Tag}',
                labelAlign: 'top'
            },

但是 initComponent 从未被触发。初始化被触发到很快，甚至在我的商店加载之前。如何正确扩展此控件？

Answer 1

在现代 ExtJS 6 中，textfield 没有 initComponent 事件。 initComponent 活动有 textfield.

经典

要在 controller 中调用事件，您需要创建 controller 并为您定义 view。

在此FIDDLE, I have created a demo using form, ViewController, textfield and ViewModel。我希望这会 help/guide 你达到你的要求。

更多细节请参考ExtJS Docs.

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        //Define the cutsometext from extending {Ext.field.Text}
        Ext.define('CustomText', {
            extend: 'Ext.field.Text',
            xtype: 'customtext',
            labelAlign: 'top',
            listeners: {
                initialize: 'onInitializeCutsomText'
            }
        });

        Ext.define('FormModel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.formmodel',

            data: {
                user: {
                    firstName: 'Narendra',
                    lastName: 'Jadhav',
                    email: 'narendrajadhav105@gmail.com'
                },
                permissionCng: {
                    firstName: false,
                    lastName: false,
                    email: true,
                    isAdmin: false
                }
            }

        });
        //Define the FormController from extending {Ext.app.ViewController}
        Ext.define('FormController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.formctn',

            onInitializeCutsomText: function (textfield) {
                var permissionCng = this.getViewModel().get('permissionCng');
                // Here is just basic example for disabled textfield on initialize event.
                //In your case you can put your requirement.
                textfield.setDisabled(permissionCng[textfield.getName()]);
            }
        });

        //Creating form
        Ext.create('Ext.form.Panel', {
            fullscreen: true,
            viewModel: {
                type: 'formmodel'
            },
            controller: 'formctn',
            items: [{
                xtype: 'fieldset',
                title: 'Personal Info',
                defaults: {
                    xtype: 'customtext' //Here I am using {customtext}
                },
                items: [{
                    label: 'First Name',
                    name: 'firstName',
                    bind: {
                        value: '{user.firstName}',
                        //You can also use like property
                        //hidden:'{permissionCng.firstName}'
                    }
                }, {
                    label: 'Last Name',
                    name: 'lastName',
                    bind: {
                        value: '{user.lastName}',
                        //You can also use like property
                        //hidden:'{permissionCng.firstName}'
                    }
                }, {
                    label: 'Email Id',
                    name: 'email',
                    bind: {
                        value: '{user.email}',
                        //You can also use like property
                        //hidden:'{permissionCng.firstName}'
                    }
                }, {
                    label: 'Admin Name',
                    name: 'isAdmin',
                    bind: {
                        value: '{user.isAdmin}',
                        //You can also use like property
                        hidden: '{!permissionCng.isAdmin}'
                    }
                }]
            }]
        });
    }
});

Extjs6.2 现代工具包 - 扩展文本框

Extjs6.2 Modern toolkit- Extend a textbox

extjs

extjs6-modern

extjs6.2