ax5ui 그리드 페이징+column 추가 질문입니다 ㅠㅠ

AXISJ AX5UI
1

var list4 = [

]

var gridView4 = {

initView: function () {

    this.target = new ax5.ui.grid();

    this.target.setConfig({

        target: $('[data-ax5grid="fourth-grid"]'),

        lineNumberColumnWidth: 40,

        rowSelectorColumnWidth: 28,

        sortable: true, // 모든 컬럼에 정렬 아이콘 표시

        multiSort: false, // 다중 정렬 여부

        remoteSort: false, // remoteSort에 함수를 sortable 컬럼이 클릭되었을때 실행 setColumnSort를 직접 구현. (remoteSort를 사용하면 헤더에 정렬 상태만 표시 하고 데이터 정렬은 처리 안함)

        header: {

            align: "center",

            columnHeight: 28

        },

        page: {

            navigationItemCount: 9,

            height: 30,

            display: true,

            firstIcon: '<i class="fa fa-step-backward" aria-hidden="true"></i>',

            prevIcon: '<i class="fa fa-caret-left" aria-hidden="true"></i>',

            nextIcon: '<i class="fa fa-caret-right" aria-hidden="true"></i>',

            lastIcon: '<i class="fa fa-step-forward" aria-hidden="true"></i>',

            onChange: function () {

            }

        },

        columns: [

        ]

    });

    return this;

},

setData: function (_pageNo) {

    this.target.setData({

        list: list4,

        page: {

            currentPage: _pageNo || 0,

            pageSize: 50,

            totalElements: 50,

            totalPages: 11

        }

    });

    return this;

}

};

gridView4.initView().setData();

$(’[data-grid-control]’).click(function () {

switch (this.getAttribute("data-grid-control")) {

    case "column-add":

        fourthGrid.addColumn(

        );

    break;

}

});

ax5ui를 이용하여 페이징한 grid 에서 버튼 클릭시 columns이 늘어나는 기능을 구현하려고 합니다.

근데 ax5ui의 add column과 paging 예제가 달라서 어떻게 기능을 구현시켜야 할지 어렵내요 ㅠㅠ

fourthGrid.addColumn 의 부분에서 fourthGrid를 찾을 수 없는 문제가 계속 발생하고 있습니다. ㅠㅠ

위 코드가 제가 작성한 코드입니다. 제발 ㅠㅠ 부디 도움 부탁드립니다.