ExtJS: Get Radio Button Value

Radio button is common GUI component, it's often appears as a set. then each item indicate a special value. By return the special value, the application can make decision or calculate something. In this note, I want to tell you how to get the radio button value. It seems a simple problem, but I'm not familiar with JavaScript, DOM and ExtJS, so it spent me lots of time. Hope my experience is useful for you.

I have a radio group named "functional" I want to get value of functional, how to?

If you can't read Chinese, please see the end of the post.

*******

Radio按鈕常常一組的形態出現，每個選項又指定特定的值。回傳這個值之後，程式根據回傳值判斷下一步要幹嘛，或者進行相關運算。在ExtJS的框架裡面，你同樣也可以使用Radio Button的元件。

舉例來說：我配置了一組Radio Button，目的要作為CRUD（Create, Read, Update, Delete)的動作判斷。

var CRUD = [{
xtype:'radio',
checked: true,
fieldLabel: 'Select Function',
boxLabel: 'Create Job',
name: 'functional',
inputValue: '1',

},{
xtype: 'radio',
fieldLabel: '',
boxLabel: 'Update Job',
name: 'functional',
inputValue: '2',
},{
xtype:'radio',
fieldLabel: '',
boxLabel: 'Delete Job',
name: 'functional',
inputValue: '3',

},{
xtype: 'radio',
fieldLabel: '',
boxLabel: 'Query Job',
name: 'functional',
inputValue: '4',
}]

上面這組程式碼定義了一個名稱為functional的元件，有四個項目可以選。當你選了Delete Job，就回傳3。選擇Create Job，就回傳1。然後根據結果是1,2,3或4，進行下一個動作。

這時我需要一個變數用來取得回傳值。要怎麼做？根據之前取得TextField元件的經驗，我馬上用Ext.getDom("functional").value想取得functional這個Radio Button最後的值。結果一直失敗，事情果然不是憨人想得這麼簡單。按照慣例，回到ExtJS的官方論壇耐心爬文總有解答。只要你有基本的英文閱讀能力就好。

我找到解答了！
正確的作法是 Ext.DomQuery.selectValue('input[name=functional]:checked/@value');
好不熟悉的程式碼寫法阿！

接著嘗試定義一個按鈕，測試用alert();跑出選擇的項目回傳值，就是我需要的功能。

*******

The answer is Ext.DomQuery.selectValue('input[name=functional]:checked/@value');

You can create a button object, and define a handler which alert the value for test purpose.

new Ext.Button({
text:'test',
handler: function(){
var selValue = Ext.DomQuery.selectValue('input[name=functional]:checked/@value');
alert(selValue);
}
});