GridPanel的使用方法

最新推荐文章于 2019-10-24 20:41:46 发布

dz2008

最新推荐文章于 2019-10-24 20:41:46 发布

阅读量176

点赞数

分类专栏： Ext笔记文章标签： EXT JavaScript CSS 360 HTML ViewUI

Ext笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

GridPanelTest.html

var myData=[
  [0,"MysTitle_0","Dangzhao_0"],
  [1,"MysTitle_1","Dangzhao_1"],
  [2,"MysTitle_2","Dangzhao_2"],
  [3,"MysTitle_3","Dangzhao_3"],
  [4,"MysTitle_4","Dangzhao_4"]
];

var store = new Ext.data.SimpleStore({
  autoLoad : true,
  baseParams : {
   "Action" : "Select",
   "Id" : "0"
  },
  data : myData,
  fields : [
   { name : "id" , mapping : 0},
   { name : "name" , mapping : 2},
   { name : "title" , mapping : 1}
  ],
  id : 0,
  listeners : {
   beforeload : function(){alert("beforedload")},
   load : function(){alert("load")},
   loadexception : function(){alert("loadexception")}
   //And all SimpleStore's Event
  },
  pruneModifiedRecords : false,
  remoteSort : false//because use client data so this property must false,
});

var grid = new Ext.grid.GridPanel({
  store : store,
  title:'Mys GridPanel',
  height:360,
        width:600,
  collapsible : true,
  animCollapse : true,
  allowDomMove : true,
  columns : [
   {id : "id" ,header : "id" , width: 160 ,sortable: true, dataIndex : 'id'},
   {header : "name" , width: 160 ,sortable: true, dataIndex : 'name'},
   {header : "title" , width: 160 ,sortable: true, dataIndex : 'title'}
  ]
});

Ext.onReady(init);
function init(){
grid.render("gridDiv");
}

</script>
</head>

<body>

</div>
</body>
</html>

dz2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
GridPanel的使用方法

GridPanelTest.html &lt;html&gt;&lt;head&gt;&lt;link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /&gt;&lt;script type="text/javascript" src="../../adapt
复制链接

扫一扫

专栏目录