Results 1 to 2 of 2

Thread: Printing of Radio button

  1. #1
    Ext User
    Join Date
    Jun 2008
    Vote Rating

    Default Printing of Radio button

    Hello there!

    I have a print function that can send a simple form with some radio buttons with a selected value to a preview mode, from there a user can send for printing.

    The trouble it that the radio button are shown on the preview screen (including the selected radio button), but when printed out the output does not have the radio buttons at all except the box labels.

    Is there any means to get the radio button on the printout sheet?

    thanks in advance.


  2. #2
    Sencha User gnanasuriyan_a's Avatar
    Join Date
    May 2012
    Vote Rating

    Default Printing radio and check box

    I have also faced same kind of issues and after checking radio and check box source code, sencha is actually not using html radio and checkbox tags. Instead of it is using some background images with div tags for displaying selected value of the radio and check box. That is why when printing ext js form, those background images are not appearing for print. For resolving this issue, I have created custom component by using only html tags. Here is my radio custom component created only for printing purpose.

    Ext.define('MyApp.view.PrintRadio', {
    extend: 'Ext.Component',
    alias: 'widget.printradio',

    renderTpl : [
    '<div style="width : 100%, height:auto;border-width:0px;">' +
    '<tpl for="items">' +
    '<input type="radio"' +
    '<tpl if="name">name="{name} "</tpl>' +
    '<tpl if="id">id="{id} "</tpl>' +
    '<tpl if="inputValue">value="{inputValue} "</tpl>' +
    '<tpl if="this.isChecked(inputValue, parent.value)">checked</tpl>' +
    '/>{boxLabel} <br />'+
    '</tpl>' +
    isChecked : function(radioValue, selectedValue) {
    if(radioValue === selectedValue){
    return true;
    return false;
    initComponent : function() {
    initRenderData : function() {
    return Ext.apply(this.callParent(), {
    items : this.items || {},
    value : this.value || ''

    The sample usage of the above component is,

    xtype : 'printradio',
    value : 'xl',
    items : [{
    boxLabel : 'M',
    name : 'size',
    inputValue: 'm',
    id : 'radio1'
    }, {
    boxLabel : 'L',
    name : 'size',
    inputValue: 'l',
    id : 'radio2'
    }, {
    boxLabel : 'XL',
    name : 'size',
    inputValue: 'xl',
    id : 'radio3'

    Note : I am using separate form for printing. that is why I have skipped lot of radio related operation provided by sencha. If you need those operation you have to extend radio class and override the template value.

    I hope this solution will resolve your problem.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts