Javascript ExtJS：如何使组件在其父容器内最大化？

基本上我想要的是，使用一些可以最大化的组件来占据它的父组件。 因此，我在

Ext.panel.panel

（panel）中使用

Ext.window.window

（window）组件，我可以在多行窗口中以某种方式复制该组件。窗口必须使用

Xtemplate
以
Ext.view.view
（数据视图）呈现

Window具有名为
tpl
的属性，但我认为，Window不像其他组件那样具有store属性，而是具有data属性。

这里是

那么如何使用Xtemplate for window中的存储来加载数据呢？

另一个问题：当我试图使用
initComponent（）
在窗口对象内部启动组件时，它总是在控制台（chrome）中抛出错误：

面板

Ext.create('Ext.panel.Panel', {
    id: 'panel-id',
    itemId: 'panel-id',
    height: 600,
    width: 600,
    resizable: true,
    border: true,
    layout: 'vbox',
    renderTo: Ext.getBody()
});  

模板

var tpl= new Ext.XTemplate(
  '<div>My name is <b>{name}</b></div>'
);

Ext.create("Ext.window.Window", {
        width: 600,
        maximizable: true,
        constrain: true,
        resizable: false,
        constrainHeader: true,
        constrainTo: 'panel-id',
        renderTo: 'panel-id',
        autoShow: true,
        initComponent: function()
        {
            this.tpl= tpl;
            this.data= {"name":"agpt"};
            this.callParent(arguments);
        }
    });

所以，如果我提到
initComponent（）
在窗口内部，我完全不明白为什么window没有在面板内部进行渲染。感谢诸如此类的事情：

var store = new Ext.data.Store({
    fields: {name: 'name', type:'string'},
    data: [
        {name: "Foo"},
        {name: "bar"}
    ]
});

看来你正试图实现这样的目标：

var items = [];

store.each(function(record) {
    items.push({
        xtype: 'component'
        ,tpl: "<div>My name is <b>{name}</b></div>"
        ,data: record
    });
});

var panel = new Ext.panel.Panel({
    renderTo: Ext.getBody(),
    title: "Panel with components",
    height: 200,
    width: 600,
    resizable: true,
    border: true,
    layout: 'vbox',
    items: items
});

或者使用
Ext.override
覆盖实例的方法（同时通过Ext连接该方法以使
callParent
工作）：

呃。。。事实上，第二种方法不起作用，因为
initComponent
将在
newext.Window（…）
之后被调用

另一种选择是不要依赖于
callParent
，而是自己布线：

Ext.create('Ext.window.Window', {
    // ...
    initComponent: function() {
        this.tpl= view;
        this.data= {"name":"agpt"};
        //this.callParent(arguments);
        Ext.window.Window.prototype.initComponent.apply(this, arguments);
    }
});

顺便说一下，我建议不要使用
Ext.create
，而是使用
new
关键字。它使缺少的
要求在开发模式下立即可见

编辑：可在父面板中最大化

Ext.create('Ext.panel.Panel', {
    id: 'panel-id',
    itemId: 'panel-id',
    height: 600,
    width: 600,
    resizable: true,
    border: true,
    layout: 'vbox',
    renderTo: Ext.getBody()
});  

如果我没有弄错您的评论，那么您希望您的子组件在其父组件内最大化（而不是在整个浏览器窗口中最大化）。据我所知，没有任何内置的Ext可以提供这样的功能；所以你必须自己实施这样的行为

第一个想法是使用该方法在
vbox
和
fit
之间交换布局。不幸的是，正如文件中强调的那样：

注意：组件呈现到DOM后，此方法不能用于更改布局的“类型”。

不走运。所以你必须做一些复杂的事情。在我看来，你应该给你的父面板一张
卡片
布局，并在里面放两个容器：一个是盒子布局，另一个是合适的布局。要“最大化”子组件，请将其从长方体布局容器移动到fit容器，然后将卡切换到后者。要从最大化还原，请将子组件放回其原始位置，然后将卡切换回box容器

下面是一些示例代码（和另一个）：

var store=new Ext.data.store({
字段：{name:'name'，type:'string'}，
数据：[
{name:“Foo”}，
{name:“bar”}
]
});
var项目=[]；
存储。每个功能（记录）{
推({
xtype:“面板”
，tpl:“我的名字是{name}”
，数据：记录
，工具：[{
类型：“最大化”
，handler:function（t）{
这个。disable（）；
this.up（）.down（'tool[type=restore]'）.enable（）；
var rootPanel=this.up（“#rootPanel”），
fitCt=rootPanel.down（“#fitCt”），
panel=此.up（“panel”）；
panel.lastIndex=panel.ownerCt.items.indexOf（panel）；
增补（面板）；
rootPanel.getLayout（）.setActiveItem（fitCt）；
}
},{
类型：“还原”
，disabled:true
，handler:function（）{
这个。disable（）；
this.up（）.down（'tool[type=maximize]'）.enable（）；
var rootPanel=this.up（“#rootPanel”），
listCt=rootPanel.down（“#listCt”），
panel=此.up（“panel”）；
listCt.insert（panel.lastIndex，panel）；
rootPanel.getLayout（）.setActiveItem（listCt）；
}
}]
});
});
变量面板=新的Ext.panel.panel({
renderTo:Ext.getBody（），
标题：“带组件的面板”，
itemId:'根面板'，
身高：200，
宽度：600，
可调整大小：正确，
边界：是的，
布局：“卡片”，
项目：[{
xtype:'容器'，
itemId:'listCt'，
布局：{
键入：“vbox”，
对齐：“拉伸”
},
默认值：{
保证金：5
},        
项目：项目
},{
xtype:'容器'，
itemId:'fitCt'，
布局：“适合”，
项目：[]
}]
});
只是一个想法，我想为
renderTo
选项尝试其他方法。我不认为这是意料之中的。你能试试Ext.ComponenentManager.query（'panel[itemId=panel id]'）.getEl（）
？@FrancisDucharme-ah。。还是一样的问题。。仅供参考，我使用了
renderTo:Ext.ComponenentManager.get（'panel-id'）.getEl（）
，因为我认为ComponentManager没有任何名为query的方法。至于错误，我认为它与
视图的定义有关。什么是
视图
？这通常来自重写
initComponent
但不调用
callParent（）
的组件。对不起，对于我第一次回复中的输入错误，我的意思是：@FrancisDucharme
view
is
XTemplate
。。对不起，我刚刚更新了问题。如果您愿意，请随意更改问题中的小提琴。谢谢你这么精彩的解释，问题是，我需要一些组件，它应该以这样的方式扩展/最大化，它应该占据父组件，这就是为什么我选择它
Ext.define('My.Window', {
    extend: 'Ext.window.Window'
    // ...
    initComponent: function() {
        this.tpl= view;
        this.data= {"name":"agpt"};
        this.callParent(arguments);
    }
});

var win = new My.Window( ... );

var win = new Ext.Window( ... );
Ext.override(win, {
    initComponent: function() {
        this.tpl= view;
        this.data= {"name":"agpt"};
        this.callParent(arguments);
    }
});

Ext.create('Ext.window.Window', {
    // ...
    initComponent: function() {
        this.tpl= view;
        this.data= {"name":"agpt"};
        //this.callParent(arguments);
        Ext.window.Window.prototype.initComponent.apply(this, arguments);
    }
});

var store = new Ext.data.Store({
    fields: {name: 'name', type:'string'},
    data: [
        {name: "Foo"},
        {name: "bar"}
    ]
});

var items = [];

store.each(function(record) {
    items.push({
        xtype: 'panel'
        ,tpl: "<div>My name is <b>{name}</b></div>"
        ,data: record
        ,tools: [{
            type: 'maximize'
            ,handler: function(t) {
                this.disable();
                this.up().down('tool[type=restore]').enable();

                var rootPanel = this.up('#rootPanel'),
                    fitCt = rootPanel.down('#fitCt'),
                    panel = this.up('panel');
                panel.lastIndex = panel.ownerCt.items.indexOf(panel);
                fitCt.add(panel);
                rootPanel.getLayout().setActiveItem(fitCt);
            }
        },{
            type: 'restore'
            ,disabled: true
            ,handler: function() {
                this.disable();
                this.up().down('tool[type=maximize]').enable();

                var rootPanel = this.up('#rootPanel'),
                    listCt = rootPanel.down('#listCt'),
                    panel = this.up('panel');
                listCt.insert(panel.lastIndex, panel);
                rootPanel.getLayout().setActiveItem(listCt);
            }
        }]
    });
});

var panel = new Ext.panel.Panel({
    renderTo: Ext.getBody(),
    title: "Panel with components",
    itemId: 'rootPanel',
    height: 200,
    width: 600,
    resizable: true,
    border: true,
    layout: 'card',
    items: [{
        xtype: 'container',
        itemId: 'listCt',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        defaults: {
            margin: 5
        },        
        items: items
    },{
        xtype: 'container',
        itemId: 'fitCt',
        layout: 'fit',
        items: []
    }]
});