初涉EXTJS--- 关于renderto一个问题

初心不变时过迁 2013-06-07 10:49:15

刚开始用extjs 发现很不错，

遇到个问题

 

                    var win = Ext.create('widget.window', {

                        height: 100,

                        width: 100,

                        x:x,

                        y: y,

                        title: strspot[a],

                        renderTo: 'Div1',

                        plain:true,

                    })

                    win.show();

我多次循环这段代码按理说window应该会都在 Div1 这个标签里面

可以我这会出现这种情况当超出我这个Div1 的时候感觉会撑破的感觉没滚动条

...全文

207 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

初心不变时过迁 2013-06-07

打赏
举报

引用 9 楼 showbo 的回复:

不要注释// componentCls: 'floatpl'////////这句这个是加上浮动代码并排的，还有style导入的样式也要加上，看#5的

是我没看清

3Q3Q

Go 旅城通票 2013-06-07

打赏
举报

不要注释// componentCls: 'floatpl'////////这句这个是加上浮动代码并排的，还有style导入的样式也要加上，看#5的

初心不变时过迁 2013-06-07

打赏
举报

好像明白了


   Ext.create('Ext.Panel', {
                    height: 100,
                    width: 100,
                    x:10,
                    y:10,
                    title: 'Panel1',
                    renderTo: 'Div1',
                    closable: true,
                    frame: true,
                   // componentCls: 'floatpl'////////
                })
                Ext.create('Ext.Panel', {
                    height: 100,
                    width: 100,
                    x: 120,
                    y: -90,
                    title: 'Panel1',
                    renderTo: 'Div1',
                    closable: true,
                    frame: true,
                    // componentCls: 'floatpl'////////
                })

初心不变时过迁 2013-06-07

打赏
举报


             Ext.create('Ext.Panel', {
                    height: 100,
                    width: 100,
                    x:10,
                    y:230,
                    title: 'Panel1',
                    renderTo: 'Div1',
                    closable: true,
                    frame: true,
                   // componentCls: 'floatpl'////////
                })
                Ext.create('Ext.Panel', {
                    height: 100,
                    width: 100,
                    x: 120,
                    y: 110,
                    title: 'Panel1',
                    renderTo: 'Div1',
                    closable: true,
                    frame: true,
                    // componentCls: 'floatpl'////////
                })
                Ext.create('Ext.Panel', {
                    height: 100,
                    width: 100,
                    x: 230,
                    y: 10,
                    title: 'Panel1',
                    renderTo: 'Div1',
                    closable: true,
                    frame: true,
                    // componentCls: 'floatpl'////////
                })

这样貌似又可以糊涂了

初心不变时过迁 2013-06-07

打赏
举报

引用 1 楼 showbo 的回复:

window是absolute定位的，当然没有滚动条，用panel就有了~



                Ext.create('Ext.Panel', {

                    height: 100,

                    width: 100,

                    x:10,

                    y:10,

                    title: 'Panel1',

                    renderTo: 'Div1',

                    closable: true,

                    frame: true,

                   // componentCls: 'floatpl'////////

                })

                Ext.create('Ext.Panel', {

                    height: 100,

                    width: 100,

                    x: 110,

                    y: 10,

                    title: 'Panel1',

                    renderTo: 'Div1',

                    closable: true,

                    frame: true,

                    // componentCls: 'floatpl'////////

                })

不能并排么？

Go 旅城通票 2013-06-07

打赏
举报

panel一个占一行，所以你要并排的时候需要增加额外的样式来控制，使用componentCls配置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grouped Header Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<style>
.floatpl{float:left;margin:10px 10px 0px 0px;}
</style>
<script type="text/javascript">
    Ext.onReady(function () {
        for (var i = 0; i < 20; i++) {
            Ext.create('Ext.Panel', {
                height: 100,
                width: 100,
                title: 'Panel' + i,
                renderTo: 'Div1',
                closable: true,
                frame:true,
                componentCls: 'floatpl'////////
            })
        }

    });
    </script>
</head>
<body>
 <div id="Div1" style="width:100%;height:200px;overflow:auto"></div>
</body>
</html>

初心不变时过迁 2013-06-07