使用ext.js渲染「正常」複選框4

我試圖做一些事情，我認爲這應該與EXT.js 4相對簡單，但我找不到答案。我試圖創建一個類型爲「checkbox」的複選框，當我嘗試將它呈現爲一個type =「button」時使用ext.js渲染「正常」複選框4

這裏是我正在做的一個示例（我相信這段代碼來自煎茶本身，而是它是什麼，我試圖做）

此代碼

Ext.create('Ext.form.Panel', { 
    bodyPadding: 10, 
    width  : 300, 
    title  : 'Pizza Order', 
    items: [{ 
     xtype  : 'fieldcontainer', 
     fieldLabel : 'Toppings', 
     defaultType: 'checkboxfield', 
     items: [{ 
      boxLabel : 'Anchovies', 
      name  : 'topping', 
      inputValue: '1', 
      id  : 'checkbox1' 
     }, { 
      boxLabel : 'Artichoke Hearts', 
      name  : 'topping', 
      inputValue: '2', 
      checked : true, 
      id  : 'checkbox2' 
     }, { 
      boxLabel : 'Bacon', 
      name  : 'topping', 
      inputValue: '3' 
      id  : 'checkbox3' 
     }] 
    }], 
    bbar: [{ 
     text: 'Select Bacon', 
     handler: function() { 
      var checkbox = Ext.getCmp('checkbox3'); 
      checkbox.setValue(true); 
     } 
    }, 
    '-', 
    { 
     text: 'Select All', 
     handler: function() { 
      var checkbox1 = Ext.getCmp('checkbox1'), 
       checkbox2 = Ext.getCmp('checkbox2'), 
       checkbox3 = Ext.getCmp('checkbox3'); 

      checkbox1.setValue(true); 
      checkbox2.setValue(true); 
      checkbox3.setValue(true); 
     } 
    },{ 
     text: 'Deselect All', 
     handler: function() { 
      var checkbox1 = Ext.getCmp('checkbox1'), 
       checkbox2 = Ext.getCmp('checkbox2'), 
       checkbox3 = Ext.getCmp('checkbox3'); 

      checkbox1.setValue(false); 
      checkbox2.setValue(false); 
      checkbox3.setValue(false); 
     } 
    }], 
    renderTo: Ext.getBody() 
});

RENDERS

<input type="button" hidefocus="true" autocomplete="off" class="x-form-field x-form-checkbox x-form-cb" id="checkbox1-inputEl" aria-invalid="false" data-errorqtip="">

公告類型= 「按鈕」？我需要的類型是一個「複選框」

讓我包括原因，也許我接近這個錯誤。我試圖讓JAWS閱讀器按照它的方式閱讀複選框。作爲一個「按鈕」類型，JAWS閱讀器將其讀取爲一個按鈕，並且不會讀取標籤，該選項隨複選框一起顯示。

希望這使得既然，請問任何你需要的問題，並感謝您的任何幫助。

羅斯

來源

2017-02-28 rtlehr

您使用的是什麼版本的ExtJS？ 4.1？ 4.2？ –

這段代碼有什麼問題我可以在這看到正常的行爲。你可以指定一些更多的細節。 – Tejas

這裏的問題在於需要一個屬性role =「複選框」才能被JAWS正確顯示。 –

-1

我已經在我結束其工作正常運行代碼。我使用的是extjs 6.0.2，我認爲你所看到的是需要檢查的標籤前綴。它始終只是一個按鈕。即使你使用radiofield，那麼它也將是dom中的type =「button」，因爲該框必須處理可由type =「button」處理的click事件。你能提供你爲什麼需要它的原因：type =「checkbox」？

來源

2017-03-01 06:36:11

原因在於這個問題。 –

您可以使用配置autoEl。檢查此琴：http://jsfiddle.net/vdazU/3262/

{ 
    xtype: 'component', 
    autoEl: { 
     html: '<input type="checkbox" id="checkbox1" name="topping" >Anchovies' 
}

如果檢查DOM，你將能夠看到一個HTML輸入複選框。

來源

2017-03-02 05:06:21 inQstvJS

使用ext.js渲染「正常」複選框4

回答

相關問題