Extjs2.2布局问题

 jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css"> </link>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
  
 <body>
   <div id="test" >
   </div>
  </body>
</html>
js代码
    Ext.onReady(function(){
var form=new Ext.form.FormPanel({
title : "学习",
width : 202,
headerAsText: "true",
renderTo : "test",
layout : "form",
labelAlign : "left",
labelPad :  10, items :[{
layout : "column",
items : [{
layout : "form",
items : [{
xtype : "textfield",
fieldLabel : "姓",
width : 100

}]
},{
layout : "form",
items : [{
xtype : "textfield",
fieldLabel : "名" ,
width : 100

}]
}]
}]



});
})
我看资料 布局是按照column和form布局，为什么，我不管怎么布，得到的样子的都是从上至下的样子

解决方案 »

  1.   

    代码书写要有格式，否则修改起来很麻烦
    Ext.onReady(function(){
        var form=new Ext.form.FormPanel({
            title: "学习",
            width: 202,
            headerAsText: "true",
            renderTo: "test",
            layout: "form",
            labelAlign: "left",
            labelPad: 10,        items:[
    { layout: "column",
    items: [
    { columnWidth: .5, layout: "form", 
    items: [
    { xtype: "textfield", fieldLabel: "姓", width: 100 }
    ]
    },
    { columnWidth: .5, layout: "form",
    items: [
    { xtype: "textfield", fieldLabel: "名", width: 100 }
    ]
    }
    ]
                }
    ]
        });
    })
      

  2.   


    Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
    title : "学习",
    width : 202,
    headerAsText : "true",
    renderTo : "test",
    layout : "form",
    labelAlign : "left",
    labelPad : 10, items : [{
    layout : "column", //列的布局
    items : [{
    columnWidth: .5, //楼主，这个要加上 
    layout : "form",
    items : [{
    xtype : "textfield",
    fieldLabel : "姓",
    width : 100 }]
    }, {
    columnWidth: .5, //楼主，这个要加上
    layout : "form",
    items : [{
    xtype : "textfield",
    fieldLabel : "名",
    width : 100 }]
    }]
    }] });
    })