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

您不应在renderTo配置中定义panel。 items数组中定义的组件将自动呈现给父组件。
您的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来创建文本字段。

如何在ExtJs中添加指向模态窗口的链接

1 个答案: