<%@ page language="java"  pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>Label布局</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" type="text/css" href="styles.css">
    -->
    <link type="text/css" rel="stylesheet" href="ext/resources/css/ext-all.css">
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
  </head>
  <script type="text/javascript">
          Ext.onReady(function(){
                  var cm = new Ext.grid.ColumnModel([
                        {header:'纳税人名称',dataIndex:'id',sortable:true},
                        {header:'计划巡查时间',dataIndex:'name',width:200},
                        {header:'纳税人状态',dataIndex:'descn',width:200}
                    ]);
                
                    var data = [
                        ['1','name1','descn1'],
                        ['2','name2','descn2'],
                        ['3','name3','descn3'],
                        ['4','name4','descn4'],
                        ['5','name5','descn5']
                    ];
                
                    var store = new Ext.data.Store({
                        proxy: new Ext.data.MemoryProxy(data),
                        reader: new Ext.data.ArrayReader({}, [
                            {name: 'id'},
                            {name: 'name'},
                            {name: 'descn'}
                        ])
                    });
                    store.load();
                
                    var grid = new Ext.grid.GridPanel({
                        autoHeight: true,
                        store: store,
                        anchor:"90%",
                        style:'margin:10px 10px 10px 10px',
                        cm: cm
                    });
          
          
          new Ext.Panel({
              renderTo:Ext.getBody(),
              height:400,
              frame:true,
              items:[new Ext.form.FormPanel({
                  defaultType:'textfield',
                  items:[{xtype:'panel',layout:'column',items:[
                          {xtype:'fieldset',columnWidth:.33,layout:'form',border:false,items:[
                                                                      new Ext.form.Label({fieldLabel :'计划名称',text:'测试'}),
                                                                      new Ext.form.Label({fieldLabel :'计划询问时间',text:'测试'})
                                                              ]},
                          {xtype:'fieldset',columnWidth:.33,border:false,layout:'form',items:[
                                                                  new Ext.form.Label({fieldLabel :'同行人名称',text:'测试'}),
                                                                  new Ext.form.Label({fieldLabel :'计划创建时间',text:'测试'})
                                                              ]},
                          {xtype:'fieldset',columnWidth:.33,border:false,layout:'form',items:[
                                                                  new Ext.form.Label({fieldLabel :'巡查类别',text:'测试'}),
                                                                  new Ext.form.Label({fieldLabel :'计划创建人',text:'测试'})
                                                                  ]}
                          
                          ]},new Ext.form.Label({fieldLabel :'计划内容',html:'测试'}),
                          grid,
                          new Ext.form.TextArea({fieldLabel:'计划审批意见',anchor:"90%"})
                              
                          ]
              })]
          });
      })
  
  </script>
  
  <body>
  </body>
</html>
这个是我的代码,按道理来讲label没问题,但是我运行是label的fieldLabel在第一行,text总是在第二行,不管怎么调都一样..
我用的是Ext3.0的就算我弄一个panel只放label还是会出现这个情况,是不是样式的问题呢?

解决方案 »

  1.   

    你先看看  fieldset的属性  另外 我用label都是{
                    xtype:'label',
                    text:'注意:........。',
                    width:400,
                    cls:'x-label',
                    anchor:'-25'
                }
    这样用
      

  2.   


    Ext.onReady(function() {
        var cm = new Ext.grid.ColumnModel([
            { header: '纳税人名称', dataIndex: 'id', sortable: true },
            { header: '计划巡查时间', dataIndex: 'name', width: 200 },
            { header: '纳税人状态', dataIndex: 'descn', width: 200 }
        ]);    var data = [
            ['1', 'name1', 'descn1'],
            ['2', 'name2', 'descn2'],
            ['3', 'name3', 'descn3'],
            ['4', 'name4', 'descn4'],
            ['5', 'name5', 'descn5']
        ];    var store = new Ext.data.Store({
            proxy: new Ext.data.MemoryProxy(data),
            reader: new Ext.data.ArrayReader({}, [
                { name: 'id' },
                { name: 'name' },
                { name: 'descn' }
            ])
        });
        store.load();    var grid = new Ext.grid.GridPanel({
            autoHeight: true,
            store: store,
            anchor: "90%",
            style: 'margin:10px 10px 10px 10px',
            cm: cm
        });
        new Ext.Panel({
            renderTo: Ext.getBody(),
            height: 400,
            items: [
                {
                    xtype: "form", border: false,frame:true,
                    items: [{
                        layout: "column", border: false,
                        items: [
                            {
                                layout: "form", border: false, items: {
                                    xtype: "fieldset", height: 80, title: "111111111111",
                                    items: [
                                        { html: "计划名称:测试", border: false },
                                        { html: "计划询问时间:测试", border: false }
                                    ]
                                }, columnWidth: .33
                            },
                            {
                                layout: "form", border: false, items: {
                                    xtype: "fieldset", height: 80, title: "22222222222",
                                    items: [
                                        { html: "同行人名称:测试", border: false },
                                        { html: "计划创建时间:测试", border: false }
                                    ]
                                }, columnWidth: .33
                            },
                            {
                                layout: "form", border: false, items: {
                                    xtype: "fieldset", height: 80, title: "333333333333333",
                                    items: [
                                        { html: "巡查类别:测试", border: false },
                                        { html: "计划创建人:测试", border: false }
                                    ]
                                }, columnWidth: .33
                            }
                        ]
                    },
                    new Ext.form.Label({ fieldLabel: '计划内容', html: '测试' }),
                     grid,
                     new Ext.form.TextArea({ fieldLabel: '计划审批意见', anchor: "90%" })
                    ]
                }
            ]
        });
    })另外建议直接用xtype写组件