ExtJS布局:同一行上的文本和单选按钮

时间:2014-07-19 09:20:10

标签: extjs layout

如何让第一组单选按钮更新一点? 如何让第二组单选按钮位于文本右侧?

function sch26_json() {
    var json_data = {
        klonmode: trnd_form.getForm().findField('rb_klon').getGroupValue(),
        klonmode: trnd_form.getForm().findField('rb_tip_smetki').getGroupValue(),
        klon: trnd_form.getForm().findField('edit_klon').getValue(),
        name: (trnd_form.getForm().findField('dma16_cb_2').checked) ? '1' : '0',
        print: trnd_form.getForm().findField('rb_print').getGroupValue(),
        chif: r1
    };

    return Ext.JSON.encode(json_data);
}    

var sch26_button_function = function(btn) {
  if (btn.text == 'Справка') {
    Ext.Ajax.request({
         method: 'POST', 
            url: './src/sch26_report.php',
            jsonData: sch26_json(),
            success: function(response){
                var r = Ext.JSON.decode(response.responseText);
                if (r.success == true) { 
               var fn = r.filename;
                    var spr_win = Ext.create('Trnd.SpravkaWindow', {
                        xtitle: 'Справка Синтетична Оборотна Ведомост',
                        xfilename: r.filename
                    });
                    spr_win.show(); 
                } else {
                    Ext.Msg.alert('Внимание', r.errmsg);        
                };
            },
            failure: function(response){
                Ext.Msg.alert('Внимание', 'Грешка при стартиране на справката.');       
            }
        });
  } else if (btn.text == 'Отказ') {
    window.location = './main.php';
  }
}
var trnd_form = new Ext.form.Panel({ 
  frame: true, 
  title: 'Синтетична Оборотна Ведомост', 
  monitorValid: true,
  width: 300,
  height: 200,
  activeItem: 0,
  items: [
        {
      xtype: 'fieldset',
      border: false,
      items: [
              {xtype: 'displayfield', value: "Some text here <hr />"},
        ]
        },
     {
            xtype: 'radiogroup',
            columns: [150, 100],
            items: [
                {boxLabel: 'a', name: 'rb_klon', inputValue: 1, checked: true},
                {boxLabel: 'b', name: 'rb_klon', inputValue: 2}
                        ]
    },
    {
      xtype: 'fieldset',
      border: false,
      items: [
              {xtype: 'displayfield', value: "Some text here"},
              {
              xtype: 'radiogroup', 
              items: [
                {boxLabel: 'a',name: 'rb_tip_smetki',inputValue : 1, checked: true},
                {boxLabel: 'b',name: 'rb_tip_smetki',inputValue : 2},
                {boxLabel: 'c',name: 'rb_tip_smetki',inputValue : 3},
                {boxLabel: 'd',name: 'rb_tip_smetki',inputValue : 4}
                            ]
                            }

        ]
        }
  ],
  buttons: [
    {
        id: 'button_spr',
      text    : 'Справка',
      handler : sch26_button_function
    }
     ]
});

看起来像这样: How it looks

它应该是这样的。 How I want it to look

1 个答案:

答案 0 :(得分:0)

您可以使用'fieldLabel'属性作为单选按钮,将标签和单选按钮放在一行中。您可以定义要显示的高度字段以获得所需的结果。

您的代码如下所示

 frame: true, 
  title: 'Синтетична Оборотна Ведомост', 
  monitorValid: true,
  width: 300,
  height: 200,
  renderTo:Ext.getBody(),
  activeItem: 0,
  items: [
        {
      xtype: 'fieldset',
      border: false,
      items: [
        {xtype: 'displayfield', height:20,  value: "Some text here <hr />"},
        ]
        },
     {
         xtype: 'radiogroup',
        height:20,
        columns: [150, 100],
            items: [
                {boxLabel: 'a', name: 'rb_klon', inputValue: 1, checked: true},
                {boxLabel: 'b', name: 'rb_klon', inputValue: 2}
                        ]
    },
    {
      xtype: 'fieldset',
      border: false,
      items: [

              {
              xtype: 'radiogroup', 
                fieldLabel:'some Text Here',
              items: [
                {boxLabel: 'a',name: 'rb_tip_smetki',inputValue : 1, checked: true},
                {boxLabel: 'b',name: 'rb_tip_smetki',inputValue : 2},
                {boxLabel: 'c',name: 'rb_tip_smetki',inputValue : 3},
                {boxLabel: 'd',name: 'rb_tip_smetki',inputValue : 4}
                            ]
                            }

        ]
        }
  ],
  buttons: [
    {
        id: 'button_spr',
      text    : 'Справка'

    }
     ]

希望这可以帮助你..