Store numbers with '0' as prefix

Question

I dont know how to tell but i still dont get it right. This is my code :

Ext.define("PL.view.list.listOnly", {
  extend: 'Ext.form.Panel',
  alias: 'widget.listlistonly',
  config:{
      fullscreen: true,
      title: 'Master barang',
      items:[{
            xtype : 'panel',
            layout: {
                type: 'fit',
                align : 'stretch',
                pack  : 'start',
            },
            defaults: {
                allowBlank: true,
                msgTarget: 'side',
                labelWidth: 60,
                margin: '5 5 5 5',
            },
            items:[{
                    xtype:'list',
                    height: '100%',
                    masked: { xtype: 'loadmask',message: 'Loading...' },
                    scrollable: {
                        direction: 'vertical',
                        directionLock: true
                    },
                    store:{
                        fields: [{
                                name:'szName',
                            },{
                                name:'szProductID',
                            },{
                                name:'szBarcode',
                        }],
                        autoLoad: true,
                        pageSize: 20,
                        proxy: {
                            type: 'ajax',
                            url: 'store/product/loadData.php',
                            pageParam: 'param',
                            reader: {
                                type: 'json',
                                rootProperty: 'topics',
                            }
                        }
                    },
                    variableHeights: false,
                    useComponents: true,
                    itemTpl: '<div class="myButton">' +
                    '<input type="button" name="{szProductID}" value="Edit" ' +
                    'style="padding:3px;">' +
                    '</div>' +
                    '<div class="myContent">'+ 
                    '<div>PLU : <b>{szProductID}</b>, Barcode: <b>{szBarcode}</b></b></div>' +
                    '<div>Nama: <b>{szName}</b></div>' +
                    '</div>',
                 }]
             }],        
        scrollable : false,
    },   
});

And this is what i get from json :

{"topics": [{
        "szProductID": 1001, 
        "szBarcode": 002, 
        "szName": "STANDARD BLACK"
     },{
        "szProductID": 1100420020479, 
        "szBarcode": 1100420020479, 
        "szName": "STANDARD BLUE"
      }], 
 "totalCount": 2}

As you can see, there is a '002' (szBarcode field), and this is my problem. The list only show '2' instead of '002'. This should show '002' as szBarcode but i dont know how to fix this.

Any help would appreciate

Answer 1

The problem is that barcode: 002 and barcode: 2 mean exactly the same in JSON format. Prepended zeros for numbers just don't count.

There are about four different things you can possibly do.

1. If you can access the server code, you can change it to send you the barcode field as a string (barcode:"002").
2. If your barcode ALWAYS has a certain length (say 13), you can work with the number you have, and pad it to the required length again. Please be aware that after a certain length, there are precision issues because numbers are stored in fixed-length memory, while a string's memory always is as long as needed. Sample conversion code:
   name:'barcode', convert:function(value) { var str = value.toString(), pad = "0000000000000"; // expand to length of your number return pad.substring(0, pad.length - str.length) + str); }
   (Bonus: This code does not break when someone does (1) afterwards...)
3. If you have no other barcode fields in your JSON, you could use a regular expression to add the necessary quotes to the JSON client-side before deserialization.
4. You could override ExtJS's default JSON serialization/deserialization code. Please note that this is not as easy as it sounds and may have quite some side effects. This is the only suitable way if you want to send barcode as zero-padded JSON numbers back to the server as well.