WebStandard extJS

From JCFWiKi

Jump to: navigation, search

그림:check.gif

  • 산출물 : 일반웹 grid에서 extJS 느낌내기
  • 작성자 : 김민아
  • 최초작성일 : 2008/07/16

Copyright © 2008 Daewoo Information Systems Co., Ltd.

그림:information.gif

이곳은 일반 jsp table을 extJS 그리드로 바꾸는 예제에 대해 다룬다.

목차

[편집] 샘플화면보기

보러가기

[편집] 준비사항

  • ext-base.js
  • ext-all.js
  • ext-all.css

[편집] jsp 파일보기

  • 밑의 예제에서와 같이 ext-base.js, ext-all.js, ext-all.css를 import 시킨다.(이파일은 extJs사이트에서 다운받도록 한다.)
  • 밑에서 설명할 comUsr.js파일도 import시킨다. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--extJs 스크립트  -->
<script type="text/javascript"
	src="/../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/../js/ext/ext-all.js"></script>
<!--extJs  css   -->
<link rel="stylesheet" type="text/css"
	href="/../js/ext/resources/css/ext-all.css" />
<!--comUsr.js-->
<script type="text/javascript" src="/../jcf/biz/comUsr.js"></script>
 
</head>
<body>
<h1><s:text name="사용자 관리" /></h1>
...
<!-- form 정의  -->
<s:form name='userList' action="delComUsrList.action">
	<!-- 그리드 시작 -->
	<table cellspacing="0" width="550" id='usrGrid'>
		<thead>
			<tr>
				<th align="center">사번</th>
				<th align="center">성명</th>
				<th align="center">소속사</th>
				<th align="center">부서</th>
			</tr>
		</thead>
		<tbody>
			<s:iterator value="userList">
				<tr>
					<td align="center"><s:property value="empId" /></td>
					<td align="center"><s:property value="userName" /></td>
					<td align="center"><s:property value="compCode" /></td>
					<td align="center"><s:property value="deptId" /></td>
				</tr>
			</s:iterator>
		</tbody>
	</table>
	<!-- 그리드 끝-->
 
</s:form>
</body>
</html>

[편집] js파일 보기(comUsr.js)

  • 밑의의 소스를 그대로 복사에서 사용하되 "usrGrid"는 jsp파일의 table으로 id이므로 이부분만 바꾸어준다. 
/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
 
Ext.onReady(function() {
	   Ext.QuickTips.init();
	 gridBind();
 
	 
  function gridBind(){
  	// create the grid
 
    var grid = new Ext.grid.TableGrid("usrGrid", {
      stripeRows: true // stripe alternate rows
    });
    grid.render();
  }
 
});
 
/**
 * @class Ext.grid.TableGrid
 * @extends Ext.grid.Grid
 * A Grid which creates itself from an existing HTML table element.
 * @constructor
 * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created - 
 * The table MUST have some type of size defined for the grid to fill. The container will be 
 * automatically set to position relative if it isn't already.
 * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
 * properties: fields and columns which allow for customizing data fields and columns for this grid.
 * @history
 * 2007-03-01 Original version by Nige "Animal" White
 * 2007-03-10 jvs Slightly refactored to reuse existing classes
 */
Ext.grid.TableGrid = function(table, config) {
  config = config || {};
  Ext.apply(this, config);
  var cf = config.fields || [], ch = config.columns || [];
  table = Ext.get(table);
 
  var ct = table.insertSibling();
 
  var fields = [], cols = [];
  var headers = table.query("thead th");
  for (var i = 0, h; h = headers[i]; i++) {
    var text = h.innerHTML;
    var name = 'tcol-'+i;
 
    fields.push(Ext.applyIf(cf[i] || {}, {
      name: name,
      mapping: 'td:nth('+(i+1)+')/@innerHTML'
    }));
 
    cols.push(Ext.applyIf(ch[i] || {}, {
      'header': text,
      'dataIndex': name,
      'width': h.offsetWidth,
      'tooltip': h.title,
      'sortable': true
    }));
  }
 
  var ds  = new Ext.data.Store({
    reader: new Ext.data.XmlReader({
      record:'tbody tr'
    }, fields)
  });
 
  ds.loadData(table.dom);
 
  var cm = new Ext.grid.ColumnModel(cols);
 
  if (config.width || config.height) {
    ct.setSize(config.width || 'auto', config.height || 'auto');
  } else {
    ct.setWidth(table.getWidth());
  }
 
  if (config.remove !== false) {
    table.remove();
  }
 
  Ext.applyIf(this, {
    'ds': ds,
    'cm': cm,
    'sm': new Ext.grid.RowSelectionModel(),
    autoHeight: true,
    autoWidth: false
  });
  Ext.grid.TableGrid.superclass.constructor.call(this, ct, {});
};
 
Ext.extend(Ext.grid.TableGrid, Ext.grid.GridPanel);

[편집] 주의사항

  • 경로설정주의
    • js파일과 css파일의 경로가 정확해야한다.(FireFox의 FireBug로 보았을 때 위에서 설명한 js파일과 css파일이 잘 import되어있어야 한다.)
  • 별도의 CSS 생략
    • 위에서 import한 CSS외에는 임으로 CSS를 적용하지 않도록 한다.(그리드에 css중복 적용됨)
  • jsp파일의 제일 상단 주의
    • jsp파일의 제일 상단이 밑에와 같이 시작되어야한다.그렇지 않으면 grid가 깨진다. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
원본 주소 - 'http://wiki.dev.daewoobrenic.co.kr/mediawiki/index.php/WebStandard_extJS'