Ext学习之Grid JSON分页

 

突然觉得编程真不是人人都能做的，一次次的编译不通过，一遍遍的检查代码，抓住问题所在的喜悦远小于重复多次的挫折，真不是人受，尤其对于一个未曾接触过的js类库，没有标准，没有可供衡量的依据，一处不过，处处卡壳。。。

今天一夜什么事情都没做，只是一个小小的Grid 分页竟然调试了我8个小时，惭愧，惭愧。。

1、js代码

Ext.onReady(function(){

    var ds = new Ext.data.Store({
  // HttpProxy should be used here
        proxy: new Ext.data.ScriptTagProxy({
            url: ''
        }),
          
        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'total',
            id: 'id'
        }, [
            {name: 'employee_name', mapping: 'name'},
            {name: 'job_title', mapping: 'title'},
            {name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},
            {name: 'is_active', mapping: 'active'}
        ])
  
    });

    var cm = new Ext.grid.ColumnModel([{
     id: 'name',
           header: "Name",
           dataIndex: 'employee_name',
           width: 100
        },{
           header: "Title",
           dataIndex: 'job_title',
           width: 170
        },{
           header: "Hire Date",
           dataIndex: 'hire_date',
           width: 70,
     renderer: Ext.util.Format.dateRenderer('n/j/Y')
        },{
           header: "Active",
           dataIndex: 'is_active',
           width: 50
        }]);
        cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
        store: ds,
        cm: cm,
        renderTo:'grid-paging',
        title:'ExtJS.com - Browse Forums',
        width:600,
        height:400,
        bbar: new Ext.PagingToolbar({
            pageSize: 8,
            store: ds,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: toggleDetails
            }]
        })
    });

    grid.render();

    ds.load({params:{start:0, limit:8}});
 function toggleDetails(btn, pressed){
        var view = grid.getView();
        view.showPreview = pressed;
        view.refresh();
    }
});

2、服务器数据

$link = mysql_pconnect("localhost", "root", "37863127") or die("Could not connect");
mysql_select_db("test") or die("Could not select database");

$sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";
$sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit'];

$rs_count = mysql_query($sql_count);

$rows = mysql_num_rows($rs_count);

$rs = mysql_query($sql);

while($obj = mysql_fetch_object($rs))
{
 $arr[] = $obj;
}

echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';

?>
3、前端显示

 
  

  
  
  
  
  

 
 
 
  

 
 

大功告成！！！！！

 

阅读(2818) | 评论(0) | 转发(0) |

0

上一篇：Ext的学习

下一篇：整理头绪－－鼓励自己