Ext学习这路一

j357777842

浏览: 69117 次
性别:
来自: 深圳

最近访客更多访客>>

daybug

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT CSS JSP Bean prototype

我如何把图片传上来

今天的任务就是从后台取出数据,然后一行一行的在页面展现出来,如上图所示,这是我使用Ext的第一步.

应该说这个步骤很简单,但它却花了我不少的时间!

客户端如下:

<%@ page contentType="text/html; charset=gbk" language="java"%>
<%@ include file="/include/jsp_headers.jsp"%>
<html>
<head>
<title>dictypeList</title>
<%@ include file="/include/Ext_Js_Css.jsp" %>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/customs/grid-examples.css" />
<link rel="stylesheet" type="text/css" href="ext/customs/examples.css" />
<script>
var Grids=function(){
return {

init:function(){

   Ext.QuickTips.init();

      // turn on validation errors beside the field globally
      Ext.form.Field.prototype.msgTarget = 'side';

   this.store=new Ext.data.Store({
    proxy:new Ext.data.HttpProxy({url:'extdictypeList.do?method=extdictypeList'}),
    reader:new Ext.data.JsonReader(
     {totalProperty:'cs',root:'rs',id:"dictypeoid"},
     [{name:'dicTypeOid',type:'float'},{name:'dicTypeCode',type:'string'},
      {name:'dicTypeName',type:'string'},{name:'displayOrder',type:'float'},
      {name:'remark',type:'string'}
     ]
    ),
    remoteSort : true
   });
   this.store.setDefaultSort('dicTypeCode');
   this.store.load({ params:{ start : 0, limit : 10 } });
   var sm = new Ext.grid.CheckboxSelectionModel();
   var ccm = new Ext.grid.ColumnModel([
    sm,
          {id:'dicTypeOid',header : "类OID",dataIndex : 'dicTypeOid',sortable: true,width : 50},
          {header : "类编码",dataIndex : 'dicTypeCode',sortable: true,width :50},
          {header : "类名",dataIndex : 'dicTypeName',sortable: true,width : 100},
          {header : "排序",dataIndex : 'displayOrder',sortable: true,width : 50},
          {header : "备注",dataIndex : 'remark',sortable: true,width : 300}
      ]);
      ccm.defaultSortable = true;
     this.grid = new Ext.grid.GridPanel({
    el:'htmlGridPanel',ds : store,cm : ccm,sm : sm,
          viewConfig: {forceFit:true},
    height:350,width:900,frame:true,
    bbar: new Ext.PagingToolbar({
              pageSize: 10,
              store: store,
              displayInfo: true,
              displayMsg: 'Displaying topics {0} - {1} of {2}',
              emptyMsg: "No topics to display"
          })
      });
     grid.render();
   }

};
}();
Ext.onReady(Grids.init);

function deldata(){
alert(document.getElementsByName("dicTypeOid"));

}

</script>

</head>
<body>
<div>
<input type="button" value="删除" onClick="deldata()"/>
</div>
<div id="htmlGridPanel"></div>
</body>

</html>

java代码:

public ActionForward extdictypeList(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
  response.setContentType("text/html;charset=gb2312");
  request.setCharacterEncoding("gb2312");
  Enumeration eun=request.getParameterNames();
  while(eun.hasMoreElements()) {
   log.info(eun.nextElement());
  }

  String sortfield=request.getParameter("sort");
  String asc=request.getParameter("dir");
  int start=Integer.valueOf(request.getParameter("start"));
  int limit=Integer.valueOf(request.getParameter("limit"));
  TableTagBean ttb = TableTagBean.getFromRequest(request);
  ttb.setPage(start);
  ttb.setPageSize(limit);
  ttb.setOrderBy(sortfield);
  log.info("dir:"+request.getParameter("dir"));
  if("ASC".equals(asc)) {
   ttb.setAsc(true);
  }else {
   ttb.setAsc(false);
  }
  if (request.getMethod().equals("POST")) {
   Map map = PropertyUtils.describe(form);
   ttb.getCondition().copyFrom(map, true);
  } else {
   form = new DicTypeForm();
   BeanUtils.populate(form, ttb.getCondition());
   request.setAttribute("dictypeForm", form);
  }
  try {
//   List<DicType> list = dictypeFacade.findDicTypeListByCondition(ttb
//     .getCondition(), start, limit, ttb.getOrderBy(), ttb.getAsc());
   List<DicType> list = dictypeFacade.findDicTypeListByCondition(ttb);

// ttb.setTotal(dictypeFacade.countDicTypeByCondition(ttb.getCondition()));
// ttb.setList(list);

// request.setAttribute("bean", ttb);

   // request.setAttribute("dictypes", returnJsonString(list));
   StringBuilder sb = new StringBuilder();
   JSONObject obj = new JSONObject();
   JSONArray array = new JSONArray();
   obj.put("cs", ttb.getTotal());
//   log.info("size"+list.size());
   int i=0;
   for (DicType dictype : list) {
    JSONObject obj1 = new JSONObject();
    obj1.put("dicTypeOid", dictype.getDicTypeOid());
    obj1.put("dicTypeCode", dictype.getDicTypeCode());
    obj1.put("dicTypeName", dictype.getDicTypeName());
    obj1.put("remark", dictype.getRemark());
    Double displayorder = dictype.getDisplayOrder();
    if (displayorder == null || displayorder == 0) {
     displayorder = new Double(9999);
    }
    obj1.put("displayOrder", displayorder);
    array.put(obj1);
    i++;
   }
   obj.put("rs", array);
   sb.append(obj);
//   log.info(sb.toString());
   response.getWriter().print(sb.toString());
  } catch (ServiceException se) {
   handleException(request, se, null);
   return mapping.findForward("fail");
  }

return null;
}

分享到：

Ext中实现两层tab

2007-11-21 18:18
浏览 1480
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论