首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

Extjs实现如图的格局-table布局下filedlable不显示

2013-10-15 
Extjs实现如图的布局-table布局下filedlable不显示哪位EXT大神帮忙实现下如下图这种布局:我尝试用table布

Extjs实现如图的布局-table布局下filedlable不显示
哪位EXT大神帮忙实现下如下图这种布局:
Extjs实现如图的格局-table布局下filedlable不显示

我尝试用table布局,使用两列显示,但会导致文本框的filedlable不显示。
我尝试布局的效果如下:
Extjs实现如图的格局-table布局下filedlable不显示
这种效果的代码如下:


Ext.onReady(function(){
    Ext.QuickTips.init();    
    
  //Toolbar
var toolbar = new Ext.Toolbar({
region: 'north',
height:30,
width:"100%",
items:[{
text: '保存',
            iconCls : 'save'
},{
text : '取消',
iconCls : 'clear'
}]
});
    
    //Form panel
    var form = new Ext.FormPanel({
    region: 'center',
    layout:'table',
        layoutConfig: {columns:2},
        labelWidth: 75,        
        labelAlign: 'right',
        frame:true,
        width:500,
        autoHeight:true,
        defaults: {width: 230, msgTarget:'side'},
        defaultType: 'textfield',        
        items: [
        {
        name:'fullnameZh',
        ref:'fullnameZh',
            fieldLabel: 'LP名称(中文)',            
            allowBlank:false,
            blankText:'LP名称(中文)必须输入.'
        },{
        name:'fullnameEn',
        ref:'fullnameEn',
            fieldLabel: 'LP名称(英文)'
        },{
        name:'shortnameZh',
        ref:'shortnameZh',
            fieldLabel: 'LP简称(中文)'
        },{
        name:'shortnameEn',
        ref:'shortnameEn',
            fieldLabel: 'LP简称(英文)'
        },{
        name:'lpType',
        ref:'lpType',
            fieldLabel: 'LP类型'
        },{
        name:'assort',
        ref:'fullnameEn',
            fieldLabel: 'LP种类'
        },{
        name:'currency',
        ref:'currency',
            fieldLabel: 'LP投资币种'
        },{
        name:'website',
        ref:'website',
            fieldLabel: 'LP网址'
        },{
            name:'id',
            ref:'id',
            hidden:true
        }]
});
    
    var catalog = new Ext.BoxComponent({
        region: 'west',
        height: 600,
        width:300,
        autoEl: {
            tag: 'div',
            html:'<p>目录标签区域</p>'
        }
    });
    
    /***Layout******************************************************************/
var layout = new Ext.Viewport({
        layout: 'border',
        items: [toolbar,catalog,form]
    });
layout.render('container');


});


extjs布局 table布局filedlable不显示
[解决办法]
Viewport不是指定render到body的么,还有如果你先试用了border布局,然后在center里使用了table布局,我猜是不是 左边的宽度过大了,导致center的布局不够了,然后导致 table布局里的宽度不够,所以fieldLabel显示不出来了。当然如果位置够的情况下 不排除是Extjs的BUG。


建议使用布局 使用3列 HBOX, 然后第一列你按照你的做,后两列使用 VBOX 
box布局比较容易控制宽度,以及高度(以及自适应)
[解决办法]
不行就多层panel嵌套
[解决办法]
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript">
Ext.onReady(function(){
   var p=Ext.create('Ext.panel.Panel',{
     renderTo:Ext.getBody()
     ,layout:{type:'hbox',align:'stretch'}
     ,items:[{xtype:'box'
      ,flex:1
      ,autoEl:{tag:'div',html:'<p>目录标签区域</p>'}
     }
     ,{xtype:'container'
      ,flex:1
      ,layout:'vbox'
      ,items:[{xtype:'label',text:'label1'}
        ,{xtype:'label',text:'label2'}
      ]}
     ,{xtype:'container'
      ,flex:1
      ,layout:'vbox'
      ,items:[{xtype:'label',text:'label1'}
        ,{xtype:'label',text:'label2'}
        ,{xtype:'label',text:'label3'}
        ,{xtype:'label',text:'label4'}
      ]} 
     ]
   });
});
    </script>
    </head>
    <body>
      </body>
</html>

热点排行
Bad Request.