for sencha-touch store 載入一堆空白的資料列!! 那會安爾!?

今天在實作下拉載入分頁的List時
(好吧,先分享一下最短的實作好了,也不過是從書上抄來的)
====sample as below=======================
     Ext.Viewport.setMasked({xtype:'loadmask',message:'Loading Data....'});
      var storeFiles=Ext.create('Ext.data.Store', {
                autoDestroy:true,
                model: 'TocMobile.model.FileMdl',
                pageSize:4,
                //storeId: 'Store4Files',
                autoLoad:false,
                proxy: {
                    type: 'ajax',
                    actionMethods: {
                        create: 'POST',
                        read: 'POST',
                        update: 'POST',
                        destroy: 'POST'
                    },
                    extraParams: {
                        icNo: icNo,
                        password: password
                    },
                    url: 'http://'+SERVER_IP+'/TocMobile/.....',
                    reader: {
                        type: 'json',
                        rootProperty: 'rows'
                    }
                }
           
        });  
   
    storeFiles.load(
        function(){
               Ext.Viewport.setMasked(false);
                var fileTemplate=new Ext.XTemplate(
                    '<tpl for=".">',
                    '<div class="File2Download" >',
                    '  <span class="icondownlaod" >',
                    '      <img src="./Adobe_PDF_Icon.svg.png" width="40" height="40" />',
                    '  </span>',
                    '    <span class="UploadDate">{uploadDate}</span>',
                    '  <br>',
                    '      <span class="UploadDetail">{uploadRemark}</span>',
                    '</div>',                  
                    '</tpl>'
                );
                var list=Ext.create('Ext.List',{
                    store:storeFiles,
                    height:'100%',
                    itemTpl:fileTemplate,
                    plugins:[
                        {
                            xclass:'Ext.plugin.ListPaging',
                            autoPaging:true,
                            loadMoreText:'Next...'
                        }
                    ],
                    emptyText:'No Data!!'
                 
                });
                    var pnlFileList= Ext.getCmp('PnlMain4FileListUnit');
                    pnlFileList.getComponent('lblFileListStatus').setHtml("  File Listing");
                    pnlFileList.getComponent('pnlListFiles').removeAll();
                    pnlFileList.getComponent('pnlListFiles').add(list);
           
        }
    );

============end of sample code============================

在測試時,卻一直發生load時來了5百多筆的空白資料!!!

明明別人的程式都正常的啊

John組長眉頭一皺,案情並不單純是client的問題

原來.....是出在server side沒事把資料列用「new JavaScriptSerializer().Serialize(...)」

變成「json內的字串格式」

==============以下是錯誤的,小心!!=================

                        List<File2Download> listfile=new List<File2Download>();

                        ...

                       ...

                        var result = new

                        {

                            success = true,

                            total=toalRowCount,

                            rows =new JavaScriptSerializer().Serialize(listfile)

                        };

                      JsonResult jResult = new JsonResult();

                      jResult.Data = result;

                      jResult.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return jResult;

  

==============================================

吐出來的字串就成了

   "{"success":true,"total":30,"rows":[{\"uploadDate\":\"2013-08-29\",\"docPath\":\"test path\",\"uploadRemark\":\"test remark\"},...]}";

  哎,既然是用「JsonResult」,就給他放心去轉換成字串就是了嘛

  =======以下才是正確的==========================

                        List<File2Download> listfile=new List<File2Download>();

                        ...

                       ...

                        var result = new

                        {

                            success = true,

                            total=toalRowCount,

                            rows =listfile  //--->就這樣,別手賤!!

                        };

                      JsonResult jResult = new JsonResult();

                      jResult.Data = result;

                      jResult.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return jResult;

=========================================

吐出來的就成了:

  {"success":true,"total":30,"rows":[{"uploadDate":"2012-10-15","docPath":"test path","uploadRemark":"test remark"},...]}

 神奇的是Sencha Touch 的store物件會解開那堆字變成文字的成為一堆空白資料列而且還不會給你出現exception/error才叫麻煩吧

Anyway,總之,別隨便用「JavaScriptSerializer().Serialize(...)」方法就是了