Sencha Touch 2 在 Controller 中设置标签

Posted 2023-02-26

【中文标题】Sencha Touch 2 在 Controller 中设置标签

【英文标题】：Sencha Touch 2 set label in Controller

【发布时间】：2012-05-21 03:22:31

【问题描述】：

我是 Sencha Touch 2 的 MVC 结构的新手。

在我看来，我的标签如下：

xtype：'标签'， itemId: '标题', html: '标题'

在我的控制器中，如何设置这个标签的值？

目前我的控制器（正在编写教程示例）：

Ext.define("NotesApp.controller.Notes",

extend: "Ext.app.Controller",
config: 
    refs: 
        // We're going to lookup our views by xtype.
        noteView: "noteview",
        noteEditorView: "noteeditorview",
        notesList: "#notesList"
    ,
    control: 
        noteView: 
            // The commands fired by the notes list container.
            noteNextCommand: "onNoteNextCommand",
            noteAnswerCommand: "onNoteAnswerCommand"
        ,
        noteEditorView: 
            // The commands fired by the note editor.
            saveNoteCommand: "onSaveNoteCommand",
            deleteNoteCommand: "onDeleteNoteCommand",
            backToHomeCommand: "onBackToHomeCommand"
        

    
,

onNoteNextCommand: function () 
       var noteView = this.getNoteView();           
       console.log("loaded view"); 
       //set label here                  
,
// Base Class functions.
launch: function () 
    this.callParent(arguments);
    var notesStore = Ext.getStore("Notes");
    notesStore.load();
    console.log("launch");
,
init: function () 
    this.callParent(arguments);
    console.log("init");
 );

完整的查看代码：

Ext.define("NotesApp.view.Note", 扩展：“Ext.Container”， 别名：“widget.noteview”，

config: 
    layout: 
        type: 'fit'
    ,
    items: [
            
            xtype: "toolbar",
            title: "Random Question",
            docked: "top",
            items: [
                     xtype: 'spacer' ,
                    
                        xtype: "button",
                        text: 'List',
                        ui: 'action',
                        itemId: "list"
                    
                    ]
            ,
                            
                    xtype: "label",
                    html: 'question',                        
                    itemId: "question"                        
            ,
                            
                    xtype: "label",
                    html: 'answer',                        
                    itemId: "answer"                        
            
            ],
    listeners: [
                delegate: "#list",
                event: "tap",
                fn: "onListTap"
                , 
                
                delegate: "#question",
                event: "tap",
                fn: "onQuestionTap"
                ,
                
                delegate: "#answer",
                event: "tap",
                fn: "onAnswerTap"
                ]
,    
onListTap: function () 
    console.log("list");
    this.fireEvent("showList", this);
,
onQuestionTap: function () 
    console.log("noteAnswer");
    this.fireEvent('noteAnswer', this);
,
onAnswerTap: function () 
    console.log("noteNext");
    this.fireEvent('noteNext', this);
 );

【问题讨论】：

可能还需要查看控制器的代码

我添加了控制器代码。谢谢！

基本上我希望答案标签在点击问题标签时显示答案

【参考方案1】：

您需要在控制器中添加对标签的引用：

config: 
  refs: 
    yourlabel : #YOUR_LABEL_ID'
  
  …

然后在你的控制器中你可以通过调用this.getYourlabel();来访问标签

所以，为了改变标题，你需要做（在你的控制器中的任何地方）

this.getYourlabel().setHtml('Label');

希望对你有帮助

【参考方案2】：

给你的标签一些id属性值

                
  xtype: "label",
  html: 'answer',                        
  id: "answerLabel"                        

然后在您的controller 中写入以下代码。

.....
..... // Controller code ..
refs: 
     answerLabel: '#answerLabel',
    ,
control: 
     answerLabel: 
       tap: 'answerLabelFn'
     

.....
.....
answerLabelFn : function() 
      // Your Label tap handler code...