extjs学习

最新推荐文章于 2018-05-31 15:48:41 发布

大米随笔

最新推荐文章于 2018-05-31 15:48:41 发布

阅读量437

点赞数

文章标签： extjs header stylesheet behavior function div

本文链接：https://blog.csdn.net/lidengm/article/details/5862118

版权

<html>
<head>
<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>
function changeSex(val){//改变性别显示规则
      if (val == 'm') {
             return "<span style='color:red;font-weight:bold;'>男</span>";
      } else {
             return "<span style='color:green;font-weight:bold;'>女</span>";
       }
}
Ext.onReady(function(){
       var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false});//添加复选框singleSelect标记是否可以多选
       var cm=new Ext.grid.ColumnModel([
           new Ext.grid.RowNumberer(),//显示行号
     sm,
           {header:'编号',dataIndex:'id',sortable:true},
     {header:'名称',dataIndex:'name'},
     {header:'性别',dataIndex:'sex',renderer:changeSex},
     {header:'描述',dataIndex:'desc'}
    ]);
    var data=[
           ['1','浏览','f','快快快'],
     ['2','yyyyyy','m','mmmmmm'],
     ['3','忐忐忑忑','f','kkkkkkkkkkk'],
     ['4','恶化体会','f','dddddddddd'],
     ['5','g的那样','m','气愤而'],
     ['6','浏览','f','快快快'],
     ['7','yyyyyy','m','mmmmmm'],
     ['8','忐忐忑忑','f','kkkkkkkkkkk'],
     ['9','恶化体会','f','dddddddddd'],
     ['10','g的那样','m','气愤而'],
     ['11','浏览','f','快快快'],
     ['12','yyyyyy','m','mmmmmm'],
     ['13','忐忐忑忑','f','kkkkkkkkkkk'],
     ['14','恶化体会','f','dddddddddd'],
     ['15','g的那样','m','气愤而']
    ];
   var ds = new Ext.data.Store({
             proxy: new Ext.data.MemoryProxy(data),
             reader: new Ext.data.ArrayReader({}, [
                          {name: 'id'},
                          {name: 'name'},
        {name:'sex'},
                          {name: 'desc'}
                      ])
              });
    var grid = new Ext.grid.GridPanel( {
          el: 'grid',
             ds: ds,
             cm: cm,
    sm:sm,
    bbar:new Ext.PagingToolbar({//分页
         pageSize: 3,
      store: ds,
         displayInfo: true,
         displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
         emptyMsg: '没有记录',
      prependButtons: true,
      items:['']
       }),
    height: 450,
             width: 450,
             title: 'Array Grid',
           // config options for stateful behavior
            stateful: true,
            stateId: 'grid'
        });
       grid.render();
    ds.load({params:{start:0, limit:3,foo: 'bar'
       }});
});
</script>
</head>
<body>
<h1>my ExtJs Grid Test!</h1>
<div id="grid" align="center"></div>
</body>
</html>