我想GridPanel在一个更大的布局中包含一个ExtJS ,而这个布局又必须在一些我无法控制的预先存在的HTML中的特定div中呈现.
从我的实验中可以看出,GridPanel只有当它在一个范围内时才能正确调整自身Viewport.例如,使用此代码GridPanel自动调整大小:
new Ext.Viewport(
{
layout: 'anchor',
items: [
{
xtype: 'panel',
title: 'foo',
layout: 'fit', items: [
{
xtype: 'grid',
// define the grid here...
但如果我用下面的行替换前三行,则不会:
new Ext.Panel(
{
layout: 'anchor',
renderTo: 'RenderUntoThisDiv',
麻烦的是,Viewport总是直接渲染到HTML文档的主体,我需要在特定的div中渲染.
如果有一种方法可以GridPanel正确地调整自身大小,尽管没有被包含在中ViewPort,这将是理想的.如果没有,如果我可以Viewport在div中渲染元素,我就可以了.我的所有ExtJS对象都可以包含在同一个div中.
有没有人知道如何让GridPanel正确调整自身大小,但仍然包含在一些非ExtJS生成的HTML中？
Jon*_*ian 15
要在Ext JS组件不在的情况下调整它们的大小Viewport,您需要传递浏览器窗口调整大小事件.
Ext.EventManager.onWindowResize(panel.doLayout, panel);
在你的例子中,存储Panelinto var panel,然后在var声明之后设置事件处理程序但仍在其中Ext.onReady.
这是一个完整的单页解决方案:
<html>
<head>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
<script src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script src="ext-3.1.1/ext-all-debug.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';
Ext.onReady(function(){
var panel = new Ext.Panel({
renderTo: 'areaDiv',
layout: 'fit',
items: [{
height: 200,
title: 'foo',
xtype: 'grid',
cm: new Ext.grid.ColumnModel([
{header: "id", width: 400},
{header: "name", width: 400}
]),
store: new Ext.data.ArrayStore({
fields: ['id','name'],
data: [[1,'Alice'],[2,'Bill'],[3,'Carly']]
})
}]
});
//pass along browser window resize events to the panel
Ext.EventManager.onWindowResize(panel.doLayout, panel);
});
</script>
</head>
<body>
header
<div id="areaDiv" style="padding:30px;"></div>
footer
</body>
</html>
请注意,我已经删除了冗余面板(a GridPanel 是 a Panel,所以不需要包装它),fit而是使用布局而不是anchor.布局fit实际上是流畅布局的关键.使浏览器更小,然后更大.您将看到网格始终填充整个宽度,但填充除外.
| 归档时间： |
|
| 查看次数： |
29012 次 |
| 最近记录： |