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

刚开始用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 的时候 感觉会撑破的感觉  没滚动条  
JavaScriptExt JSrenderTO

解决方案 »

  1.   

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

  2.   


    额
    API上搜PANAL收不到、、
     懂了懂了
      

  3.   

    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>
      

  4.   

                    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'////////
                    })不能并排么？
      

  5.   


                 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'////////
                    })这样貌似又可以 糊涂了
      

  6.   

    好像明白了  
       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'////////
                    })
      

  7.   

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