Question

在ExtJs中，我想实现相当于：

<input type="radio"><label><input type="text"></label>

输入框与单选按钮关联。

new Ext.form.RadioGroup({
                        id:"alerts",

                        items: [
                            new Ext.form.Radio({
                                boxLabel:'Now',

                            }),
                            new Ext.form.Radio({
                                boxLabel:'On',
                            })

                         ]
);

我希望“On”标签旁边有一个Ext.form.TextField。

我尝试将一个Ext.form.TextField添加到RadioGroup但它不会显示（因为我认为它因为它不是Radio）而且我无法将项目添加到Radio对象。

任何建议，谢谢。

Answer 1

在<input/>中添加boxLabel元素，然后在RadioGroup渲染事件中创建TextField并将其应用于该元素

new Ext.form.RadioGroup({
  id:"alerts",
  items: [
    {boxLabel: 'Now',},
    {boxLabel: 'On <input id="on_date" type="text"/>'}, // contains <input/> id is "on_date"
  ],
  listeners: {
    change: function() {
      // really, check if "on" was clicked
      if(true) {
        Ext.getCmp('on_date_field').focus();
      } else {
        // otherwise, disable the field?
      }
    },
    render: function() {
      new Ext.form.TextField({
        id: 'on_date_field',
        applyTo: 'on_date', // apply textfield to element whose id is "on_date"
      });
    }
  }
});

我已经确认这适用于TextField，虽然我没有尝试过，但它也应该与DateField或ComboBox一起使用。同样未经测试，但您可以创建一个容器元素并创建TextField和<input/>该元素，而不是创建renderTo。

Answer 2

除非你覆盖RadioButton类并改变它的渲染逻辑，否则我认为这是不可能的（而且我认为这比你想象的那样使你的文本字段正确渲染更复杂）。更好的方法是简单地将无线电和文本字段添加为两个单独的字段，并以编程方式链接它们。在Ext 3.2中，您可以使用CompositeField轻松完成此操作。在收音机的处理程序fn中，您可以将焦点设置到其关联的文本框或您需要的任何其他逻辑。

Ext Js单选按钮，其标签中包含输入文本

2 个答案: