Ext JS的單選按鈕，在其標籤輸入文本

在ExtJS的，我想實現相當於：Ext JS的單選按鈕，在其標籤輸入文本

<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，但它不會顯示（因爲我認爲它是因爲它不是一個無線電），我無法將項目添加到無線電對象。

任何意見apprecaited，謝謝。

來源

2010-07-09 babadbee

我不認爲這是可能的，除非你重寫RadioButton類並改變它的渲染邏輯（我認爲這會比你想象的那樣讓你的文本區按照你的建議正確渲染）。更好的方法是簡單地將收音機和文本字段添加爲兩個單獨的字段並以編程方式將其鏈接。在Ext 3.2中，您可以使用CompositeField輕鬆完成此操作。在收音機的處理程序fn中，您可以將焦點設置爲與其關聯的文本框或任何其他需要的邏輯。

來源

2010-07-09 20:13:21

在boxLabel添加<input/>元素，然後在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" 
     }); 
    } 
    } 
});

我確認這可與文本字段，雖然我還沒有嘗試過它，它應該與DateField或ComboBox一起工作。也未經測試，但不是創建<input/>，您可以創建容器元素並創建TextField和renderTo該元素。

來源

2010-07-12 07:25:04

你測試過哪些瀏覽器？在Firefox中，無線電元素從文本字段中竊取焦點並且不允許輸入（直到你從收音機中刪除）。在IE中，你會得到「fieldLabel爲空或不是對象」。不知道你是否投了我的答案，但我沒有說這不可能做到這一點，我說這會比你想象的更復雜。我認爲這個答案證明了我的觀點。 – 2010-07-12 09:01:35

我在Firefox 3.6中試過。竊取焦點是因爲標籤被點擊，並且RadioGroup上有一個處理程序試圖攔截標籤點擊。我編輯了答案，使其正常工作。我沒有投票給你，對不起我是新來的，我不明白這是否有很大的影響，我以爲我只是表示不同意你的答案。我試圖拿回來，但它不會讓我。 – 2010-07-12 09:49:29

沒有「規則」，但是由於向下投票實際上會將您聲望降低的人的聲譽消除，所以通常目的是表明答案不在話題中或主動誤導。通常，當某人合法地嘗試提供幫助時，即使這不是您認爲最好的答案，那也不是一個真正的推遲行動的理由（相反，也許可以評論您爲什麼認爲答案不是最佳，從而開始有用的對話，就像這個）。也許其他一些不錯的人會來，並投票給我，甚至稱它... :) – 2010-07-12 13:53:04

Ext JS的單選按鈕，在其標籤輸入文本

回答

相關問題