2015-01-13 38 views
0

文件custom.js視圖中的事件偵聽器錯誤。

Ext.define('BookApp.view.Customs', { 
    extend: 'Ext.container.Container', 
requires:['BookApp.controller.MainController'], 
    xtype: 'customs', 

    controller: 'main', 
    viewModel: { 
     type: 'main' 
    }, 

    layout: { 
     type: 'border' 
    }, 

    items: [{ 
     xtype: 'panel', 
     bind: { 
      title: '{name}' 
     }, 
     region: 'west', 
     html: '<ul>...</ul>', 
     width: 250, 
     split: true, 
     tbar: [{ 
      text: 'Button', 
      handler: 'onClickButton' 
     }] 
    },{ 
     region: 'center', 
     xtype: 'tabpanel', 
     items:[{ 
      title: 'Tab 1', 
      html: '<h2>Content ...</h2>' 
     }] 
    }] 
}); 

我控制器MainController

Ext.define('BookApp.controller.MainController', { 
extend: 'Ext.app.Controller', 

    requires: [ 
     'Ext.MessageBox' 
    ], 
//alias!!!! 
    alias: 'controller.main', 

    onClickButton: function() { 
     Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this); 
    }, 

    onConfirm: function (choice) { 
     if (choice === 'yes') { 
      console.log('ALALA') 
     } 
    } 
}); 

但是當我點擊鏈接與地產:

tbar: [{ 
       text: 'Button', 
       handler: 'onClickButton' 
      }] 

錯誤: 遺漏的類型錯誤:未定義不功能

+0

我剛剛運行了Sencha cmd應用程序生成的這段代碼,它工作正常,我可以看到的唯一區別從示例代碼和你的(除了應用程序名稱)是主控制器名稱的變化。 ExtJs的加載程序遵循特定的加載文件的命名約定,因此您的控制器可能無法正確加載,這將解釋您收到的錯誤。如果你想命名你的文件Custom.js,你應該重命名類名和所有對它的引用。請參見[Ext.Loader](http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.Loader) – Scriptable

回答

1

看一看http://docs.sencha.com/extjs/5.0/application_architecture/view_controllers.html

所有錯了是你延長Ext.app.Controller代替Ext.app.ViewController

這裏被排除viewModel結合

//app.js 
Ext.application({ 
    name: 'BookApp', 
    launch: function() { 
     Ext.create('BookApp.view.Customs', { 
      fullscreen: true 
     }); 
    } 
}); 

.... 
controller/MainController.js 
Ext.define('BookApp.controller.MainController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.main', 

    onClickButton: function() { 
     Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this); 
    }, 

    onConfirm: function(choice) { 
     if (choice === 'yes') { 
      console.log('ALALA'); 
     } 
    } 
}); 

..... 
view/view.Customs.js 
Ext.define('BookApp.view.Customs', { 
    extend: 'Ext.container.Container', 
    xtype: 'customs', 
    controller: 'main', 
    renderTo: Ext.getBody(), 

    items: [{ 
     xtype: 'panel', 
     title: 'testPanel', 
     region: 'west', 
     html: '<ul>...</ul>', 
     width: 250, 
     split: true, 
     tbar: [{ 
      text: 'Button', 
      handler: 'onClickButton' 
     }] 
    }, { 
     region: 'center', 
     xtype: 'tabpanel', 
     items: [{ 
      title: 'Tab 1', 
      html: '<h2>Content ...</h2>' 
     }] 
    }] 
}); 

演示略微簡化版本:https://fiddle.sencha.com/#fiddle/gdu