How to add links to modal window in ExtJs

Question

I am trying to create a list of links from a data store, and then use an XTemplate to loop through and display all the links in the data store. I am trying to display the links in a modal window. This is my code:

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);

There are no errors in console, but the links never load. It just shows my modal window and my textbox, but no links. I would put in in a jsfiddle, but I don't know how (I'm new to ExtJs).

How can I display a list of links in this modal window?

Answer 1

1. You should not define renderTo in you panel config. Component defined in items array will be rendered to parent component automatically.
2. Your window have two items so you can not use fit layout. This layout can be used only if component have only one child component. You can remove layout definition and Ext JS framework will use auto layout or you can use some layout which support more child items, like hbox , vbox , etc.

Your code should look like this:

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
        }
    ]
});

Also you should consider using textfield component instead of creating textfield by using component with autoEl config.