Results 1 to 3 of 3

Thread: Display problem with panel in panel

  1. #1

    Question Display problem with panel in panel

    Hi everybody
    I have a problem about displaying panels in one panel, even I set 'height' property of parent panel.
    below is my code:
    HTML Code:
    <!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>Typing Test System beta 1.0</title>	
    		<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
    		<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
       		<script type="text/javascript" src="lib/ext/ext-all.js"></script>
    		<!-- Common Styles for the examples -->
    		<script type="text/javascript" src="main.js"></script>
    		
    		<style type="text/css">
    			.user-img {
        				background-image:url( /images/115.bmp )
    			}
    			.logo-img { background-image:url( images/qq.ico ) !important;}
    		</style>
    	</head>
    	<body>
    		<button id='win'>win</button>
    	</body>
    </html>
    Code:
    /*
     * Ext JS Library 2.0
     * Copyright(c) 2006-2007, Ext JS, LLC.
     * [email protected]
     * 
     * http://extjs.com/license
     */
     Ext.BLANK_IMAGE_URL = "lib/ext/resources/images/default/s.gif";
     
     Ext.onReady(function(){
     	var btn = Ext.get('win');
     	
     	btn.on('click',function(){
     		var win = new Ext.Window({
     			id:'main-win',
    			title:"QQ2008",
    			iconCls:'logo-img',
    			layout: 'border',
    			width:220,
    			height:440,
    			animCollapse:true,
    			constrainHeader:true,
    			border:false,
    			maximizable:true,
    			minimizable:true,
    			items:[
    				/*    personal information   */
    				{
    					xtype:'panel',
    					region:'north',
                                            //These three panels can't display
    					items:[{title:'west',region:'west'},
                                                     {title:'center', region:'center'},
                                                     {title:'east', region:'east'}]
    				},
    				
    				
    				/*  main func panel */
    				new Ext.TabPanel({
    					activeTab:0,
    					region:'center',
    					tabPosition:'bottom',
    					items:[{
    						title: 'tab1',
    						html:'<p>tab1</p>', 
    						header:false, 
    						border:false
    					},{
    						title:'tab1', 
    						html:'<p>tab1</p>', 
    						header:false, 
    						border:false
    					}]
    				}),				
    				
    				/* settings panel  */
    				{title:'foot', region:'south'}
    				]
    		});
    		
    		win.show();
     	});
     });

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    The north panel needs to be set to border-layout

  3. #3

    Default

    Thanks djliquidice. I misunderstand that border-layout is the default layout of Panel.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •