ExtJs 之GridPanel实例2

最新推荐文章于 2017-11-25 15:45:51 发布

weixin_30595035

最新推荐文章于 2017-11-25 15:45:51 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/Peter-Youny/archive/2013/02/19/2917435.html

版权

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript" src="../ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext-3.4.0/ext-all.js"></script>
        <link href="../ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="grid-div"></div>    
        <div id="binding-example" ></div>
        <script>
            function checkSex(val)
            {
                if(val=='0')
                {
                    return '<span style=\"color:blue\">男</span>';   
                }
                else
                {
                    return '<span style=\"color:green\">女</span>'; 
                }
            }
            Ext.onReady(function(){ 
                var cm = new Ext.grid.ColumnModel([
                    //设置好表的列头 
                    {header:'编号',dataIndex:'id',sortable:true}, //{首部显示文本,列对应的记录集字段,列是否排序(sortable)}
                    {header:'名称',dataIndex:'name'},
                    {header:'描述',dataIndex:'descn'},
                    {header:'性别',dataIndex:'sex',sortable:true,renderer:checkSex},//renderer就是在读取该字段前执行的函数
                    { header:'出生日期',dataIndex:'birthdate',renderer:Ext.util.Format.dateRenderer('m/d/Y')},
                    {
                        xtype: 'actioncolumn',
                        width: 50,
                        items: [{
                                icon   : '../ext-3.4.0/examples/shared/icons/fam/delete.gif',  // Use a URL in the icon config
                                tooltip: 'Sell stock',
                                handler: function(grid, rowIndex, colIndex) {
                                    var rec = ds.getAt(rowIndex);
                                    alert("Sell " + rec.get('name'));
                                }
                            }]
                    }
                
                    
                ]) ;
                var data = [ 
                    ['1','张三','descn1','0','9/12 12:00am'], 
                    ['2','李四','descn2','1','9/12 12:00am'], 
                    ['3','王五','descn3','0','9/12 12:00am'], 
                    ['4','赵六','descn4','1','9/12 12:00am'], 
                    ['5','孙奇','descn5','0','9/12 12:00am']
                ] ;
                var ds = new Ext.data.Store({ 
                    proxy:new Ext.data.MemoryProxy(data),//获取数据的方式   (用Ext.data.MemoryProxy专门解析JavaScript变量) 
                    reader:new Ext.data.ArrayReader({},[  //如何解析这堆数据 
                        {name: 'id' }, 
                        {name: 'name' },
                        {name: 'descn' },
                        {name:'sex' },
                        {name:'birthdate',type:'date',dateFormat: 'n/j h:ia'}
                    ]) 
                }) ;//远程读取数据使用ScriptTagProxy  如要从本地读取数据  需要将MemoryProxy改成PagingMemoryProxy 
                ds.load() ;//加载数据 
                var grid = new Ext.grid.GridPanel({ 
                    el:'grid-div',
                    ds: ds, //ds可以把任何格式的数据转化成grid可以使用的形式
                    cm: cm,
                    sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
                    width:505, 
                    height:233 
                }) ;
                grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
                    var detailPanel = Ext.getCmp('detailPanel');
                    bookTpl.overwrite(detailPanel.body, r.data);
                    
                });
                       
                grid.render() ;
                //注意这些文件是有顺序的，最好放在render()下面，否则就运行不出来上面的内容
                var ct = new Ext.Panel({
                    renderTo: 'binding-example',
                    frame: true,
                    title: 'Book List',
                    width: 540,
                    height: 400,
                    layout: 'border',
                    items: [
                        grid,
                        {
                            id: 'detailPanel',
                            region: 'center',
                            bodyStyle: {
                                background: '#ffffff',
                                padding: '7px'
                            },
                            html: 'Please select a book to see additional details.'
                        }
                    ]
                })
                
                // define a template to use for the detail view
                var bookTplMarkup = [
                    'id: <a href="" target="_blank">{id}</a><br/>',
                    'name: {name}<br/>',
                    'descn: {descn}<br/>',
                    'birthdate: {birthdate}<br/>'
                ];
                var bookTpl = new Ext.Template(bookTplMarkup);//创建一个模版
            }) ;                
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/Peter-Youny/archive/2013/02/19/2917435.html

weixin_30595035

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs 之GridPanel实例2

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <script type="text/javascri...
复制链接

扫一扫