1. #1
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default EAN-13 Ext.ux.BarcodeGenerator

    EAN-13 Ext.ux.BarcodeGenerator


    Thinking that it might be for someone useful, I have decided to post it. Recently I had to show products EAN13 barcode in an ExtJS app, and came up with the following class(which was inspired from http://www.parkscomputing.com/barcode.html):
    Code:
    Ext.define('Ext.ux.BarcodeGenerator', {
    	requires: ['Ext.XTemplate'],
    
    
      singleton: true,
    
    
      constructor : function(){
          var me = this;
            /* Odd-parity left-hand digits. */
          me.odd = [
                      [0,0,0,1,1,0,1], // 0
                      [0,0,1,1,0,0,1], // 1
                      [0,0,1,0,0,1,1], // 2
                      [0,1,1,1,1,0,1], // 3
                      [0,1,0,0,0,1,1], // 4
                      [0,1,1,0,0,0,1], // 5
                      [0,1,0,1,1,1,1], // 6
                      [0,1,1,1,0,1,1], // 7
                      [0,1,1,0,1,1,1], // 8
                      [0,0,0,1,0,1,1]  // 9
            ];
            /* Even-parity left-hand digits. */
            me.even = [
                      [0,1,0,0,1,1,1], // 0
                      [0,1,1,0,0,1,1], // 1
                      [0,0,1,1,0,1,1], // 2
                      [0,1,0,0,0,0,1], // 3
                      [0,0,1,1,1,0,1], // 4
                      [0,1,1,1,0,0,1], // 5
                      [0,0,0,0,1,0,1], // 6
                      [0,0,1,0,0,0,1], // 7
                      [0,0,0,1,0,0,1], // 8
                      [0,0,1,0,1,1,1]  // 9
            ],
            me.right = [
                      [1,1,1,0,0,1,0], // 0
                      [1,1,0,0,1,1,0], // 1
                      [1,1,0,1,1,0,0], // 2
                      [1,0,0,0,0,1,0], // 3
                      [1,0,1,1,1,0,0], // 4
                      [1,0,0,1,1,1,0], // 5
                      [1,0,1,0,0,0,0], // 6
                      [1,0,0,0,1,0,0], // 7
                      [1,0,0,1,0,0,0], // 8
                      [1,1,1,0,1,0,0]  // 9
            ]
    
    
            me.parity = [
                      [ me.odd,  me.odd,  me.odd,  me.odd,  me.odd,  me.odd ], // 0
                      [ me.odd,  me.odd, me.even,  me.odd, me.even, me.even ], // 1
                      [ me.odd,  me.odd, me.even, me.even,  me.odd, me.even ], // 2
                      [ me.odd,  me.odd, me.even, me.even, me.even,  me.odd ], // 3
                      [ me.odd, me.even,  me.odd,  me.odd, me.even, me.even], // 4
                      [ me.odd, me.even, me.even,  me.odd,  me.odd, me.even ], // 5
                      [ me.odd, me.even, me.even, me.even,  me.odd,  me.odd ], // 6
                      [ me.odd, me.even,  me.odd, me.even,  me.odd, me.even ], // 7
                      [ me.odd, me.even,  me.odd, me.even, me.even,  me.odd ], // 8
                      [ me.odd, me.even, me.even,  me.odd, me.even,  me.odd ]  // 9
            ]
      },
      renderTpl : new Ext.XTemplate(
        '<div class="barcode">',
          '<div class="quiteZone">',
            '<div class="bitOff"></div><div class="bitOff"></div>',
            '<div class="bitOff"></div><div class="bitOff"></div>',
            '<div class="bitOff"></div><div class="bitOff"></div>',
            '<div class="bitOff"></div><div class="bitOff"></div>',
            '<div class="bitOff"></div>',
            '</div>',
            '<div class="leader">',
            '<div class="bitOn"></div><div class="bitOff"></div><div class="bitOn"></div>',
            '</div>',
                '<tpl for="digits">',
                  '<div id="digit{#}" class="digit">',
              '<tpl for=".">',
                '<div class="{class}"></div>',
              '</tpl>',
                   '</div>',
                  '<tpl if="xindex == 5">',
                    '<div class="separator" class="digit">',
                        '<div class="bitOff"></div><div class="bitOn"></div><div class="bitOff"></div><div class="bitOn"></div><div class="bitOff"></div>',
                    '</div>',
                  '</tpl>',
                '</tpl>',
              '<div class="trailer">',
                '<div class="bitOn"></div><div class="bitOff"></div><div class="bitOn"></div>',
              '</div>',
              '<div class="quiteZone">',
            '<div class="bitOff"></div><div class="bitOff"></div>',
            '<div class="bitOff"></div><div class="bitOff"></div>',
            '<div class="bitOff"></div><div class="bitOff"></div>',
            '<div class="bitOff"></div><div class="bitOff"></div>',
            '<div class="bitOff"></div>',
          '</div>',
          '<div class="codeDisplay EAN-13_countryCode">{countryCode}</div>',
          '<div class="codeDisplay EAN-13_group1">{group1}</div>',
          '<div class="codeDisplay EAN-13_group2">{group2}</div>',
        '</div>'
      ),
      generateHtml: function(value){
            return this.renderTpl.applyTemplate(this.generateData(value));
      },
      generateData: function(value){
        var me = this,
            retVal = 0,
            code = value,
            data = new Array();
    
    
            if(code.length > 12)
               code = code.substring(0,12);
            else if(code.length == 11)
              code = '0' + code;
    
    
            code = code + me.calculateChecksumDigit(code);
    
    
          var parityDigit = parseInt(code.charAt(0)),
              parityTable = me.parity[parityDigit];
    
    
          for (var i = 1;  i < code.length; ++i) {
            var num = +code.charAt(i),
                digitData = new Array(),
                pattern = i < 7 ? parityTable[i-1][num] : me.right[num];
            
            for (var j = 0; j < 7; ++j){
              digitData.push({'class' : pattern[j] ? "bitOn" : "bitOff"});
            }
            data.push(digitData);
          };
          
        return {
          digits: data, 
          countryCode: value.charAt(0), 
          group1: value.substring(1, 7), 
          group2: value.substring(7, 13)
        };
      },
      calculateChecksumDigit: function(code){
        var sum=0,
            digit = 0;
    
    
            for (var i = code.length; i >= 1; --i) {
    
    
              digit = parseInt(code.substring( i - 1, i ) );
    
    
              i % 2 == 0 ? sum += digit * 3 : sum += digit * 1;
    
    
            };
          return ( 10 - ( sum % 10 ) )  % 10; 
        }
    });
    
    
    /*
    .barcode {
      color: black;
      //background-color: white;
      position: relative;
      height: 70px;
      font-size: .75em;
      width: 110px;
      padding-left: 8px;
    }
    
    
    .quietZone , .leader, .separator , .trailer {
       float: left;
       height: 86%;
    }
    
    
    .digit {
       float: left;
       height: 80%;
    }
    
    
    .bitOn , .bitOff {
         float: left;
       height: 92%;
    }
    
    
    .bitOn {
       width: 0;
       border-left: .15em solid black;
       background-color: #000000;
    }
    
    
    .bitOff {
       width: .15em;
       background-color: #FFFFFF;
    }
    
    
    .codeDisplay {
       font-family: "Courier New", monospace;
       font-size: 11px;
       position: absolute;
       color: black;
       //background-color: white;
       top: 75%;
    }
    
    
    .EAN-13_countryCode {
       left: 1%;
    }
    
    
    .EAN-13_group1 {
       left: 10%;
    }
    
    
    .EAN-13_group2 {
       left: 53%;
    }
    */
    and as an example, below is how I used this class in a grid:
    Code:
                            renderer: function(value) {
                                return Ext.ux.BarcodeGenerator.generateHtml(value);
                            }

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,918
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for the contribution.

    Regards,
    Scott.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi