ExtJS에서 표 컨트롤 사용, 속성 설정 및 데이터 가져오기

14566 단어
ExtJS에서 테이블의 특성 소개
테이블은 클래스 Ext.grid입니다.GridPanel은 Ext.Panel에서 상속되고 xtype이 grid 표인 열 정보는 Ext.grid에서 정의합니다.ColumnModel 정의 테이블의 데이터 저장소는 Ext.data입니다.Store 정의는 해석 데이터에 따라 다음과 같이 구성될 수 있습니다.
JsonStore,SimpleStore,GroupingStore…
테이블의 기본 작성 절차:
1. 테이블 열 모델 생성하기
var cm = new Ext.grid.ColumnModel({
	{header: ' ', dataIndex: 'role'},
	{header: ' ', dataIndex: 'grade'},
	{header: ' ', dataIndex: 'createDate', type: 'date', renderer: Ext.util.Format.dateRenderer('Y m d ')}  // 
});

2. 데이터 그룹 만들기
var data = [
    [' ','7','2011-07-2412:34:56'],
    [' ','10','2011-07-2412:34:56'],
];

3. 데이터 저장 대상store를 만드는데 두 부분을 포함한다:proxy, 데이터를 얻는 방식;reader, 데이터 해석 방식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}
        {name: 'createDate', mapping: 2, type:'date', dateFormat:'Y-m-dH:i:s'}  // 
    ])
});
store.load();

4, GridPanel 생성, ColumnModel 및 store 어셈블
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: 'grade', mapping: 0}
    ]),
    sortInfo: {field: "role", direction: "ASC"}  // ，ASC/DESC
});

테이블의 공통 속성 기능
var grid = new Ext.grid.GridPanel({
	enableColumnMove: false, // 
	enableColumnResize: false,  // 
	stripeRows: true,  // 
	loadMask: true,  // 
	renderTo: 'grid',
	store: store
	cm: cm
});

var cm = new Ext.grid.ColumnModel({
	{header: ' ', dataIndex: 'role', width:90, sortable: true},  //width ， 100px，sortable 
	{id:'grade', header: ' ', dataIndex: 'grade', width:40}
});
var grid = new Ext.grid.GridPanel({
	renderTo: 'grid',
	store: store,
	cm: cm
	viewConfig:{   // 
		forceFit: true
	}
	autoExpandColumn: 'grade'  // ， id ColumnModel 
});

테이블을 렌더링하고 테이블의 특수 스타일을 설정합니다.
cm에 renderer 속성을 추가하고 사용자 정의 함수를 추가하여 전송된 매개 변수의 스타일을 렌더링하면 됩니다. 즉, value로 돌아가기 전에 해당하는 HTML과 CSS 또는 JS 응답 이벤트를 조립합니다.
function renderSex(value) {
    if (value == 'male') {
        return "<span style='color:blue;'> </span><img src='images/icon_male.png' />";
    } else {
        return "<span style='color:red;'> </span><img src='images/icon_female.png' />";
    }
}

var cm = new Ext.grid.ColumnModel([
    {header:'id',dataIndex:'id'},
    {header:'name',dataIndex:'name'},
    {header:'sex',dataIndex:'sex',renderer:renderSex},
]);

var data = [
    ['1','Jason','male'],
    ['2','Kate','female']
];

var store = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'id'},
        {name: 'name'},
        {name: 'sex'}
    ])
});
store.load();

var grid = 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:' ',dataIndex:'id'},
    {header:' ',dataIndex:'name'}
]);

var data = [
    ['1','name1'],
    ['2','name2']
];

var store = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'id'},
        {name: 'name'}
    ])

});
store.load();

var grid = new Ext.grid.GridPanel({
    autoHeight: true,
    renderTo: 'grid',
    store: store,
    cm: cm,
    sm: sm
});

RowSelectionModel 설정을 통해 한 줄만 선택
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 = selections[i];
        Ext.Msg.alert(record.get("id"));
    }
});

테이블 뷰
VC의 관점에서 표 컨트롤: * Ext.data.Store는 모델*Ext.grid로 볼 수 있습니다.GridPanel은 컨트롤러 * Ext.grid로 보입니다.GridView는 보기로 볼 수 있습니다 * 일반 GridView는 GridPanell에서 자동으로 생성되며 GridView의 속성을 설정하려면 Ext.grid를 통해 사용할 수 있습니다.GridPanel의 getView() 뷰 인스턴스 가져오기
Ext.get('button1').on('click', function() {
	grid.getView().scrollToTop();
    grid.getView().focusCell(0, 0);
    var cell  = grid.getView().getCell(0, 0);
    cell.style.backgroundColor = 'red';
});

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(data),
        reader: new Ext.data.ArrayReader({}, meta)
    }),
    columns: meta,
    viewConfig: {
        columnsText: ' ',  // 
        scrollOffset: 30,    // 
        sortAscText: ' ',    // 
        sortDescText: ' ',   // 
        forceFit: true   // 
    }
});

테이블에 페이지 나누기 도구 모음 추가
*GridPanel의 bbar 속성을 사용하고 Ext.PagingToolbar 페이지 도구 모음 대상을 만들 수 있습니다 *페이지 도구 모음이 설정되어 있으면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();

백그라운드 스크립트에서 페이지 데이터를 가져와 HttpProxy로 요청을 전달하고 서버의 JSON 데이터를 가져와 JsonReader에 전달합니다.
var cm = new Ext.grid.ColumnModel([
    {header:' ',dataIndex:'id'},
    {header:' ',dataIndex:'name'}
]);
var store = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url:'page.jsp'}),
    reader: new Ext.data.JsonReader({
        totalProperty: 'totalProperty',
        root: 'root'
    }, [
        {name: 'id'},
        {name: 'name'}
    ])
});
var grid = new Ext.grid.GridPanel({
    renderTo: 'grid',
    autoHeight: true,   // ， 
    store: store,
    cm: cm,
    bbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: store,
        displayInfo: true,
        displayMsg: '  {0}   {1}   /   {2}  ',
        emptyMsg: " "
    })
});
store.load({params:{start:0,limit:10}});

페이지 나누기 도구 모음을 표의 맨 위에 표시하려면 GridPanel의 tbar 속성 설정을 사용하여 ExtJS가 되돌아오는 데이터를 페이지 나누도록 도구 모음을 추가할 수 있습니다* 페이지에 examples/locale 디렉터리에 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'}
    ])
});
// GridPanel 
store.load({params:{start:0,limit:3}});

편집 가능 테이블 컨트롤 EditorGrid 사용
간단한 EditorGrid 만들기 1단계, 열 ColumnModel 정의, 편집기 속성 추가
var cm = new Ext.grid.ColumnModel([{
    header: ' ',
    dataIndex: 'id',
    editor: new Ext.grid.GridEditor(
        new Ext.form.TextField({
            allowBlank: false  // TextField 
        })
    )
}, {
    header: ' ',
    dataIndex: 'name',
    editor: new Ext.grid.GridEditor(
        new Ext.form.TextField({
            allowBlank: false
        })
    )
}]);

2. 배열 준비
var data = [
    ['1','Jason'],
    ['2','Jay']
];

3. Ext.data를 생성합니다.Store, 메모리 에이전트 설정, ArrayReader 분석 그룹 설정
var store = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'id'},
        {name: 'name'}
    ])
});

4. 데이터 로드, EditorGridPanel 만들기
store.load();
var grid = new Ext.grid.EditorGridPanel({
    autoHeight: true,
    renderTo: 'grid',
    store: store,
    cm: cm
});

편집 가능한 표를 위해 데이터 1을 추가하고 삭제하며, Record의create 방법으로 레코드세트 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(['-', {  //- 
        text: ' ',
        handler: function(){
            var p = new MyRecord({
                id:'',
                name:''
            });
            grid.stopEditing();  // 
            store.insert(0, p);  // Record store 
            grid.startEditing(0, 0);  // 
        }
    }, '-', {
        text: ' ',
        handler: function(){
            Ext.Msg.confirm(' ', ' ？', function(btn){
                if (btn == 'yes') {
                    var sm = grid.getSelectionModel();  // 
                    var cell = sm.getSelectedCell();   // 
                    var record = store.getAt(cell[0]);  // store Record
                    store.remove(record);   // 
                }
            });
        }
    }, '-'])
});

편집 가능한 표에 수정된 결과를 저장하기 위해 위의 예를 바탕으로 저장 단추를 추가합니다
text: ' ',
handler: function(){
    var m = store.modified.slice(0); // store 
    for (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[name];

            var colIndex = cm.findColumnIndex(name);
            var rowIndex = store.indexOfId(record.id);
            var editor = cm.getCellEditor(colIndex).field;

            if (!editor.validateValue(value)) {
                Ext.Msg.alert(' ', ' ！', function(){
                    grid.startEditing(rowIndex, colIndex);
                });
                return;
            }
        }
    }
    var jsonArray = [];
    Ext.each(m, function(item) {
        jsonArray.push(item.data);  // jsonArray 
    });

    Ext.lib.Ajax.request(   // Ajax 
        'POST',
        'save_data.jsp',
        {success: function(response){  // 
            Ext.Msg.alert(' ', response.responseText, function(){
                store.reload();
            });
        },failure: function(){   // 
            Ext.Msg.alert(" ", " ！");
        }},
        'data=' + encodeURIComponent(Ext.encode(jsonArray))
    );
}

또한store는 속성 pruneModifiedRecords:true를 설정할 수 있습니다.이렇게remove나load가 조작될 때마다store는modified 표시를 자동으로 제거하여 다음에 제출할 때 지난번modified 정보를 모두 가져오는 현상을 피할 수 있습니다.
테이블 입력을 제한하는 데이터 형식 NumberField
{
    header:'ID',
    dataIndex:'id',
    editor:new Ext.grid.GridEditor(new Ext.form.NumberField({  //NumberField 
        allowBlank: false,
        allowNegative: false,  // 
        maxValue: 10
    }))
}

ComboBox 
var comboData = [
    ['0','Java'],
    ['1','Android']
];
{
    header:'ComboBox',
    dataIndex:'combo',
    editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
        store: new Ext.data.SimpleStore({
            fields:['value','text'],
            data: comboData
        }),
        emptyText: ' ',
        mode: 'local',
        triggerAction: 'all',
        valueField: 'value',
        displayField: 'text',
        readOnly:true
    })),
    renderer: function(value){
        return comboData[value][1];
    }
}

DateField 
{
    header:'Date',
    dataIndex:'date',
    editor:new Ext.grid.GridEditor(new Ext.form.DateField({
        format: 'Y-m-d',
        minValue: '2011-07-24',
        disabledDays: [0, 6],
        disabledDaysText: ' '
    })),
    renderer: function(value) {
        return value.format("Y-m-d");
    }
}

속성 테이블 컨트롤PropertyGrid 사용
EditorGrid를 기반으로 개발된 보다 지능적인 고급 표 구성 요소입니다.
var grid = new Ext.grid.PropertyGrid({
    title: ' PropertyGrid',
    autoHeight: true,
    width: 400,
    renderTo: 'grid',
    viewConfig: {
        forceFit: true
    },
    source: {
        "String": "String",
        "Date": new Date(Date.parse('07/24/2011')),
        "boolean": false,
        "float": .01
    }
});

PropertyGrid 편집 기능을 비활성화하는 방법
grid.on('beforeedit', function(e){
	e.cancel = true;
	return false;
});

표의name에 따라value 가져오기
grid.store.getById('Jason').get(value);
Extjs Dynamic Grid
ExtJs 3.2.2 페이지 포함 플레이어

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage