+ -
当前位置:首页 → 问答吧 → Ext2.1 分页Grid

Ext2.1 分页Grid

时间:2008-06-03

来源:互联网

paging.js
复制内容到剪贴板
代码:
Ext.onReady(function(){

    var store = new Ext.data.Store({

        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://10.19.8.233/ext/examples/grid/test.php'
        }),

        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'bid',
            fields: [
                {name: 'bid', mapping:'bid', type: 'int'},
                {name: 'bname', mapping:'bname', type: 'string'}
            ]
        }),

        remoteSort: true
    });
    store.setDefaultSort('bid', 'desc');

    function renderTopic(value, p, record){
        return String.format(
                '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
                value, record.data.bname, record.id, record.data.bid);
    }
    function renderLast(value, p, r){
        return String.format('{0}<br/>by {1}', r.data['bid'], r.data['bname']);
    }


    var cm = new Ext.grid.ColumnModel([{
           id: 'topic',
           header: "bid",
           dataIndex: 'bid',
           width: 420
        },{
           header: "bname",
           dataIndex: 'bname',
           width: 100,
                   renderer: renderTopic
        }]);


    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
        el:'topic-grid',
        width:700,
        height:500,
        title:'呜呜呜呜呜呜呜呜呜',
        store: store,
        cm: cm,
        trackMouseOver:false,
        sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
        loadMask: true,
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.excerpt+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },
        bbar: new Ext.PagingToolbar({
            pageSize: 5,
            store: store,
            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();

    store.load({params:{start:0, limit:5}});

    function toggleDetails(btn, pressed){
        var view = grid.getView();
        view.showPreview = pressed;
        view.refresh();
    }
});
test.html
复制内容到剪贴板
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title></title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="paging.js"></script>
</head>
<body>
<div id="topic-grid"></div>
</body>
</html>
服务端
复制内容到剪贴板
代码:
<?
$link = mysql_pconnect("localhost", "root", "") or die("Could not connect");
mysql_select_db("test") or die("Could not select database");
$link = @mysql_db_query("test", "set names utf8");
$sql_count = "SELECT * FROM book";
$sql = $sql_count . " order by ".$_GET['sort']." ".$_GET['dir']." 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;
}
//print_r(json_encode($arr));
Echo $_GET['callback'].'({"totalCount":"'.$rows.'","topics":'.json_encode($arr).'})';
?>
[ 本帖最后由 wz_910 于 2008-6-3 15:34 编辑 ]

作者: wz_910   发布时间: 2008-06-03

数据库应该为utf8的否则json无效。

作者: wz_910   发布时间: 2008-06-03

兄弟,曲高和寡呀,呵呵

作者: lei0535   发布时间: 2008-07-22

引用:
原帖由 lei0535 于 2008-7-22 12:09 发表
兄弟,曲高和寡呀,呵呵
感觉到了

作者: wz_910   发布时间: 2008-08-01

热门下载

更多