如何在sencha touch中使用html id答案

【问题标题】：How to use the html id in sencha touch如何在sencha touch中使用html id
【发布时间】：2014-05-27 16:27:19
【问题描述】：

我是煎茶触摸的新手。我正在创建一个使用 html 的应用程序。单击该范围时，应调用控制器中的函数。我已经附上了这个问题的视图和控制器。

查看

Ext.define('SlideNav.view.Viewport', {
                extend: 'Ext.Container',
                xtype: 'app_viewport',
                requires: [
                'Ext.TitleBar'
                ],
                config: {
                                fullscreen: true,
                                layout: 'hbox',
                                items : [
                                {
                                        docked: 'top',
                                        xtype: 'panel',
                                        height: 40,
                                        style:'background:white ;height:40px;color:black',
                                        items:[
                                                {
                                                    html:'<div><span style="padding:10px;position:absolute" id="TopNews">Top News</span><span style="padding:13px;position:absolute;right:10px;font-size:12px">MORE</span></div>'
                                                }
                                                ],

                                        listeners: {
                                        initialize:function(){
                                            this.fireEvent('onPopulateDashBoardData', this);
                                        }
                                    /*  tap: {
                                            fn: function(event, el){ console.log("tapped!");

                                            this.fireEvent('onPopulateDashBoardData', this);

                                            },
                                            element: 'element',
                                            delegate: '#TopNews'
                                            }*/
                                }

                                },
                                {
                                                xtype : 'main',
                                                cls: 'slide',
                                                // Needed to fit the whole content
                                                width: '100%'                                               
                                }, {
                                                xtype : 'navigation',
                                                width : 250
                                }]
                }
});

controller.js

Ext.define('SlideNav.controller.App',{
                extend: 'Ext.app.Controller',    
                config:{
                                refs:{
                                                app_viewport: 'app_viewport',
                                                main : 'main',
                                                navigation : 'navigation',
                                                navBtn : 'button[name="nav_btn"]',

                                },

                                control : {

                                            app_viewport:{
                                                    onPopulateDashBoardData:'toggleNav'

                                                },
                                                navBtn : {
                                                                tap : 'toggleNav'
                                                },

                                                navigation : {
                                                                itemtap : function(list, index, target, record){
                                                                                this.toggleNav();
                                                                                console.log(record);
                                                                                alert(record._data.title);
                                                                }
                                                }
                                }
                },

                /**
                 * Toggle the slide navogation view
                 */
                toggleNav : function(){
                                var me = this,
                                mainEl = me.getMain().element;
                                console.log('hai');
                                if (mainEl.hasCls('out')) {
                                                mainEl.removeCls('out').addCls('in'); 
                                                me.getMain().setMasked(false);
                                } else {
                                                mainEl.removeCls('in').addCls('out');  
                                                me.getMain().setMasked(true);
                                }
                }
});

在上面的问题中，我想点击一个 id 为 TopNews 的文本，并想在控制器中调用一个函数 toggleNav。我试图触发一个名为 onPopulateDashBoardData 的事件，并尝试在控制器中使用该事件。但它也不起作用。你应该知道什么。

【问题讨论】：

标签： sencha-touch

【解决方案1】：

您引用文本的方式是错误的。

这样做：-

 items:[{
        name: 'top_news', // add this name for referring
        html:'<div><span style="padding:10px;position:absolute" id="TopNews">Top News</span><span style="padding:13px;position:absolute;right:10px;font-size:12px">MORE</span></div>'
     }]

控制器：-

refs:{
    menu: container[name='top_news']
},
control : {
      menu : {
         initialize: function(container) {
                    container.element.on({
                        tap: 'toggleNav',
                        scope: this,
                        delegate: '#TopNews'
                    });
                }
          }
}

【讨论】：