`

在Struts1.2中使用PropertyGrid

阅读更多
1、JSP文件
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
  <head>
	<title></title>
	<link type="text/css" rel="stylesheet" media="all" href="lib/ext-2.2/resources/css/ext-all.css" />
	<script type="text/javascript" src="lib/ext-2.2/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="lib/ext-2.2/ext-all-debug.js"></script>
  </head>
  <script type="text/javascript">
      Ext.onReady(function(){
	var propertyGrid = new Ext.grid.PropertyGrid({
             title: 'Grid',
             id: 'propertyGrid',
             autoHeight: true,
             width: 300,
             renderTo: 'grid',
             source: {} // 初始化数据源的配置对象
           });
 
         var propertyStore = new Ext.data.JsonStore({
             autoLoad: true,  //自动加载数据
               url: '#', //从服务端请求数据
               root: 'properties',
             fields: ['id', 'name', 'age'],
             listeners: {
                load: {
                  fn: function(store, records, options){
                     // 获取propety grid组件
                        var propGrid = Ext.getCmp('propertyGrid');
                     // 保证grid是存在的
                        if (propGrid) {
                        // 获得property grid 的store数据
                           propGrid.setSource(store.getAt(0).data);
                    }
                }
            }
          }
        }); 
		
      };
  <body>
      <div id="grid"></div>
  </body>
</html>


3、服务器端返回的内容
{"properties":[
    {
        "id":"1",
        "name":"qxp",
        "age":"27"
    }
]}

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics