我有一个关于ExtJs控制器和视图按钮事件的问题。

Question

我有一个关于ExtJs控制器和视图事件的问题！我试图通过MVC模型来构建这个代码，所以我试图从main.js连接控制器.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
            }
         ]
    }],
});