关于Ext Table布局的问题

Question

tablelayout中如何让列里面的元素居中

Answer 1

align 属性设置成 center
这样 列头和内容都会居中如果 想列头居中  列内容居左或者具有 需要自己在renderer 中自己实现以下 比如加div 设置内容居左等

Answer 2

Ext.onReady(function(){
    var table = new Ext.Panel({
        title:'集装箱运输委托',
        renderTo:Ext.getBody(),
        layout:'table',
        defaults:{
        // 对每一个子面板都有效applied to each contained panel
              bodyStyle:'border:0'
        },
        layoutConfig:{
            columns:6
        },
        items:[
         {html:'提运单号:'},
         {html:'<input type="text" name="" id="" />'},
         {html:'客户单证号:'},
         {html:'<input type="text" name="" id="" />'},
         {html:''},
         {html:''},
        
            {html:'客户名称:'},
            {html:'<input type="text" name="" id="" />'},
            {html:'业务来源:'},
            {html:'<select name="select"><option>请选择</option><option>选择一</option></select>'},
            {html:'业务类型:'},
            {html:'<select name="select"><option>请选择</option><option>选择一</option></select>'},
            
            {html:'接单时间:'},
            {html:'<input type="text" name="" id="" />-<input type="text" name="" id="" />'},
            {html:'船名/航次:'},
            {html:'<input type="text" name="" id="" />'},
            {html:'单据状态:'},
            {html:'<select name="select"><option>请选择</option><option>选择一</option></select>'},
            
            {html:'要求到达时间:'},
            {html:'<input type="text" name="" id="" />-<input type="text" name="" id="" />'},
            {html:'起运地:'},
            {html:'<input type="text" name="" id="" />'},
            {html:'目的地:'},
            {html:'<input type="text" name="" id="" />'},
            
            {html:'<input type="submit" name="Submit" value="提交" />&nbsp;<input type="submit" name="Submit" value="取消" />',colspan:6}
        ]
    });
});以上是我的JS代码  大哥能不能具体给段代码我看看

Answer 3

1、panel 加 id  比如  id:'main-table'2  页面加入样式设置  <style type="text/css">  #main-table td{text-align :center;}<style/>

Answer 4

咱是初学者，加入CSS还不会弄，不能直接在列里面设置吗？

Answer 5

这个是改变ext 生成的td 的样式 你看不到的  直接把我那句话 考到你的html页面或者jsp页面里

Answer 6

你这样做把所有的td都居中了，我只要其中的某一个td居中就可以了，这个要怎么做？

Answer 7

01 <script type="text/javascript">  02     function getBodyWidth(){  03         return document.body.clientWidth-15;  04     }  05        06     function func_submit_onclick(){  07         alert('hello');  08     }  09     var _bodyWidth = getBodyWidth();  10     //var _bodyWidth=900;  11     var _columns = 3 * 2;  12     var _perWidth = _bodyWidth/_columns;  13        14     Ext.onReady(function(){  15            16         Ext.QuickTips.init();  17         var tableForm=new Ext.FormPanel({  18             name:'tableForm',  19             id:'tableForm',  20             frame:true,  21             //width:_bodyWidth+30,  22             layout:'table',   23             style:'height:100%',  24             //bodyStyle: 'padding:8px 0 0 0;' ,    //上－右－下－左  25             layoutConfig: {columns:_columns},  26             title:'TableForm',  27             defaults:{border:false,bodyStyle: 'padding:8px 0 0 0;',  28                       layout:'form',frame:false,labelAlign:'right',labelWidth:75,width:_perWidth*2,height:30  29             }   30         });  31         tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});  32         tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});  33         tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});  34    35         tableForm.add({colspan:1,width:_perWidth,items:{xtype:'datefield',fieldLabel:'First Name',anchor:'100%'}});  36         tableForm.add({colspan:1,width:_perWidth,labelAlign:'center',items:{xtype:'datefield',fieldLabel:'to',anchor:'100%'}});  37         tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});  38         tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});  39    40         tableForm.add({colspan:2,items:{xtype:'hidden',fieldLabel:'First Name',anchor:'100%'}}); //隐藏列，用于空白列布局  41         tableForm.add({colspan:4,width:_perWidth*4,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});  42            43         tableForm.addButton({text:'submit',handler:func_submit_onclick});  44         tableForm.addButton({text:'cancel'});  45            46         tableForm.render(Ext.getBody());  47    48     });           49     </script>