Ext 테이블 편집 - 동적 삭제 행렬 추가

1. 동적 삭제 줄은 ext 표에서 동적 추가 줄은 주로 표가 귀속된store와 관련이 있으며,store 데이터 집합을 추가하거나 삭제함으로써 표 줄의 동적 추가 삭제를 실현할 수 있다.(1) 동적으로 테이블의 행 gridStore를 추가합니다.add({});(2) 동적으로 테이블의 행 gridStore를 삭제합니다.removeAt(gridStore.count() - 1);2. 동적 삭제 열은 ext 표에 있다. 동적 추가 열은 주로 표에 귀속된column 요소를 수정하고column 요소 집합을 추가하거나 삭제한 다음에 표를 다시 렌더링하면 표 줄의 동적 추가 삭제를 실현할 수 있다.(1) 동적 추가 표의 열 정의 표: vargridTable = Ext.create('Ext.grid.Panel', {id:'gridTable','region:'center','layout:'fit','columns:cols,store:gridStore,autoScroll:true,});열 추가:cols.push({text:'열', dataIndex:'col','width:120,sortable:false,menuDisabled:true,});gridTable.reconfigure(gridStore, cols);//이 방법을 호출하여 다시 설정할 때store (2) 동적 삭제 표의 열cols를 다시 불러옵니다.pop();gridTable.reconfigure(gridStore, cols); 
다음은 전체 js 코드를 첨부합니다.

    var data;  //  
    var cols;   //  

    var gridStore = Ext.create('Ext.data.Store', {
        fields: ['Name']
    });





    //  
    function onInit() {
        onLoadData();

        onInitVar();
        onInitColumn();
    };
    //  
    function onLoadData() {
        data = [{ 'Name': ' ' }, { 'Name': ' ' }];
        gridStore.loadData(data);
    };

    //  
    function onInitVar() {
        cols = [
            {
                xtype: 'rownumberer',
                text: ' ',
                align: 'center',
                minWidth: 50,
                maxWidth: 50,
            },
            {
                text: ' ',
                dataIndex: 'Name',
                minWidth: 85,
                maxWidth: 85,
                sortable: false,
                menuDisabled: true,
            }
        ];
    };
    //  
    function onInitColumn() {
        gridTable.reconfigure(gridStore, cols);
    };

    //  
    function onAddRow() {
        gridStore.add({});
    };

    //  
    function onDelRow() {
        gridStore.removeAt(gridStore.count() - 1);
    };

    //  
    function onAddColumn() {
        cols.push({
            text: ' ',
            dataIndex: 'col',
            width: 120,
            sortable: false,
            menuDisabled: true,
        });

        gridTable.reconfigure(gridStore, cols);
    };

    //  
    function onDelColumn() {
        cols.pop()
        gridTable.reconfigure(gridStore, cols);
    };





    var toolbar = Ext.create('Ext.form.Panel', {
        id: 'tool-bar',
        region: 'north',
        bbar: [
            {
                xtype: 'button',
                text: ' ',
                handler: onAddRow
            },
            {
                xtype: 'button',
                text: ' ',
                handler: onDelRow
            },
            {
                xtype: 'button',
                text: ' ',
                handler: onAddColumn
            },
            {
                xtype: 'button',
                text: ' ',
                handler: onDelColumn
            }
        ]
    });

    var gridTable = Ext.create('Ext.grid.Panel', {
        id: 'gridTable',
        region: 'center',
        layout: 'fit',
        columns: cols,
        store: gridStore,
        autoScroll: true,

    });




    Ext.onReady(function () {
        Ext.create('Ext.Viewport', {
            id: 'iframe',
            layout: 'border',
            items: [
                toolbar,
                gridTable,
            ]
        });

        onInit();
    });

다음은 Ext 테이블을 편집하는 방법에 대해 설명합니다.