我对 ExtJs 控制器和查看按钮事件有疑问

Question

我对 ExtJs 控制器和视图事件有疑问！ 我试图通过 MVC 模型构建这些代码。 所以我尝试从 main.js 连接 controller.js，这是一个视图。 我将控制器、模型、存储在 application.js 中定义为静态的（我不确定这是正确的......）

但问题是运行 main.js 后我可以在网站上看到主视图。但是当我点击按钮发生事件时，什么也没发生。

我不知道我做错了什么。我尽可能多地检查拼写和上下文错误。但我找不到任何错误..

下面是我的代码。

应用程序.js

Ext.define('GridMvcApp.Application', {
    extend:'Ext.app.Application',

    name:'GridMvcApp',

    controllers:['AppController'],
    stores:[
        // TODO: add global / shared stores here
        'UserStore'
    ],
    models:[
        'UserModel'
    ],
    launch: function () {
        // TODO - Launch the application
    },

});

Main.js

Ext.define('GridMvcApp.view.main.Main', {
    extend: 'Ext.panel.Panel',
    alias:'widget.main',
    title:'Grid MVC',
    width:600,
    height:400,
    bodyPadding:'5 5 5 5',

    items:[{
        items:[{
            xtype:'fieldset',
            padding:'5 5 5 5',
            title:'lookup',
            width:'100%',
            layout:'hbox',

            items:[
            {
                xtype:'textfield',
                fieldLabel:'NICKNAME',
                labelAlign:'right',
                name:'nickname'
            }, {
                xtype:'tbspacer',
                flex:1
            },{
                xtype:'button',
                name:'btnSearch',
                text:'LOOKUP',
            }]
        }]
    }, {
            xtype:'tbspacer',
            height:10
            },
            {
            xtype:'grid',
            name:'gridUser',
            width:'100%',
            height:250,
            columnLines:true,
            columns:[
            {
                text:'NUBERING',
                xtype:'rownumberer',
                width:80,
            }, {
                text:'USERID',
                dataIndex:'userid',
                flex:2
            }, 
            {
                text:'NICKNAME',
                dataIndex:'nickname',
                flex:2
            },{
                text:'EMAIL',
                dataIndex:'email',
                flex:2
            }
         ]
    }],
});

AppController.js

Ext.define('GridMvcApp.controller.AppController',{

    extend:'Ext.app.Controller',
    refs:{
        nickname:'main textfield[name=nickname]',
        gridUser:'main grid[name=gridUser]'
    },
    control:{
        'Main button[name==btnSearch]':{
            click:'onSearch'
        },
        'Main grid[name=gridUser]':{
            afterrender:'onRender'
        }
    },

    onRender:function(){
        console.log('4');
        this.getGridUser().setStore(Ext.getStore('UserStore'));

    },
    onSearch:function(button,e,eOpts){
        var me=this;
        var nickname=this.getNickname().getValue();
        console.log('5', nickname),
        Ext.getStore('UserStore').load({
            params:{
                searchNickName:nickName
            },
            callback:me.onGetUserInfo
        });
    },
    onGetUserInfo:function(records,operation, success){
        if(success==true){
            console.log('success is true');
        }
        else{
            console.log('success is false');
            Ext.Msg.alert('error', this.getProxy().getReader().rawData.msg);
        }
    }

});

Answer 1

首先您需要为控制器提供别名。

Ext.define('GridMvcApp.controller.AppController',{
    extend:'Ext.app.Controller',

    //give alias name 
    alias: 'controller.gridMVCAppController',

    refs:{
        nickname:'main textfield[name=nickname]',
        gridUser:'main grid[name=gridUser]'
    },
    control:{
        'Main button[name==btnSearch]':{
            click:'onSearch'
        },
        'Main grid[name=gridUser]':{
            afterrender:'onRender'
        }
    },

    onRender:function(){
        console.log('4');
        this.getGridUser().setStore(Ext.getStore('UserStore'));

    },
    onSearch:function(button,e,eOpts){
        var me=this;
        var nickname=this.getNickname().getValue();
        console.log('5', nickname),
        Ext.getStore('UserStore').load({
            params:{
                searchNickName:nickName
            },
            callback:me.onGetUserInfo
        });
    },
    onGetUserInfo:function(records,operation, success){
        if(success==true){
            console.log('success is true');
        }
        else{
            console.log('success is false');
            Ext.Msg.alert('error', this.getProxy().getReader().rawData.msg);
        }
    }

});

那么你必须在视图文件中提供对应的控制器类名和别名，如下所示：

Ext.define('GridMvcApp.view.main.Main', {
    extend: 'Ext.panel.Panel',
    alias:'widget.main',
    title:'Grid MVC',
    width:600,
    height:400,
    bodyPadding:'5 5 5 5',

    //add the controller reference
    requires:[
        'GridMvcApp.controller.AppController'
    ],

    //alias name reference
    controller: 'gridMVCAppController',

    items:[{
        items:[{
            xtype:'fieldset',
            padding:'5 5 5 5',
            title:'lookup',
            width:'100%',
            layout:'hbox',

            items:[
            {
                xtype:'textfield',
                fieldLabel:'NICKNAME',
                labelAlign:'right',
                name:'nickname'
            }, {
                xtype:'tbspacer',
                flex:1
            },{
                xtype:'button',
                name:'btnSearch',
                text:'LOOKUP',
            }]
        }]
    }, {
            xtype:'tbspacer',
            height:10
            },
            {
            xtype:'grid',
            name:'gridUser',
            width:'100%',
            height:250,
            columnLines:true,
            columns:[
            {
                text:'NUBERING',
                xtype:'rownumberer',
                width:80,
            }, {
                text:'USERID',
                dataIndex:'userid',
                flex:2
            }, 
            {
                text:'NICKNAME',
                dataIndex:'nickname',
                flex:2
            },{
                text:'EMAIL',
                dataIndex:'email',
                flex:2
            }
         ]
    }],
});