블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 달린 댓글

'ext'에 해당되는 글 4건

  1. 2009.03.31 extjs RowAction 붙이기 (1)
  2. 2008.04.01 ExtJS 로드맵
  3. 2008.02.17 Extjs scope에 대한 고찰 (2)
  4. 2008.02.15 ExtJS 개발하기 위해 선행되는 지식들 (7)


기본적으로 grid의 View에 editor와 같이 다른 컴포넌트를 붙이기는 기존 소스보다 컴포넌트를 붙이는 소스가 더 많이 들어가는 경우가 있다.
데꾸벅의 경우도 프로젝트중 각각의 그리드 Row마다 progress bar를 붙여야 하는 경우가 생겼었는데..
포럼글을 뒤지다가 다음과 같은 좋은 사용자 플러그인이 있어 분석을 위해 소스를 까 보았다.



위 그림에서 보는바와 같이 그리드위에 버튼을 만들어 올릴때 new Ext.button이 아닌 new Ext.Action을 사용하여 사용자 플러그인을 사용한 소스이다.
소스 API  및 관련 포럼글 

HTML
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link rel="stylesheet" type="text/css" href="./css/icons.css">
 <link rel="stylesheet" type="text/css" href="./css/Ext.ux.grid.RowActions.css">
    <link rel="stylesheet" type="text/css" href="../../ext/ext-2.2/resources/css/ext-all.css" />
    <script type="text/javascript" src="../../ext/ext-2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext/ext-2.2/ext-all.js"></script>
 <script type="text/javascript" src="./js/Ext.ux.grid.RowActions.js"></script>
 <script type="text/javascript" src="./js/Ext.ux.Toast.js"></script>
 <script type="text/javascript" src="rowactions.js"></script>
</head>
<body></body>
</html>





JS

Ext.BLANK_IMAGE_URL = '';
Ext.ns('Example');
Example.version = '1.0';

Example.Grid = Ext.extend(Ext.grid.GridPanel, {

  initComponent:function() {

   // Create RowActions Plugin
   this.action = new Ext.ux.grid.RowActions({
    header:'Actions'
   ,autoWidth:true
   ,keepSelection:true
   ,actions:[{
     iconIndex:'action1'
    ,qtipIndex:'qtip1'
    ,iconCls:'icon-open'
    ,tooltip:'Open'
   },{
     iconCls:'icon-wrench'
    ,tooltip:'Configure'
    ,qtipIndex:'qtip2'
    ,iconIndex:'action2'
    ,hideIndex:'hide2'
   },{
     iconIndex:'action3'
    ,qtipIndex:'qtip3'
    ,iconCls:'icon-user'
    ,tooltip:'User'
    ,style:'background-color:yellow'
   }]
   ,groupActions:[{
     iconCls:'icon-del-table'
    ,qtip:'Remove Table'
   },{
     iconCls:'icon-add-table'
    ,qtip:'Add Table - with callback'
    ,callback:function(grid, records, action, groupId) {
     Ext.ux.Message.msg('Callback: icon-add-table'
         , 'Group: <b>{0}</b>, action: <b>{1}</b>, records: <b>{2}</b>'
         , groupId
         , action
         , records.length);
    }
   },{
     iconCls:'icon-graph'
    ,qtip:'View Graph'
    ,align:'left'
   }]
   ,callbacks:{
    'icon-plus':function(grid, record, action, row, col) {
     Ext.ux.Message.msg('Callback: icon-plus'
         , 'You have clicked row: <b>{0}</b>, action: <b>{0}</b>'
         , row
         , action);
    }
   }
  });

  this.action.on({
   action:function(grid, record, action, row, col) {
    Ext.ux.Message.msg('Event: action', '클릭한 Row: <b>{0}</b>, 액션: <b>{1}</b>'
        , row
        , action);
   }
   ,beforeaction:function() {
    Ext.ux.Message.msg('Event: beforeaction', '핸들러에서 false반환시 액션취소.');
   }
   ,beforegroupaction:function() {
    Ext.ux.Message.msg('Event: beforegroupaction', '핸들러에서 false반환시 액션취소');
   }
   ,groupaction:function(grid, records, action, groupId) {
    Ext.ux.Message.msg('Event: groupaction', 'Group: <b>{0}</b>, action: <b>{1}</b>, records: <b>{2}</b>', groupId, action, records.length);
   }
  });

  Ext.apply(this, {
    store:new Ext.data.Store({
    reader:new Ext.data.JsonReader({
      id:'company'
     ,totalProperty:'totalCount'
     ,root:'rows'
     ,fields:[
      {name: 'company'}
        ,{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ,{name: 'industry'}
        ,{name: 'desc'}
        ,{name: 'action1', type: 'string'}
        ,{name: 'action2', type: 'string'}
        ,{name: 'action3', type: 'string'}
        ,{name: 'qtip1', type: 'string'}
        ,{name: 'qtip2', type: 'string'}
        ,{name: 'qtip3', type: 'string'}
        ,{name: 'hide2', type: 'boolean'}
     ]
    })
    ,proxy:new Ext.data.HttpProxy({url:'jsonData.json'})
    ,sortInfo:{field:'company', direction:'ASC'}
    ,listeners:{
     load:{scope:this, fn:function() {
      this.getSelectionModel().selectFirstRow();
     }}
    }
   })
   ,columns:[
    {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'}
    ,{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'}
    ,{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ,this.action
   ]
   ,plugins:[this.action]
   ,loadMask:true
   ,viewConfig:{forceFit:true}
  });

  this.bbar = new Ext.PagingToolbar({
    store:this.store
   ,displayInfo:true
   ,pageSize:10
  });

  Example.Grid.superclass.initComponent.apply(this, arguments);
 }


 ,onRender:function() {
  Example.Grid.superclass.onRender.apply(this, arguments);
  this.store.load({params:{start:0, limit:10}});
 }
});

//컴포넌트 등록
Ext.reg('techbuggrid', Example.Grid);

Ext.onReady(function() {
    Ext.QuickTips.init();

    var win = new Ext.Window({
         width:600
  ,minWidth:320
        ,id:'agwin'
        ,height:400
        ,layout:'fit'
        ,border:false
  ,plain:true
        ,closable:false
        ,title:"그리드 Row Action 처리하기"
  ,items:{xtype:'techbuggrid',id:'actiongrid'}
    });
    win.show();
});




사용자 플러그인.JS

Ext.ns('Ext.ux.grid');
if('function' !== typeof RegExp.escape) {
 RegExp.escape = function(s) {
  if('string' !== typeof s) {
   return s;
  }
  return s.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1');
 };
}

Ext.ux.grid.RowActions = function(config) {
 Ext.apply(this, config);
 this.addEvents(
   'beforeaction'
  ,'action'
  ,'beforegroupaction'
  ,'groupaction'
 );
 Ext.ux.grid.RowActions.superclass.constructor.call(this);
};

Ext.extend(Ext.ux.grid.RowActions, Ext.util.Observable, {
  actionEvent:'click'
 ,autoWidth:true
 ,dataIndex:''
 ,header:''
 ,keepSelection:false
 ,menuDisabled:true
 ,sortable:false
 ,tplGroup:
   '<tpl for="actions">'
  +'<div class="ux-grow-action-item<tpl if="\'right\'===align"> ux-action-right</tpl> '
  +'{cls}" style="{style}" qtip="{qtip}">{text}</div>'
  +'</tpl>'
 ,tplRow:
   '<div class="ux-row-action">'
  +'<tpl for="actions">'
  +'<div class="ux-row-action-item {cls} <tpl if="text">'
  +'ux-row-action-text</tpl>" style="{hide}{style}" qtip="{qtip}">'
  +'<tpl if="text"><span qtip="{qtip}">{text}</span></tpl></div>'
  +'</tpl>'
  +'</div>'
 ,hideMode:'visiblity'
 ,widthIntercept:4
 ,widthSlope:21
 ,init:function(grid) {
  this.grid = grid;
  if(!this.tpl) {
   this.tpl = this.processActions(this.actions);
  }
  if(this.autoWidth) {
   this.width =  this.widthSlope * this.actions.length + this.widthIntercept;
   this.fixed = true;
  }
  var view = grid.getView();
  var cfg = {scope:this};
  cfg[this.actionEvent] = this.onClick;
  grid.afterRender = grid.afterRender.createSequence(function() {
   view.mainBody.on(cfg);
   grid.on('destroy', this.purgeListeners, this);
  }, this);

  if(!this.renderer) {
   this.renderer = function(value, cell, record, row, col, store) {
    cell.css += (cell.css ? ' ' : '') + 'ux-row-action-cell';
    return this.tpl.apply(this.getData(value, cell, record, row, col, store));
   }.createDelegate(this);
  }

  if(view.groupTextTpl && this.groupActions) {
   view.interceptMouse = view.interceptMouse.createInterceptor(function(e) {
    if(e.getTarget('.ux-grow-action-item')) {
     return false;
    }
   });
   view.groupTextTpl =
     '<div class="ux-grow-action-text">' + view.groupTextTpl +'</div>'
    +this.processActions(this.groupActions, this.tplGroup).apply()
   ;
  }

  if(true === this.keepSelection) {
   grid.processEvent = grid.processEvent.createInterceptor(function(name, e) {
    if('mousedown' === name) {
     return !this.getAction(e);
    }
   }, this);
  }
  
 }
 ,getData:function(value, cell, record, row, col, store) {
  return record.data || {};
 }

 ,processActions:function(actions, template) {
  var acts = [];

  Ext.each(actions, function(a, i) {
   if(a.iconCls && 'function' === typeof (a.callback || a.cb)) {
    this.callbacks = this.callbacks || {};
    this.callbacks[a.iconCls] = a.callback || a.cb;
   }

   var o = {
     cls:a.iconIndex ? '{' + a.iconIndex + '}' : (a.iconCls ? a.iconCls : '')
    ,qtip:a.qtipIndex ? '{' + a.qtipIndex + '}' : (a.tooltip || a.qtip ? a.tooltip || a.qtip : '')
    ,text:a.textIndex ? '{' + a.textIndex + '}' : (a.text ? a.text : '')
    ,hide:a.hideIndex
     ? '<tpl if="' + a.hideIndex + '">'
      + ('display' === this.hideMode ? 'display:none' :'visibility:hidden') + ';</tpl>'
     : (a.hide ? ('display' === this.hideMode ? 'display:none' :'visibility:hidden;') : '')
    ,align:a.align || 'right'
    ,style:a.style ? a.style : ''
   };
   acts.push(o);

  }, this);

  var xt = new Ext.XTemplate(template || this.tplRow);
  return new Ext.XTemplate(xt.apply({actions:acts}));

 }
 ,getAction:function(e) {
  var action = false;
  var t = e.getTarget('.ux-row-action-item');
  if(t) {
   action = t.className.replace(/ux-row-action-item /, '');
   if(action) {
    action = action.replace(/ ux-row-action-text/, '');
    action = action.trim();
   }
  }
  return action;
 }
 ,onClick:function(e, target) {

  var view = this.grid.getView();

  var row = e.getTarget('.x-grid3-row');
  var col = view.findCellIndex(target.parentNode.parentNode);
  var action = this.getAction(e);

  if(false !== row && false !== col && false !== action) {
   var record = this.grid.store.getAt(row.rowIndex);

   if(this.callbacks && 'function' === typeof this.callbacks[action]) {
    this.callbacks[action](this.grid, record, action, row.rowIndex, col);
   }

   if(true !== this.eventsSuspended && false === this.fireEvent('beforeaction', this.grid, record, action, row.rowIndex, col)) {
    return;
   }
   else if(true !== this.eventsSuspended) {
    this.fireEvent('action', this.grid, record, action, row.rowIndex, col);
   }

  }

  t = e.getTarget('.ux-grow-action-item');
  if(t) {
   var group = view.findGroup(target);
   var groupId = group ? group.id.replace(/ext-gen[0-9]+-gp-/, '') : null;

   var records;
   if(groupId) {
    var re = new RegExp(RegExp.escape(groupId));
    records = this.grid.store.queryBy(function(r) {
     return r._groupId.match(re);
    });
    records = records ? records.items : [];
   }
   action = t.className.replace(/ux-grow-action-item (ux-action-right )*/, '');

   if('function' === typeof this.callbacks[action]) {
    this.callbacks[action](this.grid, records, action, groupId);
   }

   if(true !== this.eventsSuspended && false === this.fireEvent('beforegroupaction', this.grid, records, action, groupId)) {
    return false;
   }
   this.fireEvent('groupaction', this.grid, records, action, groupId);
  }
 }

});

Ext.reg('rowactions', Ext.ux.grid.RowActions);




요기 괜찮은 사용자 플러그인도 함 보세요





















'Scripter > EXTJS' 카테고리의 다른 글

Extjs Core 3.0 Beta 릴리즈  (4) 2009.04.07
Examples Of ExtJS in Action  (2) 2009.03.31
extjs RowAction 붙이기  (1) 2009.03.31
extjs 2.2의 IE에서 iframe document load 버그패치  (0) 2009.01.21
Extjs 3.0 Roadmap  (10) 2008.11.12
Ext2.2 Release  (11) 2008.08.07
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2012.04.25 00:43 Management Thesis  댓글주소  수정/삭제  댓글쓰기

    아주 좋은 블로그와 나는 하드 작업을 정말로 감사합니다 .. 그리고 당신이 매일 블로그를 업데이 트 바란다

ExtJS 로드맵

Scripter/EXTJS / 2008. 4. 1. 22:58
매일 프로젝트를 수행하면서 Ext의 새로운 버전이 나올때마다 현재 작업버전과 호환이 될까 노심초사하면서 테스팅하던 때가 있었는데 이번에 Extjs의 Roadmap이 공개가 되었다.

올 겨울에 나올 Ext3.0은 chart기능과 Comet기능까지 추가 된다니 기대가 되긴하는데 프레임웍 자체가 너무 방대해지는건 아닐까 걱정해 본다... (스크립트언어인데..방대해지면.. 문제가... ㅡ.,ㅡ;)


ExtJS의 로드맵 --------------------------------------------
2008년의 목표는 2.x 버전의 새로운 컴포넌트 추가와 현재 몇몇 기능을 향상하는 선이다.
앞으로 3.0에서 보는봐와 같이  챠트와, Comet(실시간 통신-Ajax는 Reqeust에 의한 Response방식인데 비해 Coment은 일반 어플리케이션처럼 릴레이션을 물고 있다 :데꾸벅 주) 을 추가하여 큰그림을 그리고 있다.... 이하 생략...원문참조


2.1 (2008 봄)

  • RESTFul 지원 (그리 RESTFul 하지 않던데.. ㅡ.,ㅡ;)
  • 원격컴포넌트 로딩
  • 전통적인 비Ajax적인 Submit 지원클래스
  • 다른 JS라이브러리 Adapter 업그레이드
  • AIR 플랫폼 지원추가
  • 그리드 필터링
  • 체크박스/라이오 그룹
  • 상태바

2.2 (2008 여름)

  • Ext.Ajax 기능향상
  • Ext컴포넌트만의 초점을 맞춘(scoped) reset style지원
  • XML을 포함한 추가적인 TreeLoader 데이타로딩
  • 슬라이더 컴포넌트
  • 파일업로드 필드

3.0 (2008 겨울/2009 초)

  • Ext 이벤트 등록모델 업데이트
  • 플래쉬 챠트 API ( Gwt-Ext에는 구글 챠트를 이용하던데..)
  • Comet/Bayeux 지원
  • 통합된 client-server 데이타 바인딩/marshaling for Ext components
  • Browser history support (흠.. window.event.hash값을 이용한걸까? 기대되네..)
  • ListView
  • Section 508(장애자 지원정책:웹접근성) 기능향상


여튼 3.0이 기대되는건 사실이자나...  ^^ 



'Scripter > EXTJS' 카테고리의 다른 글

Extjs 기본레이아웃에 각종 패널붙이기  (12) 2008.04.16
ExtJS를 이용한 EditorGrid 붙이기  (2) 2008.04.07
ExtJS 로드맵  (0) 2008.04.01
ExtJS를 이용한 Password Meter  (0) 2008.04.01
Ext JS Ext.ux.YoutubePlayer  (0) 2008.03.29
Extjs를 이용한 간단한 form submit  (0) 2008.03.14
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

시작하기 전에
Edit section

이 튜토리얼을 공부하기 위한 가장 좋은 방법은 파이어폭스파이어버그를 바로 곁에 두는 것입니다. 이 방법으로 본 튜토리얼내의 예제를 즉시 테스트 해볼 수 있습니다.

만약 아직 가지고 있지 않다면 두 가지 모두 설치 하세요.

정의
Edit section

scope
1. (명사) 어떤 활동 혹은 작업 또는 힘을 가지거나 제어를 할 수 있는 지역 [1]
2. (명사) 프로그램 내에서 변수의 접근 범위; 예를 들어 어떤 함수가 다른 함수에서 생성된 변수를 사용할 수 있는지 여부. [2]

함수 실행 시 어디에 있는 변수에 접근이 가능 한지 찾는 중에 누군가가 "이건 스코프 문제야" 혹은 "이건 잘못된 스코프에서 실행 중이야" 라고 하거나 그와 비슷하게 이야기를 하면 우리는 어떻게 이것을 처리해야 할까요?

이제 가봅시다
Edit section

사실 자바스크립트 내에서 선언된 함수들은 객체에 소속된 메소드들 입니다. 아래와 같이 코드를 작성하더라도 말이죠:

function fn() {
    alert(11);
}

제가 농담을 하고 있다고 말하시겠죠. 하지만 이게 진짜 진실인지 아주 쉽고 간단하게 증명 해낼 수 있습니다. 이 예제를 위해서 어떠한 자바스크립트 파일이나 서버, 혹은 html이 필요치 않습니다. 단지 파이어폭스를 열고 파이어버그의 하단 윈도우를 열어서 콘솔 탭을 클릭하고 브라우저의 status 바 바로 위에 >>> 입력란에 코드를 입력하면 됩니다.

아래와 같이 입력하고:

function fn() { alert(11); };

엔터를 입력하면 아무 반응이 없습니다. 그렇죠? fn 함수만 선언 한 것이지요. 다음과 같이 입력합니다:

fn();

엔터를 입력하면 11이 적힌 경고 창을 볼 수 있습니다. 여기까지 잘 따라 오셨습니다. 다시 입력해봅시다:

window.fn();
this.fn();

같은 결과가 보이나요? 함수 fn은 window 객체의 메서드가 된 것을 알 수 있고 두 번째 라인은 this 변수가 window 객체를 가리키고 있다는 사실을 증명합니다. 이런고로 자신의 함수를 window.myFunction(...)처럼 호출할 필요가 없다는 것이죠. 이것은 편리하기도 하고 게으른 프로그래머들의 일을 덜어줍니다.

window 객체
Edit section

window 객체는 항상 존재하며 브라우저 윈도우 그 자체 라고 생각 하시면 됩니다. 이것은 document 객체와 전역(global)으로 선언된 모든 변수와 같은 다양한 객체를 담고 있습니다.

다시 파이어버그를 열어서 Script 탭으로 변경 시키고 우측에 "New watch expression..." 라고 적혀 있는 박스에 window 라고 입력 합니다. 그러면 window 객체에 어떤 것들이 있는지 살펴 볼 수 있습니다.

특히 방금 전 선언했던 fn 함수를 찾아 보시기 바랍니다.

각각의 frame 혹은 iframe은 자신만의 고유한 영역에서 독립적인 window 객체를 가지고 있습니다.

스코프(scope) 이해하기
Edit section

이제 조금 더 어려운걸 해봅시다. 다시 파이어버그의 Console 탭을 선택하고 다음과 같이 입력합니다:

var o1 = {testvar:22, fun:function() { alert('o1: ' + this.testvar); }};
var o2 = {testvar:33, fun:function() { alert('o2: ' + this.testvar); }};

우리가 무엇을 한 것일까요? 객체 o1o2 를 선언했고 이 둘은 같은 이름의 프로퍼티와 메서드를 가지고 있지만 각각의 프로퍼티는 다른 값을 가지고 있습니다.

아래와 같이 입력합니다:

fun();
window.fun();
this.fun();

에러가 발생하지요? 좋습니다. window 객체(this와 동일)는 fun 메소드를 가지고 있지 않습니다. 아래와 같이 해보세요:

o1.fun();
o2.fun();

이제 22와 33이 보이죠? 아주 좋습니다!

이제 이 복잡한 부분의 마지막입니다. 지금까지는 간단한 함수들을 사용했고 그래서 개별 객체의 타입(type)에 대해서 신경 쓸 필요가 없었습니다. 하지만 o1.fun 이 아주 기능이 많고 지난주부터 작업해서 이제 마지막 작업 단계에 있다고 칩시다. 코드 내에 산재해 있는 this 변수가 100 라인 정도 된다고 상상해 보자 구요. o1.fun을 호출(실행)시 this가 o2를 가리키고 있다면 어떻게 해결해야 할까요? 아래와 같이 입력해봅시다:

o1.fun.call(o2);

o1의 fun 메소드가 실행 중 일 때 강제로 변수 this 가 o2를 지정되게 설정된걸 보셨나요? 좀더 유식하게 말하면 다음과 같습니다: 메소드 o1.fun이 객체 o2의 스코프(scope)내에서 실행 된다

정리하면 스코프는 어떤 객체의 메서드로서 함수가 실행 중 일 때 this 변수의 값이다 라고 생각하시면 될 것 같습니다.

변수의 가시범위(Visibility)
Edit section

변수의 가시범위는 이전 단락인 스코프 항목과 밀접한 관계에 있습니다. 우리는 이미 변수(함수를 포함한 모든 변수)가 어떤 객체나 함수 밖에 선언되면 전역으로 등록 된다고 알고 있습니다. 기술적으로 다시 말하면 window 객체의 전역 프로퍼티가 되는 것이지요.

전역 변수들은 어디에서든지 보입니다;어떤 함수들의 안에서든 밖에서든. 만약 하나의 함수에서 전역 변수를 수정하게 되면 다른 함수들은 변경된 값을 보게 됩니다.

이제 객체가 자신만의 고유한 프로퍼티(앞서 testvar 예제처럼)를 갖는다는 걸 알 수 있게 되었습니다. 이것은 객체의 안과 밖에서 접근 가능한데, 맞는지 직접 시험해 봅시다:

alert(o1.testvar); // o1의 프로퍼티인 testvar를 외부에서 접근

내부에서 접근하는 것은 아까 두 개의 fun 메소드 시연에서 이미 해봤으므로 그냥 넘어 갑니다.

이제 마지막으로 남은 퍼즐의 조각은 지역 변수는 함수 내에서 var 키워드와 같이 선언 되어야 한다는 겁니다:

i = 44; 
function fn2() { 
    var i = 55; 
    alert(i); 
}
fn2();

어떤 것을 보았나요? 55 이지요. 변수 i 는 fn2 내에 선언 되어 fn2의 지역 변수가 되었고 44가 들어있는 전역 변수인 i 에 접근하지 않습니다.

하지만 이렇게 하면:

alert(i);

전역 변수 i 에 접근하기 때문에 44가 나오는 것을 볼 수 있습니다.

이 문서가 스코프와 변수 가시범위 공부에 많은 도움이 되길 바랍니다.

더 읽을만한 것들:


'Scripter > EXTJS' 카테고리의 다른 글

Extjs 기본 DomQuery  (0) 2008.02.18
Extjs 초보자를 위한 애플리케이션 레이아웃(2.02)  (8) 2008.02.17
Extjs scope에 대한 고찰  (2) 2008.02.17
ExtJS Tutorial  (1) 2008.02.17
ExtJS 시작하기  (8) 2008.02.17
ExtJS 개발하기 위해 선행되는 지식들  (7) 2008.02.15
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2010.04.06 23:06 꼼즈  댓글주소  수정/삭제  댓글쓰기

    잘 읽었습니다.. 아주 좋은 글이예요~~

  2. 2012.08.07 15:43 방문자  댓글주소  수정/삭제  댓글쓰기

    아주 잘 읽었습니다. 초보 개발자에게 도움이 잘되네요 감사합니다.

넥스트리 포스팅했던글을 다시 정리하여 올리다.
사내 제품개발시 ExtJS를 사용할 일이 있어 내용을 보다가 해당사이트(www.extjs.com)을 번역하기로 맘먹었다.



매뉴얼번역: http://extjs.com/learn/Manual:Resources

ExtJS로 개발하기 위해서는 다음과 같은 것들이 필요하다. 반드시 읽어 볼것... 이미 앞의 EXTJS 시작하기 에서  맛뵈기(?)로 보았으니 이를 개발하기 위한 준비물들이 필요하겠다.


일반적인 JavaScript Learning Guide
Edit section

참고사이트
Edit section

  1. Mozilla Developer Center: Core JavaScript 1.5 Reference Manual
  2. Yahoo UI개발자인 Douglas Crockford's JavaScript
  3. Yahoo Developer Network : YUI Theater  ( 더글라스 크록포드의 동영상 강의 수록)
  4. Peter-Paul Koch의 QuirksMode
  5. http://home.cogeco.ca/~ve3ll/jstutor0.htm

그외 볼만한 사이트(Dead Trees)
Edit section

  1. JavaScript: The Definitive Guide by David Flanagan
  2. Pro JavaScript Techniques by John Resig
  3. Ajax and REST Recipes by Christian Gross
  4. ppk on JavaScript by Peter-Paul Koch
  5. Professional JavaScript for Web Developers by Nicholas C. Zakas
  6. Ajax Patterns and Best Practices by Christian Gross
  7. Dynamic HTML by Danny Goodman
  8. Head First Design Patterns by Freeman & Freeman

 

OO JavaScript 참조사이트

  1. How to achieve private, public, and privileged members in JavaScript, by Dustin Diaz.
    : Method scoping에 대한 좋은 설명
  2. OOP in JS, Part 1 : Public/Private Variables and Methods, by Gavin Kistner.
    : Scoping 및 prototyping에 대한 샘플
  3. A JavaScript Module Pattern, by Eric Miraglia in YUI Blog.
    : 더글라스 크록포드가 얘기한 module pattern에 대한 설명
  4. Again with the Module Pattern - reveal something to the world, by Christian Heilmann.
    : 모듈패턴
  5. JavaScript for Object-Oriented Programmers (Appendix B of the book AJAX in Action).

DOM

 

 

그외 기술

Yahoo! User Interface Library (YUI)

Ext JS 은 yui-ext에서 부터 시작되었다. 아래 사이트에서 YUI에 대해서 좀 봐두는것도 좋을지도..

  1. YUI Library
  2. ydn-javascript: Yahoo! User Interface Library Group
  3. YUI Blog

JSON 관련

 

 

Platform-Specific Resources

ExtJS를 서버사이드 프레임웍으로 사용한 녀석들.....

PHP
Edit section

대표적인 샘플코드는 모두 PHP코드로 되어 있는 걸 보면  PHP에서 개발하기 가장 쉬운것 같음.
ExtJS 내장 PHP프레임웍 :  Qcodo Development Framework

Java

Direct Web Remoting (DWR) : http://getahead.org/dwr

.NET

  • AjaxPro 는 .Net 을 이용한 서버사이드 Ajax
  • Jayrock  :  .Net에 JSON / JSON-RPC 를 이용 
  • Json.NET  : .Net에서 JSON을 쓰게 만들어주는 라이브러리 (PHP의 toJSON()이나, Struts의 JSON과 같은건가 보다... ㅡ.,ㅡ; ) 

Ruby on Rails

Ext plugin - ROR는 내장 플러그인으로 작동하므로 gem을 이용해 받으면 되겠다...  (찾기가 더 힘드네.. ㅡ.,ㅡ;)

IBM Lotus Notes/Domino

IBM's Lotus Notes/Domino : IBM 머찌다라는 말만..

 

 

통합개발툴(IDE)
Edit section

Eclipse Based IDEs

Eclipse 은 오픈소스 통합개발툴 (among other things!)이다. ExtJS개발을 위해 이클립스를 사용하기 위해서는 먼저 자바스크립트 사용할수 있는 플러그인을 설치해야 한다.
아래의 플러그인을 추천한다.

  • Aptana - JavaScript, HTML, CSS, PHP languages, FTP/SFTP 지원, RIA/Web2.0등 Ajax 관련 프로젝트에 적합 (느리다는 단점이 있음.. ㅠ.,ㅠ)
  • Spket - JavaScript, XUL, SVG, Laszlo, Silverlight,등 각 모듈 라이브러리 지원(http://blog.naver.com/techbug/150024518549 )
  • JSEclipse - JavaScript

위에 열거된 플러그 인들은 각자 자바스크립트 에디터를 포함하고 있다.  자바스크립트를 열때 "Open with"로 열어서 사용하도록...플러그인을 선택할때는 코드 assist를 지원하는지 확인해 봐야 할듯

 

Aptana + Spket + ExtJS(강추..)
  • Aptana다운로드 http://www.aptana.com/download_all.php
  • Aptana > Help > Software Updates > Find and Install > Search for new features to install > New remote site.. > "http://www.spket.com/update/"
  • Spket설치 ( Spket IDE Tutorial )
    1. Window > Preferences > Spket > JavaScript Profiles > New > "ExtJS"
    2. "ExtJS" 선택하고  "Add Library"에서 "ExtJS"선택
    3.  "ExtJS" 선택하고 "Add File", 에서 "./ext-2.0/source" 디렉토리에서 "ext.jsb"를 선택
    4. ExtJS profile을 디폴트로 선택 
    5. Aptana 플러그인을 새 시작
    6. 새로운 JS파일을 만들면 ExtJS의 Code completion options를 볼수 있다.

AptanaIDE

  • Aptana는 상당히 매력적인 플러그인다. 대부분의 Ajax Library를 제공한다.

 

 


 

다양한 디버깅툴

Firebug (FF에서 강추)

Firebug는 Firefox에 애드온되어 작용하는데 웹페이지의 내용(CSS,HTML,Javscript등)을 실시간으로 볼수있는 상당히 매력적인 도구이다.


Screencasts


Tutorials


다른 브라우저에서 Firebug console을 이용하기

HTTP Trafic Viewer

피들러는 서버와 PC사이의 HTTP 트래픽 로그를 볼수 있는 디버깅 프록시이다. IE전용이나 Firefox의 proxy고급옵션에서 사용할수 있으며 자신이 원하는대로 필터링 하여 사용할수 있다.

MS Script Editor

IE Web Developper

IE WebDeveloper는 인터넷 익스플로러 애드온 프로그램이다. 

Testing Data Generator

SQL,CSV,xml, excel등 테스트 데이타를 생성해준다.

http://www.benjaminkeen.com/software/data_generator/

YSlow

YSlow는  rules for high performance web sites를 기반으로 현재 페이지의 속도를 분석해준다. YSlow 는 Firefox 애드온 프로그램으로 인기가 있다.Firebug web development tool.

  • Performance report card
  • HTTP/HTML summary
  • List of components in the page
  • Tools including JSLint

http://developer.yahoo.com/yslow/

DebugBar - IE 플러그인 (강추)

  • DOM Inspector,
  • HTTP Inspector
  • Javascript Inspector and Javascript Console
  • HTML Validator
  • And many more features

http://www.debugbar.com/?langage=en


'Scripter > EXTJS' 카테고리의 다른 글

Extjs 기본 DomQuery  (0) 2008.02.18
Extjs 초보자를 위한 애플리케이션 레이아웃(2.02)  (8) 2008.02.17
Extjs scope에 대한 고찰  (2) 2008.02.17
ExtJS Tutorial  (1) 2008.02.17
ExtJS 시작하기  (8) 2008.02.17
ExtJS 개발하기 위해 선행되는 지식들  (7) 2008.02.15
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2010.04.06 22:46 꼼즈  댓글주소  수정/삭제  댓글쓰기

    아나~ 뭐 이리 볼게 많아.. 짜잉나게.. ㅠ.ㅠ
    하튼 거맙다.. 떵~ 니 게시물 다 읽어줌마~~~~~ 냐하핫~~!

  2. 2010.04.06 22:47 꼼즈  댓글주소  수정/삭제  댓글쓰기

    아... 여기도 오오구나... ㅠ.ㅠ
    오오~~~ 마이 갓~! (지굽다.... 이 생활이...)

  3. 2010.04.06 22:50 꼼즈  댓글주소  수정/삭제  댓글쓰기

    모든 링크를.. 새창으로 바꿔놓으면.. 사용자들이 편리하지 않을까효??? ㅡㅡ+

  4. 2011.07.20 09:09 Alex  댓글주소  수정/삭제  댓글쓰기

    저는 현재 미국에 인턴쉽을 와있는 학생입니다. 이번에 회사와 면접을 봤는데 EXT JS와 PHP를 이용해서 SCHEDULER를 만들어 오

    랍니다. ( 저는 참고로 로우 레벨 랭귀지 밖에 다루지 못합니다. HTML 자바 스크립트 PHP에 관한 아주 약간의 지식 밖에 없습니다.)

    EXT JS라는 프레임워크를 처음 들어봤는데 (사실 프레임워크가 무엇인지도 어제 알았습니다.) 이제 대강 VIEW 쪽은 JAVA SCRIPT와

    EXT를 이용해서 만들고 서버사이드는 PHP를 이용하고 my sql 을 연결하면 되겠는데, 이제 시작을 하고자 SCHEDONA 홈페이지에서 튜토리얼을 따라 가려고 하였습니다. 그런데 FEDORA10 에서 해야 튜토리얼에 써있더라고요 ㅠㅠ 제가 리눅스 지식이 거의 없습니다. 제가 스케쥴러를 EXT JS를이용해서 만들려면 무엇 부터 공부해야 할까요? 일단 컴퓨터 운영체제를 리눅스로 바꿔야 하나요 될수 있으면 windows에서 하고 싶습니다 현재 시간이 별로 없습니다.. 일단 개발 환경 구축하는것만이라고 가르쳐주시면 감사하겠습니다.(현재 이클립스는 설치했고 aptana flug in도 설치 한것같습니다.. 혹시 tomcat을 이용할수 있나요?) 책도 없고 미국 땅에 미치겠습니다. 다 가르쳐 달라고 하는것이 아니라 어떻게 공부해야 되는지만좀 알고싶습니다. 혹시 AJAX부터 선행학습 해야하나요? 길잃은 불쌍한 어린양에게 한마디 조언이라도 부탁드립니다. 감사합니다.

    • 2011.07.20 14:48 신고 데꾸벅  댓글주소  수정/삭제

      반갑습니다.

      미국 인턴쉽이라 영어는 기본이시겠군요.. 부럽습니다. ^^

      ㅎㅎ extjs 를 하시려면 당연히 자바스크립트를 아셔야 겠죠.
      일단은 간단한 자바스크립트 공부를 시작하시기를 권해드립니다.

      1. 웹페이지에 대한 이해
      HTML과 CSS는 기본입니다. HTML과 CSS는 실습위주로 되어 있는 얇은 책을 선택해서 기본지식만 가지고 계시면 될것 같네요.
      HTML은 태그사용법만 아시면 될듯 하고 CSS는 selector 부분이 있는데 이 부분을 이해하시는게 중요합니다.
      Javascript로 CSS를 핸들링하여 HTML (DOM) 을 바꾸는 것이 extjs라는 자바스크립트 UI 프레임웍입니다.

      2. extjs 프레임웍 익히기
      extjs는 시중에 나온 자바스크립트 프레임웍중에 Learning curve가 굉장히 가파릅니다(steep). 배우는데 시간이 많이 걸린다는 얘기죠..
      그래서 빨리 적용하기 위해서는 extjs 웹사이트(www.sencha.com)의 예제사이트를 방문해서 구현하고자하는 스케줄러와 유사한 기능의 예제를 붙여서 전체적인 레이아웃과 컴포넌트들과의 상호작용을 먼저 보시길 권해드립니다.

      3. 서버 환경셋팅
      SCHEDONA가 뭣하는 사이트인지 몰라서.. 긁적!! ^^
      거기 튜토리얼에 Fedora에서 작업하라고 한것은 PHP와 apache 셋팅을 위한것 같은데.. 굿이 리눅스에서 하지 않으셔도 됩니다.

      윈도우 환경에서 APM(apache + php + mysql)을 셋팅하실수 있습니다. extjs 환경설정을 굳이 리눅스배워가며 하실 필요는 없다는 얘기죠... 대한민국의 유명한 apm툴인 APMSETUP(www.apmsetup.com) 을 설치하시기만 하면 끝입니다.
      말씀하신 톰캣은 Java언어를 위한 웹서버(?)이므로 PHP를 이용한다면 필요가 없습니다.

      4. extjs 개발하기
      본 포스트 글에서 언급한 aptana나 spket과 같은 툴을 사용하시는것도 좋지만 잘 셋팅이 안되면 디버깅하기 힘들다는 단점은 있지만 그냥 일반적인 메모장과 같은 에디터를 사용하시는것도 좋습니다. (하드코딩의 묘미도 있으니까요.. ^^ )

      어떤 스케줄러를 만드시려는지 모르겠지만 extjs 예제사이트(http://www.sencha.com/products/extjs/examples/) 에 보면 feed viewer 예제나 simple task(http://www.sencha.com/blog/tasks2)예제를 한번 맘잡고 뜯어 보시는게 빨리 이해하시기 쉬울겁니다.


      5.마치며.
      extjs로 만든 스케줄러는 이미 만들어 진것이 있긴 한데.. ㅎㅎ
      답을 드리면 그런가요?
      http://www.bryntum.com/
      http://www.bryntum.com/examples/

      참조하시는것도.. ㅎㅎ
      연락처가 없어서 보시려나? 후훗!

  5. 2011.08.03 02:53 Alex  댓글주소  수정/삭제  댓글쓰기

    답변 감사 드립니다. 현재 스케쥴러 하나를 뜯어서 보고있습니다. 그런데 문제가 있습니다. ㅠㅠ

    간단히 질문은 php로 서버사이드를 개발하고 extjs로 웹 표현과 처리부를 구현하려고합니다. ( 하고 있습니다. ) 그런데 이제 개발을

    본격적으로 하려면 Eclipse면 Eclipse 한 개발 툴에서 컴파일이 되고 서로 데이터를 주고 받아야 하는데,, 이 환경을 구성을 3일째

    삽질 하고 있습니다. 처음에는 기존에 eclipse3.4 버전에 PDT(PhpDevelopmentToolkit)를 추가 하고 Apache 톰캣 mysql을 연동해

    서 개발하려고 하였으나 (수많은 방법을 시도해봄 ㅜㅜ기억도 안날정도로)실패 하였습니다. 그래서 현재는 Eclipse3.4 버전에서는 Extjs를 이용한 웹 표현과 처리부 일부(web page)만 돌려보고있습니다.

    그러나 web application 을 완성 하려면 php를 이용해서 DB연동도 해야합니다. ...

    그리고 현재는 PHPeclipse (eclipse + PDT) 를 이용한 버전 (3.6)에다가 xampp를 설치 해서 php파일을 컴파일 하는데는 성공했습

    니다. 그러나 여기서는 EXTjs 프로젝트가 컴파일이 되지 않습니다. Xampp 내부에 있는 Tomcat에 연동해서 실행했지만 찾을수 없다

    고합니다. 어떻게 이문제를 해결해야할까요 ㅠㅠ 3일동안 수많은 방법을 시도해봤습니다. 금요일이 마감기한입니다..

    분명 Xampp가 mysql php tomcat apache가 연동 되어 있는 거라고 알고 있는데요 어떻게 eclipse에서 이것들을 이용하는지 모르겠

    습니다. 개발 환경을 만들어야 프로그램을 짜는데 지금은 그냥 눈으로 코드만 �f어 보고 있습니다. 도움을 구합니다. 감사합니다. extjs와 php 를 함께 실행할수 있는 환경을 가르쳐 주세요 ㅠㅠ 부탁입니다.

    개발환경 windows XP
    Java SDK jdk1.6.0_26
    apache-tomcat-5.5.15 그리고 7(xampp 내부에) 총두개가 설치되어있습니다.
    apache server
    mysql
    eclipse helios 3.6 (php 버전)
    eclipse ganymede 3.4 (순정)

    • 2011.08.03 17:30 신고 데꾸벅  댓글주소  수정/삭제

      안녕하세요?
      PHP로 개발하는데 tomcat은 필요없습니다. 그리고 굳이 XAMPP를 쓰실 이유도 없지요. xampp 는 단순히 apache + mysql + php +perl 을 이용한 크로스(x) 플랫폼일 뿐입니다. 서버환경은 단순히 (APM: apache + php + mysql) 만 설치하시면 됩니다.
      PHP는 컴파일러가 있긴합니다만 (엄밀히 말하면 인코더) 자바나 C언어처럼 컴파일과정이 필요없는 Interpreter언어입니다.

      PDT 를 사용하시려면 아래 URL을 참조하세요.
      http://www.ibm.com/developerworks/kr/library/tutorial/os-eclipse-europa2/section4.html


      굳이 eclipse PDT를 사용하지 않고도 개발하실 수 있습니다.
      괜히 환경셋팅만하다가 시간 다 보내실듯 하네요..
      extjs는 javascript library로 html과 같이 서버사이드언어가 아니라 클라이언트 언어라고 보시면 됩니다.
      그냥 메모장만을 이용해서도 쉽게 작업하실 수 있습니다.


      쉽게 생각하세요.
      서버쪽은 APM 환경으로 구성해서 PHP로 스케줄러의 데이터만 가져오고
      클라이언트쪽은 extjs 로 구성해서 extjs에서 서버쪽의 데이타를 불러오는식 (httpProxy, store)으로 처리하기만 하면 됩니다.