如何在extjs中使用边框布局

我有以下代码，我希望打开的窗口使用

Ext.layout.BorderLayout

，并且在窗口的左侧有

Ext.tree.TreePanel

。。。我试过了，但是当我使用

BorderLayout

时，页面没有打开？有人能帮我吗

Ext.onReady（函数（）{
var window=Ext.create（'Ext.window'{
标题：“你好”，
身高：100，
宽度：100
});
window.show（）；
})

这是一个显示带有边框布局的窗口。仅仅添加

layout:'border'

是不够的，您必须将面板添加到布局容器中，并正确配置布局区域

例如：

这是一个显示带有边框布局的窗口。仅仅添加

layout:'border'

是不够的，您必须将面板添加到布局容器中，并正确配置布局区域

例如：

---

对bmoeskau的回答有一些补充。我建议您不要使用JavaScript保留字，如window、document、number等。

在bmoeskau的答案中添加一些内容。我建议您不要使用JavaScript保留字，如window、document、number等。

只需为您的窗口设置一个

边框

布局，并为直接子窗口设置

区域。每个子项都有自己的布局和子项


Ext.onReady（函数（）{
var treeStore=Ext.create（'Ext.data.treeStore'{
根目录：{
对,，
儿童：[{
文字：“醒来”，
叶：是的
}, {
文字：“开始工作”，
对,，
儿童：[{
文字：“吃午餐”，
叶：是的
}, {
文本：“完成报告”，
叶：是的
}]
}, {
文字：“去睡觉”，
叶：是的
}]
}
});
var myWindow=Ext.create（'Ext.Window'{
标题：“你好，世界”，
宽度：480，
身高：220，
布局：“边框”，
项目：[{
布局：“适合”，
地区：'西部'，
标题：“任务”，
宽度：180，
斯普利特：是的，
可折叠的：是的，
浮动：错误，
项目：[{
xtype:'树面板'，
商店：treeStore，
rootVisible:false，
}]
}, {
布局：“适合”，
地区：'中心'，
项目：[{
xtype:'textarea'，
值：new Lorem（）.createText（6，Lorem.TYPE.句子），
弹性：1
}]
}]
});
myWindow.show（）；
})
只需为您的窗口设置一个
边框
布局，并为直接子窗口设置
区域
s即可。每个子项都有自己的布局和子项


Ext.onReady（函数（）{
var treeStore=Ext.create（'Ext.data.treeStore'{
根目录：{
对,，
儿童：[{
文字：“醒来”，
叶：是的
}, {
文字：“开始工作”，
对,，
儿童：[{
文字：“吃午餐”，
叶：是的
}, {
文本：“完成报告”，
叶：是的
}]
}, {
文字：“去睡觉”，
叶：是的
}]
}
});
var myWindow=Ext.create（'Ext.Window'{
标题：“你好，世界”，
宽度：480，
身高：220，
布局：“边框”，
项目：[{
布局：“适合”，
地区：'西部'，
标题：“任务”，
宽度：180，
斯普利特：是的，
可折叠的：是的，
浮动：错误，
项目：[{
xtype:'树面板'，
商店：treeStore，
rootVisible:false，
}]
}, {
布局：“适合”，
地区：'中心'，
项目：[{
xtype:'textarea'，
值：new Lorem（）.createText（6，Lorem.TYPE.句子），
弹性：1
}]
}]
});
myWindow.show（）；
})

哪里没有使用BorderLayout创建代码？你是否在窗口中放置了区域为“中心”的项目。。。因为这对于边框布局是必需的…如果我使用此语句而不是上面的窗口代码，则不会。>>window=new Ext.window（{layout:'border'}）.show（），这不起任何作用？哪里没有使用BorderLayout编写代码？你是否在窗口中放置了区域为“中心”的项目。。。因为这对于边框布局是必需的…如果我使用此语句而不是上面的窗口代码，则不会。>>window=new Ext.window（{layout:'border}）.show（），这没有任何作用？当我尝试此代码时，它在项目上给出了一个错误：cdn.sencha.io/Ext-4.0.2a/Ext-all.js“>Ext.onReady（function（）{var window=Ext.create（'Ext.window'），{title:'Hello'，width:100，height:100，layout:'border'，items:[{region:'west'，title:'Sidebar'，width:200，split:true，collapsable:true，floatable:false}，{region:'center'，html:'Some content'}]}；}）当我尝试以下代码时，在项目上出现错误：cdn.sencha.io/ext-4.0.2a/ext-all.js“>ext.onReady（function（）{var window=ext.create（'ext.window'），{title:'Hello'，width:100，height:100，layout:'border'，items:[{region:'west'，title:'Sidebar'，width:200，split:true，collapsable:true，floatable:false}，{region:'center'，html:'Some content'}]}）；}）
        var window = Ext.create('Ext.Window', {
            title: 'Hello',
            width: 100,
            height: 100,
            layout: 'border',
            items: [{
                region: 'west',
                title: 'Sidebar',
                width: 200,
                split: true,
                collapsible: true,
                floatable: false
            }, {
                region: 'center',
                html: 'Some content'
            }]
        });