如何在ExtJs中添加鏈接到模態窗口

Question

我想從數據存儲創建鏈接列表，然後使用XTemplate循環顯示數據存儲中的所有鏈接。我試圖在模態窗口中顯示鏈接。這是我的代碼：

var win; 

var tpl = new Ext.XTemplate("<p>Field1: {f1}, Field2: {f2} </p>").compile(); 
var data = { 
    f1: 'a', 
    f2: null 
}; 

if(!win){ 
    win = new Ext.Window({ 
     el:'hello-win', 
     layout:'fit', 
     width:500, 
     height:300, 
     closeAction:'hide', 
     plain: true, 

     items: [ 
      { 
       xtype: 'component', 
       autoEl: { 
        html: '<input type="text">' 
       }, 
       listeners: { 
        render: function(_component) { 
         _component.getEl().on('keyup', function(e) { 
          //console.log(this); 
          console.log(this.dom.childNodes[0].value); 
         }); 
        } 
       } 
      }, 
      { 
       xtype: 'panel', 
       title: 'test', 
       height: 100, 
       bodyPadding: 10, 
       tpl: tpl, 
       data: data, 
       renderTo: Ext.get('hello-win') 
      } 
     ] 
    }); 
} 
win.show(this); 

在控制檯中沒有錯誤，但鏈接從未加載。它只是顯示我的模式窗口和我的文本框，但沒有鏈接。我會加入一個jsfiddle，但我不知道如何（我是ExtJs的新手）。

如何在此模式窗口中顯示鏈接列表？

Answer 1

1. 您不應該在您的panel config中定義renderTo。在items數組中定義的組件將自動呈現給父組件。
2. 您的window有兩個項目，因此您不能使用fit佈局。只有組件只有一個子組件時，才能使用此佈局。您可以刪除佈局定義和Ext JS的框架將使用auto佈局，或者你可以使用一些佈局，支持更多的子項，如hbox，vbox等

您的代碼應該是這樣的：

var win = new Ext.Window({ 
    width:500, 
    height:300, 
    closeAction:'hide', 
    plain: true, 
    items: [ 
     { 
      xtype: 'textfield', 
      enableKeyEvents: true, 
      listeners: { 
       keyup: function(c) { 
        console.log(c.getValue());      
       } 
      } 
     }, 
     { 
      xtype: 'panel', 
      title: 'test', 
      height: 100, 
      bodyPadding: 10, 
      tpl: tpl, 
      data: data 
     } 
    ] 
}); 

另外，您應該考慮使用textfield組件，而不是使用component和autoEl配置文件創建文本框。