获取自动实例化的Sencha Touch 2视图 [英] Getting a refernce to an auto-instantiated Sencha Touch 2 view

问题描述

我想从我的Sencha Touch 2控制器（CoffeeScript）中获得我的观点：

  Ext.define'MyApp.view.Books'，
 extends：'Ext.Panel'
 id：'books'
 config：
 html：'你好，书！'
 Ext.define'MyApp.controller.Books'，
 extends：'Ext.app.Controller'
 views：[
'Books'
] 
 init： - > 
 @control 
'#books'：
呈现： - > 
 console.log'这从来没有被调用过。为什么？'
显示： - > 
 console.log'这是两次调用'
＃@getBooksView（）不是一个视图实例，它是一个类。为什么？ 
 console.log'查看类：'+ @getBooksView（）？$ isClass 
 Ext.application 
名称：'MyApp'
控制器：[
'图书'
] 
 launch： - > 
 Ext.Viewport.setActiveItem 
 xtype：'booksview'
  

'Hello ，出现书籍内容（例如，组件被渲染），但渲染控制处理程序从不被调用。我在这里做错了什么？

解决方案

你不会使用硬编码的 id 为任何类！你应该把你的看法作为：

  Ext.define（'MyApp.view.Books'，{
 extends ：'Ext.Panel'，
 alias：'widget.books'，
 config：{
 html：'Hello，Books！'
}，
 initialize： function（）{
 // some init code etc .. 
 this.callParent（）; 
} 
}）; 
  

注意别名属性。这有助于您获得视图实例的引用。当你引用视图。现在在你的控制器你有：

  ... 
 this.control（{
'books' ：{
 render：function（）{
 console.log（'Render method called！'）; 
}，
显示：function（）{
控制台。 log（'Show method called！'）; 
} 
 
}，
。
 ... 
  pre> 
 
 
请注意，您不是通过id属性引用您的视图，而是通过其别名或xtype引用您的视图。现在，如果您需要访问其他控制器的视图或任何其他组件在控制器中，您还可以使用可用的参考系统，在这种情况下，您将在控制器定义中定义refs数组：
 code> refs：[
 {ref：'centerPane'，selector：'centerpane'} 
]，
  
这里的selector属性是传递给 Ext.ComponentQuery 的值来获取组件，所以你可以得到实例o f centerpane by：
  this.getCenterPane（）; 
  
 
I'd like to get a reference to my view from my Sencha Touch 2 controller, which looks like this (CoffeeScript):
Ext.define 'MyApp.view.Books',
    extend: 'Ext.Panel'
    id: 'books'
    config:
        html: 'Hello, Books!'
Ext.define 'MyApp.controller.Books',
    extend: 'Ext.app.Controller'
    views: [
        'Books'
    ]
    init: ->
        @control
            '#books':
                render: ->
                    console.log 'This is never called. Why?'
                show: ->
                    console.log 'This is called twice.'
                    # @getBooksView() is not a view instance, it is a class. Why?
                    console.log 'View class: ' + @getBooksView()?.$isClass
Ext.application
    name: 'MyApp'
    controllers: [
        'Books'
    ]
    launch: ->
        Ext.Viewport.setActiveItem
            xtype: 'booksview'
The 'Hello, Books' content appears (e.g. the component is rendered), but the render control handler is never even called. What am I doing wrong here?
解决方案
You shouln't use hardcoded id for any of the classes!  You should be codding your view as:
Ext.define('MyApp.view.Books',{
    extend: 'Ext.Panel',
    alias : 'widget.books',
    config: {
        html: 'Hello, Books!'
    },
    initialize : function() {   
        // some init code etc..
        this.callParent();  
    }
});
Note the alias property. This helps you to get the reference of your view's instances. When you refer the view. Now in your controller you have:
...
this.control({
    'books' : {    
        render: function() {
            console.log('Render method called!');
        },
        show: function() {
            console.log('Show method called!');
        }

    },
    .
    ...
Note that you are not refering your view with the id property, instead through its alias or xtype. Now, if you need to access other controller's views or any other component in your controller, you can also make use of the refs system available. In this case, you will define the refs array in the controller definition as:
refs: [
    {ref: 'centerPane', selector: 'centerpane'}
],
Here the selector property is the value passed to Ext.ComponentQuery to get the component. So, you can get the instance of centerpane by:
this.getCenterPane();


                        
这篇关于获取自动实例化的Sencha Touch 2视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！