extjs 일반 페이지에 뭐가 들어있어요.

지금 또 2차 개발을 하고 있습니다.(지난번에는 jeecms, 이번에는 G4Studio)이 글을 쓰는 목적은 자신의 사고방식을 정리하는 동시에 2차 개발의 소감을 쌓는 것이다.
2차 개발은 일반적으로 모두가 적합한 개원 프로그램을 찾아 운용하여 신속한 개발을 실현한다.
처음에 접촉을 시작하면 항상'두리번두리번'하는 것을 좋아한다. 아마도 내가 이전에 경험을 총결하지 못한 원인일 것이다.우선, 가장 중요한 프로필이 웹과 유사한 핵심 부분을 찾아야 한다.xml(G4Studio에서struts-config.xml) 운이 좋으면 주석이 있고, 나쁘면 보통 그 이름에서 명당이 나온다.작은 방향으로 보면 관건은 네가 해야 할 부분을 이해하는 것이다. 전체적인 인상에 대한 요구가 높지 않다.큰 방향으로 보면 이 프로젝트의 대체적인 구조, 어떻게 실현되었는지, 구성되었는지, 어떤 기능이 주로 어느 프로젝트의 위치, 어떻게 분포되었는지 기본적으로 알아야 한다.
나 자신은 접촉지가 많지 않아서 내가 아는 것만 이야기할 수 있다.
공공 부분: 일반적으로 최소한 하나의 상량 클래스와 공공 방법 클래스를 포함한다.
페이지 부분:aa.js와 aaa.jsp
            aaa.jsp 안에는 주로import에 필요한 js, 그리고 데이터의 과도한
페이지의 가장 중요한 내용은 js에서:
우선 Ext.onReady입니다.(ExtJs 라이브러리 파일과 페이지 내용을 불러오면 ExtJs는 onReady의 함수를 실행합니다.그리고 그 함수 안에 진정한 내용이 있다.
        1.Ext.form.Form.폼 패널은 폼에 입력된 필드를 관리하는 레이아웃으로 검색 파라미터를 제공하여 검색 기능을 실현합니다.
          

var queryForm = new Ext.form.FormPanel({
		region : 'north',
		title : '<span class="commoncss"> </span>',
		collapsible : true,
		labelWidth : 50,
		labelAlign : 'right',
		bodyStyle : 'padding:3 5 0',
		buttonAlign : 'center',
		height : 95,//65+ *30
		items : [{}],
                buttons : [{
			text : ' ',
			iconCls : 'previewIcon',
			handler : function() {
				// 
			}
		}, {
			text : ' ',
			iconCls : 'tbar_synchronizeIcon',
			handler : function() {
				xxxForm.getForm().reset();// 
			}
		}]
	});

 
매개 변수:region:배치의 위치 (예:north)
제목
collapsible:축소 가능 여부
labelAlign: 레이블 정렬
items: 독립된 용기 (숨겨진 영역, 텍스트 상자, 아래 목록 등을 놓을 수 있습니다)
         2.Ext.gridColumnModel, 검색된 결과 표시
    

var cm = new Ext.grid.ColumnModel([ rownum, {
		header : 'ID',
		dataIndex : 'id',
		hidden : true,
		sortable : true
	}, {
		header : 'ID',
		dataIndex : 'id',
		hidden : true,
		sortable : true
	}, {
		header : 'ID',
		dataIndex : 'id',
		hidden : true,
		sortable : true
	}, {
		header : 'ID',
		dataIndex : 'id',
		hidden : true,
		sortable : true
	}, {
		header : ' ',
		dataIndex : 'memo',
		hidden : false,
		sortable : true
	}]);

 
안에 있는 구조 파라미터는 config로 구성된 수조로 파라미터는 다음과 같다.
header: 머리 이름
dataIndex:store 한약 바인딩 필드 이름
sortable: 정렬 지원 여부
숨김: 숨김 여부
renderer:function는 이 구조 파라미터를 사용하여 데이터를 포맷할 수 있습니다. (잘 모르겠습니다. 직접 사용합니다.)
        3.Ext.data.Store는 Ext에서 데이터 교환과 데이터 상호작용을 하는 표준 중간부품으로 백그라운드에서 데이터를 가져와 페이지에 사용할 수 있도록 Record로 변환하는 역할을 한다.(즉 페이지의grid 등을 사용할 수 있습니다) 생성이 끝난 후store를 실행합니다.load () 는 바로 이 전환 과정을 실현하는 것이다.    
    

var store = new Ext.data.Store({
		// 
		proxy : new Ext.data.HttpProxy({
			url :' '
		}),
		reader : new Ext.data.JsonReader({
			totalProperty : 'TOTALCOUNT',
			root : 'ROOT', //json 
		}, [{
			name : 'id'// name
		}, {
			name : 'id'
		}, {
			name : 'id'
		}, {
			name : 'id'
		}, {
			name : 'id'
		}, {
			name : 'id'
		}, {
			name : 'id'
		}])
	});

 
proxy를 통해 어떤 경로에서 원시 자원을 얻은 다음reader를 통해record 실례로 바꿉니다 (페이지를 나누면totalProperty로 전체 항목을 기록합니다)
        4.새 Ext.PagingToolbar 페이지 나누기 도구 모음
    

var bbar = new Ext.PagingToolbar({
		pageSize : number,
		store : store,
		displayInfo : true,
		displayMsg : ' {0} {1} , {2} ',
		plugins : new Ext.ux.ProgressBarPager(), // 
		emptyMsg : ' ',
		items : [ '-', '  ', combo ]//combo 
	});

 
pageSize: 총 개수
displaymsg:'{0} 개에서 {1} 개, 총 {2} 개 보이기',
emptymsg: "조건에 맞는 기록이 없습니다",
items 보통 밑에 목록이 포함되어 있습니다.
이 드롭다운 목록에 대한 이벤트 감청:
                                      combo.on("select",function(){})store의reload 구현
        5.Ext.Toolbar 표 도구막대 주요 속성 items, 일반적으로 여기에서 제공, 추가, 수정, 삭제, 리셋 등 기능
items: 사용되는 매개 변수는:text,iconCls,id,handler
   

var tbar = new Ext.Toolbar({
		items : [{
			      text : ' ',
			      iconCls : 'addIcon',
			      id : 'id_tbi_add',
			      handler : function() {
			    	  addInt();
			      }
             },{
                  ......// 
                  handler : function() {
                           // 
                  }
             }]
         });

 
        6.Ext.gridGridPanel의 가장 중요한 테이블 인스턴스
우리는 여기에store,cm,tbar,bbar를 던진다. 물론 너는 다른 속성이 있다
         

var grid = new Ext.grid.GridPanel({
          title : '',
          height : 360,
          id : 'id',
          autoScroll : true,
          frame : true,
          region : 'center',
          store : store, //  
          stripeRows : true, //  
          cm : cm, //  
          tbar : tbar, //  
          bbar : bbar,//  
          viewConfig : {//  ,  
          forceFit : true
          },
          loadMask : {
          msg : ' , ...'
          }
          });

 
나머지는 일부 감청 사건과 조작 방법의 실현, 예를 들어 추가, 조회, 리셋, 삭제 등 몇 가지 기본 조작이다