Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1293308
  • 博文数量: 315
  • 博客积分: 10397
  • 博客等级: 上将
  • 技术积分: 3731
  • 用 户 组: 普通用户
  • 注册时间: 2007-03-07 21:21
文章分类

全部博文(315)

文章存档

2015年(10)

2014年(3)

2013年(2)

2012年(8)

2011年(8)

2010年(29)

2009年(59)

2008年(77)

2007年(119)

分类: 系统运维

2007-10-29 05:51:24

 
突然觉得编程真不是人人都能做的,一次次的编译不通过,一遍遍的检查代码,抓住问题所在的喜悦远小于重复多次的挫折,真不是人受,尤其对于一个未曾接触过的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、前端显示

 
  Paging Grid Example
  
  
  
  
  
 
 
 
  

 
 
大功告成!!!!!
 
阅读(2826) | 评论(0) | 转发(0) |
0

上一篇:Ext的学习

下一篇:整理头绪--鼓励自己

给主人留下些什么吧!~~