extjs의 테이블 기능 소개
테이블은 class ext.grid.gridpanel, ext.panel에서 상속되고 xtype is Grid에 의해 정의됩니다.
표의 열 정보는 ext.grid.columnmodel에 의해 정의됩니다.
테이블의 데이터 저장소는 ext.data.store에 의해 정의됩니다. 다른 분석 데이터에 따르면, 데이터 스토리지는 다음 유형으로 나눌 수 있습니다.
JSONSTORE, SIMPLESTORE, GROUPINGSTORE…
테이블의 기본 쓰기 과정 :
1. 테이블 열 모델을 만듭니다
var cm = new ext.grid.columnModel ({{header : 'role', dataindex : 'role'}, 'level', 'level', dataindex : 'grade'}, {헤더 : 'DatainDex :'생성 ','type : 'date', renderer : ext.util.format.daterenderer 데이터});2. 데이터 배열을 만듭니다
var data = [[ 'Soldier', '7', '2011-07-2412 : 34 : 56'], [ '일반', '10', '2011-07-2412 : 34 : 56'],];
3. 두 부분이 포함 된 데이터 스토리지 개체 저장소를 만듭니다. 프록시, 데이터를 얻는 방법; 독자, 데이터를 구문 분석하는 방법
ArrayReader의 매핑은 열 순서를 설정하는 데 사용됩니다.
var store = new ext.data.store ({proxy : new ext.data.MemoryProxy (data), reader : new ext.data.arrayReader ({}, [{name : 'role', 'mapping : 1}, {name :'grade ', Mapping : 0} {mapping :', date : ', date format : // 날짜 열 및 디스플레이 형식 작성])}); store.load ();4. 그리드 파넬을 만들고 칼럼 모델을 조립하고 저장하십시오
var grid = new ext.grid.gridpanel ({renderto : 'grid', store : store, cm : cm});또한 아래와 같이 ScriptTagProxy를 사용하여 원격 데이터를 얻을 수 있습니다.
var store = new ext.data.store ({proxy : new ext.data.scripttagproxy ({url : 'http : // ...'}), reader : new ext.data.arrayreader ({}, [{name : 'role', 'mapping : 1}, {name :'grale : 0}) "ASC"} // 기본 정렬 시퀀스, ASC/DESC}를 설정합니다);테이블의 일반적인 특성
var grid = new ext.grid.gridpanel ({enablecolumnmove : false, // drag and drop 열은 enabledColumnResize : false, // 열 스트리퍼의 너비를 변경하는 데 금지됩니다. true, zebra crossing effect loadmask : true, // mask and prompt function renderto : grid '); var cm = new ext.grid.columnModel ({{header : 'role', dataindex : 'role', width : 90, sortable : true}, // 너비는 열 너비를 설정하고, 기본값은 100px이며, 정렬은 정렬 함수 {id : 'grade', header : 'level', 'new}); ext.grid.gridPanel ({renderto : 'grid', store : store, cm : cm viewconfig : {// 각 열이 ForceFit : true} AutoExpandColumn : 'grade'// 칼럼을 자동으로 확장하면 열 ID는 columnModel에 정의됩니다.테이블 렌더링 및 테이블 용 특수 스타일을 설정하십시오
CM에 렌더러 속성을 추가하고 사용자 정의 함수를 추가하여 전달 된 매개 변수 스타일 (자동 전달 된 ext), 즉 값을 반환하기 전에 해당 HTML, CSS 또는 JS 응답 이벤트를 조립하십시오.
함수 rendersex (value) {if (value == 'male') {return "<span style = 'color : blue;'> male </span> <img src = 'images/icon_male.png'/>"; } else {return "<span style = 'color : red;'> female </span> <img src = 'images/icon_female.png'/>"; }} var cm = new ext.grid.columnModel ([{header : 'id', dataindex : 'id'}, {헤더 : 'name', dataindex : 'name'}, {header : 'sex', dataindex : 'sex', renderer : rendersex},]; [ '2', 'Kate', 'female']]; var store = new ext.data.store ({proxy : new ext.data.memoryProxy (data), reader : new ext.data.arrayreader ({}, [{name : 'id'}, {name : 'name'}, 'new'}); ext.grid.gridpanel ({autoHeight : true, renderto : 'grid', store : store, cm : cm});라인 번호를 자동으로 표시하고 CM을 만들 때 Rownumberer를 만듭니다.
var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), //显示行号{header:'id',dataIndex:'id'}, {header:'name',dataIndex:'name'}, {header:'sex',dataIndex:'sex',renderer:renderSex},]);열 삭제
store.remove (store.getat (i));
테이블을 새로 고칩니다
grid.view.refresh ();
테이블에 대한 확인란을 추가하십시오
CheckBoxSelectionModel을 사용해야합니다
SelectionModel SM은 사용될 때 CM과 테이블에 배치해야합니다.
var sm = new ext.grid.checkboxSelectionModel (); var cm = new ext.grid.columnModel ([new ext.grid.rownumberer (), sm, {header : 'number', dataindex : 'id'}, {header : 'name', dataindex : 'name'}]; [ '2', 'name2']]]; var store = new ext.data.store ({proxy : new ext.data.memoryproxy (data), reader : new ext.data.arrayreader ({}, [{name : 'id'}, {name : 'name'}]}; var grid = new Ext.grid.grid.grid.grid.grid.grid. AutoHeight : True, Renderto : 'Grid', Store : Store, CM : CM, SM : SM});선거 모델 설정을 통해서만 하나의 행만 선택됩니다.
var grid = new ext.grid.gridpanel ({autoHeight : true, renderto : 'grid', store : store, cm : cm, sm : new ext.grid.rowSelectionModel ({SingleSelect : true}));선택 모델을 사용하여 데이터를 얻습니다
grid.on ( 'click', function () {var selections = grid.getSelectionModel (). getSelections (); for (var i = 0; i <selections.length; i ++) {var record = selection [i]; ext.msg.alert (record.get ( "id"));});테이블보기
MVC의 아이디어에서 테이블 컨트롤 :
* ext.data.store는 모델로 간주 될 수 있습니다
* ext.grid.gridpanel은 컨트롤러로 간주 될 수 있습니다
* ext.grid.gridView는보기로 볼 수 있습니다
* 일반적으로 GridView는 GridPanel에 의해 자동으로 생성됩니다. gridview의 속성을 설정하려면 ext.grid.gridpanel의 getView ()를 통해보기 인스턴스를 얻을 수 있습니다.
ext.get ( 'button1'). on ( 'click', function () {grid.getView (). scrollTotop (); grid.getView (). focusCell (0, 0); var cell = grid.getView ().GridPanel의 ViewConfig를 사용하여 테이블을 만들 때 GridView의 초기화 매개 변수를 설정하십시오.
var grid = new ext.grid.gridpanel ({height : 100, width : 400, renderto : 'grid', store : new ext.data.store ({autoload : true, proxy : new ext.data.memoryproxy (데이터), 독자 : new ext.data.arrayreader (}, meta), 기둥 : 컬럼 :}. ColumnStext : // 드롭 다운 메뉴 프롬프트 텍스트 스크롤 로프 세트 설정 : 30, // 오른쪽 SortasCText에서 스크롤 바의 예약 너비를 설정 : // 드롭 다운 메뉴 프롬프트 설정 텍스트 SortDescText : 'Down Order', // 드롭 다운 메뉴 프롬프트를 설정하십시오.페이징 도구 모음을 테이블에 추가하십시오
* GridPanel의 BBAR 속성을 사용하고 Ext.PagingToolbar Pating Toolbar Object를 만들 수 있습니다.
* 페이징 도구 모음이 구성되면 테이블을 구성한 후에 store.load ()를 실행해야합니다.
var grid = new Ext.grid.GridPanel({ renderTo: 'grid', autoHeight: true, store: store, cm: cm, bbar: new Ext.PagingToolbar({ pageSize: 10, //每页显示10条数据store: store, displayInfo: true, //显示数据信息displayMsg: '显示第{0} 条到{1} 条记录，一共{2} 条', emptyMsg: "没有记录" //没有数据时显示的信息})});store.load();백그라운드 스크립트에서 Pagination 데이터를 얻습니다
httpproxy를 사용하여 요청을 전달하고 서버의 JSON 데이터를 가져 와서 분석을 위해 JSONREADER로 넘겨줍니다.
var cm = new ext.grid.columnModel ([{header : 'number', dataindex : 'id'}, {헤더 : '이름', dataindex : 'name'}]); var store = new ext.data.store ({proxy : new ext.data.httpproxy ({url : 'page.jsp'}) ext.data.jsonReader ({TotalProperty : 'TotalProperty', root : 'root'}, [{이름 : 'id'}, {name : 'name'}]}); var grid = new ext.grid.gridpanel ({renderto : 'grid', autoheight : // true. 높이 저장소 : 상점, CM : CM, BBAR : New Ext.PagingToolbar ({pagesize : 10, store : store, displayInfo : true, displaymsg : '{0} show the {1} records/total {2}', emptymsg : "레코드 없음"}); store.load ({params : {start : 0, limit : 10}});페이지 매김 도구 모음이 테이블 상단에 나타나려면 GridPanel TBAR 속성 설정을 사용하여 도구 모음을 추가 할 수 있습니다.
Extjs가 반환 된 데이터를 Pagination하게하십시오
* 예제/로케일 디렉토리 아래에 페이지에 PagingMemoryProxy.js 파일을 소개해야합니다.
* PagingMemoryProxy를 사용하여 프록시를 설정하십시오
var store = new ext.data.store ({proxy : new ext.data.pagingmemoryproxy (data), reader : new ext.data.arrayreader ({}, [{name : 'id'}, {name : 'name'}, {name : 'descn'}}); // call store.load ({params : {start : 0, limit : 3}});편집 가능한 테이블 컨트롤과 함께 editorGrid 사용
간단한 편집기를 만드는 단계 :
1. 열 모델을 정의하고 편집기 속성을 추가합니다.
var cm = new ext.grid.columnmodel ([{header : 'number', dataindex : 'id', 편집기 : new ext.grid.griditor (new ext.grid.griditor (rect.form.textfield ({false // 텍스트 필드의 false // 입력 값은 허용되지 않습니다}))}), 'name', dataindex : 'nev.grid. ext.form.textfield ({allowBlank : false})));2. 배열을 준비하십시오
var data = [[ '1', 'Jason'], [ '2', 'jay']];
3. ext.data.store 만들기, 메모리 프록시를 설정하고 배열 배열로 배열을 설정합니다.
var store = new ext.data.store ({proxy : new ext.data.memoryproxy (data), reader : new ext.data.arrayreader ({}, [{name : 'id'}, {이름 : 'name'}]});4. 데이터를로드하고 editorGridPanel을 만듭니다
store.load (); var grid = new ext.grid.editorgridpanel ({autoheight : true, renderto : 'grid', store : store, cm : cm});편집 가능한 테이블의 데이터를 추가 및 삭제하십시오
1. 레코드 생성 메소드 myrecord를 사용하여 레코드 세트를 만듭니다. Myrecord는 클래스와 동일합니다
var myrecord = ext.data.record.create ([{name : 'id', type : 'string'}, {name : 'name', type : 'string'}]); store.load ();2. editorGridPanel 패널을 만들고 속성 TBAR에서 ext.Toolbar를 만듭니다.
var grid = new Ext.grid.EditorGridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm, tbar: new Ext.Toolbar(['-', { //- means menu separator text: 'Add a row', handler: function(){ var p = new MyRecord({ id:'', name:'' }); grid.stopediting ()는 테이블 스토어의 편집 상태를 닫습니다 (0, p); 삭제 (btn) {var sm = grid.getSelectionModel (); '-'])});为可编辑表格保存修改的结果
위의 예를 기반으로 저장 버튼을 추가하십시오
텍스트 : '저장', 핸들러 : function () {var m = store.modified.slice (0); // (var i = 0; i <m.length; i ++) {// 테이블 정보가 올바른지 여부와 공백이 포함되어 있는지 여부를 확인하십시오. var record = m [i]; var fields = record.fields.keys; for (var j = 0; j <fields.length; j ++) {var name = fields [j]; var value = record.data [이름]; var colindex = cm.findcolumnindex (이름); var rowindex = store.indexOfid (record.id); var editor = cm.getCellEditor (colindex) .field; if (! editor.validateValue (value)) {ext.msg.alert ( 'tip', '입력 된 데이터가 올바른지 확인하십시오!', function () {grid.startediting (rowindex, colindex); 반품; }}} var jsonarray = []; ext.each (m, function (item) {jsonarray.push (item.data); // 수정 된 데이터를 jsonarray}에 넣습니다); ext.lib.ajax.request (// ajax 요청을 사용하여 배경 'post', 'save_data.jsp', {function (response) {// return success.msg.alert ( 'Information', 'response.responsetext, function () {stor.reload (};}); 저장된 데이터 오류! ");}}, 'data =' + encodeUricomponent (ext.encode (jsonArray));}또한 매장은 PrunEmodifiedRecords : true를 설정할 수 있습니다. 이러한 방식으로, 매장은 수정 된 태그가 제거되거나로드 작업을 할 때마다 자동으로 지우므로 다음에 수정 된 정보를 다음에 제출할 때 모든 수정 된 정보를 가져 오는 현상을 피할 수 있습니다.
테이블 입력의 데이터 유형을 제한하십시오
숫자 필드
{헤더 : 'id', dataindex : 'id', 편집기 : new ext.grid.grideditor (new ext.form.numberfield ({// 숫자 만 입력 할 수있는 숫자 필드 제한 : false, allownegative : // minus maxvalue : 10}을 입력 할 수 없습니다.콤보 박스
var combodata = [[ '0', 'java'], [ '1', 'Android']]; {header : 'combobox', dataindex : 'combo', 편집기 : new ext.grid.griditor (new ext.form.combobox ({store : new ext.data.simplestore (value '), data :'avalt ',') '' ', mode :'local ', triggreactaction :'all ', valuefield :'value ','value ','text ','text ', readonly : true}))), 렌더러 : function (value) {return combodata [value] [1]; }}날짜 필드
{Header : 'Date', DatainDex : 'DatainDex :'Date ', 편집기 : New Ext.grid.grideditor (new ext.form.datefield ({형식 :'YM-D ', MinValue :'2011-07-24 ', DisabledDays : [0, 6], DisabledDayStext :'월요일과 토요일 사이에 날짜를 선택))) }}PropertyGrid 사용
editorGrid를 기반으로 개발 된 더 똑똑한 고급 양식 구성 요소입니다.
var grid = new ext.grid.propertygrid ({title : 'propertygrid', autoHeight : true, width : 400, renderto : 'grid', viewconfig : {forcefit : {forcefit : {true}, { "string": "string", "date.parse ('07/24/2011 ')) }});PropertyGrid 편집 기능을 비활성화하는 방법
grid.on ( 'preveredit', function (e) {e.cancel = true; return false;});테이블의 이름에 따라 값을 얻으십시오
grid.store.getByid ( 'Jason'). get (value);
extjs에서 중첩 테이블을 구현하십시오
효과를 먼저 보자 :
코드는 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd예. content = "text/html; charset = utf-8"/> <title> test </title> <script type = "text/javaScript"> </script> <link rel = "stylesheet"type = "text/css"href = "lib/extjs/2_2/resources/css/ext-all.css"/> <text/javascript " src = "lib/extjs/2_2/어댑터/ext/ext-base.js"> </script> <script type = "text/javaScript"src = "lib/extjs/2_2/ext-all-debug.js"> </script> <script> <script> <text/javascript " src = "lib/extjs/2_2/source/locale/ext-lang-zh_cn.js"> </script> <script type = "text/javaScript"src = "lib/extjs/plus/rowexpander.js"> </script> <script type = "text/javascript"> var testdata = [) [ "Lugreen", "Male", 26, [[ "Math", 100], [ "Chinese", 150]], [ "Lisi", "Male", 25, [[ "Math", 100], [ "Chinese", 150]], [ "Zhangsan", "Male", 27, [ "Math", [ "Chinese", 158]]]]]]]]]]]]]]]]]; ext.data.simplestore ({필드 : [이름 ","섹스 ","나이 ","등급 ", 데이터 : testData}); var expander = new ext.grid.rowexpander ({tpl : new ext.xtemplate ( '<div>', ',', '</div>'); // body cm = new ext.grid.columnModel ([{header : "article", dataindex : 'class', width : 130, Hiideable : False, Sortable : False, Resizedable : True}, {스코어 : "deggrade ', width : 130, hideable : fally : false, desizable : resizable})); ext.domquery.select ( "div.detaildata") [0]; ext.grid.checkboxSelectionModel ({SingleSelect : true}); [Expander, {header : "name", 'name', width : 50, Hideable : False, Sortable : False}, {header ", dataindex : 'sex' 130, 숨길 수있는 : false, sortable : false, resizable : true}]; );}); </script> <스타일 유형 = "text/css">#div2 h2 {font-weight : 200; font-size : 12px;}. C1 H2 {font-weight : 200;} </style> </head> <hod> <div id = "grid1"> </div> <div id = "grid2"> </div> </body> </html>사용 된 "rowexpander.js"는 공식 Extjs 예제에 내장되어 있습니다.
이 중첩 테이블을 구현할 때 주목할 두 가지 팁이 있습니다.
1. 외부 테이블의 데이터 스토어에 제공된 데이터 소스는 아래의 굵게 표시된 바와 같이 중첩 배열 형태의 세부 영역의 데이터를 나타냅니다.
var testdata = [[ "lugreen", "male", 26, [[ "수학", 100], [중국어 ", 150]], ["Lisi ","Male ", 25, ["Math ", 100], ["Chinese ", 150]], ["Zhangsan ","Male ", 27, ["Math ", 120], ["Chinese "]];
배열에서 레코드 객체의 JSON 속성을 사용하여 데이터를 자세히 가져옵니다.
var data = r.json [3];
2. Rowexpander의 확장 이벤트에 중첩 테이블을 추가합니다.