• Extjs中Table布局单元格对齐方式


    在采用table布局时,默认单元格对齐方式为居中的,如下图

    布局table时列为3列,当备注说明跨2列时,因为备注说明高度比较高,所以到生产单位单元格中内容为为居中对齐,但我们想要的是顶部对齐才好看,

    我在浏览器里面看了下,单元格的样式为 vertical-align,所以在单元格里面这样写:

    {

      bodyStyle:" vertical-align:top",
      xtype: 'combobox',
      fieldLabel: '生产单位',
       160,
      editable: false,
      labelWidth: 70,
      store: [['一厂', '一厂'], ['二厂', '二厂']],
      labelAlign: "right"

    }

    可惜不起作用,又用了style也不起作用,最终请问同事后,找到解决方式。

    其实很多extjs中提供样式的扩展属性,但大部分用的是Cls结尾的配置,比如在这个例子中定义cellCls的样式vertical-align就可以设置成功了

    样式定义如下:

    .cellTop{

    vertical-align:top,

    }

    单元格中的写法为:

    {

         xtype: 'combobox',
      fieldLabel: '生产单位',
       160,
      editable: false,
      labelWidth: 70,
      store: [['一厂', '一厂'], ['二厂', '二厂']],
      labelAlign: "right"

         cellCls: 'cellTop'

    }

    效果如下:

    源代码如下:

     1  Ext.onReady(function () {
     2             Ext.create("Ext.form.Panel",{
     3             title:"table布局中的对齐方式",
     4             600,
     5             height:400,
     6             renderTo:Ext.getBody(),
     7             bodyStyle:"padding-top:10px",
     8             layout:{
     9             type:"table",
    10             columns:3
    11             },
    12             items:[{
    13                                         xtype:"textfield",                                      
    14                                         fieldLabel: '商品编码',
    15                                          160,
    16                                          labelWidth: 70,
    17                                          labelAlign:"right"
    18                                      },{
    19                                          xtype:"textfield",
    20                                           fieldLabel: '商品名称',                                      
    21                                             180,
    22                                            labelWidth: 70,
    23                                            labelAlign: "right"
    24                                      },{
    25                                          xtype:"combobox",
    26                                           editable: false,
    27                                           fieldLabel: '单位',
    28                                           store: [['个','个'],['袋','袋']],
    29                                           queryMode: 'local',
    30                                            180,
    31                                           labelWidth: 70,
    32                                           labelAlign: "right"
    33                                      },{                                        
    34                                          xtype: 'combobox',
    35                                          fieldLabel: '生产单位',
    36                                           160,
    37                                          editable: false,
    38                                          labelWidth: 70,
    39                                          store: [['一厂', '一厂'], ['二厂', '二厂']],
    40                                          labelAlign: "right",
    41                                          cellCls:" cellTop"
    42                                      },  {
    43                                          xtype: 'textarea',
    44                                          fieldLabel: '备注说明',
    45                                          360,
    46                                         colspan:2,
    47                                          labelWidth: 70,
    48                                          height: 80,
    49                                          labelAlign: "right"
    50                                      }]
    51             });
    52         });
    View Code
  • 相关阅读:
    A05. openstack架构实战-nova服务控制节点安装
    A04. openstack架构实战-glance服务安装
    A03. openstack架构实战-keystone安装
    SSH暴力破解的解读与防御
    tcpdump抓包命令使用
    Superspeed.sh 一键测试服务器到中国上传/下载速度
    Windows ping TCP端口工具之tcping
    实验验证centos 7 系统不会缓存dns信息
    Linux下的TCP测试工具——TCPING安装简明教程
    Debian 9.12 live系统密码重置
  • 原文地址:https://www.cnblogs.com/mayantao/p/3340289.html
Copyright © 2020-2023  润新知