list - 如何使用sencha touch在列表左侧混合textareafields和两个带有标签的垂直按钮？

Question

我想做的是如下：

/*

What i want is below(the dot is to be replaced with space): 

..................................................... ..........toolbar1 只有文本。..................................................... ..........toolbar2 只有文本。..................................................... ...... 标记为 textareafield1 。..................................................... ...... 标记为 textareafield2 。..................................................... ..................................................... ..................................................... ..................................................... ...................................................... ...................按钮 1 。
...................................标签 。..................................................... ..................................................... …………………………………………………………………………………………………………………………………… ..................................................... .......按钮2。

.button3 ...................................................... ..标签栏 ................................... .....................按钮 4。………………………………………………………………………………………………………………………………………………

*/

Answer 1

你可以做这样的事情

Ext.create('Ext.Panel', {
    fullscreen : true,
    items : [{
        xtype :'toolbar',
        title : 'toolbar with just text'
    },{
        xtype :'toolbar',
        title : 'toolbar with just text'
    },{
        xtype :'textfield',
        label: 'TextField 1',
        name: 'TextField1'
    },{
        xtype :'textfield',
        label: 'TextField 2',
        name: 'TextField2'
  },{
        xtype :'label',
        html : 'text you want to disaply..................................'
  },{
      xtype : 'panel',
      layout : 'hbox',
      items : [{
          xtype : 'label',
          html : '....................'
      },{
          xtype : 'label',
          html : '..............................................'
      },{
          xtype : 'button',
          text : 'Button Text'
      }]
  },{
      xtype : 'panel',
      layout : 'hbox',
      items : [{
          xtype : 'label',
          html : '.................... '
      },{
          xtype : 'label',
          html : 'label Text'
      },{
          xtype : 'label',
          html : '.................. '
      }]
  }]
});

带有 hbox 布局的面板可以解决问题.. 看看这个sencha fiddle

更新

如果您将字段放在字段集中，那么您可以设置字段之间的线..

或者您想创建简单的分隔线或图像..只需放在字段之间

{
  xtype : 'label',
  html : '<hr>'
}

另请参阅此煎茶表单线程