24.02.01.

제출 누르면 dialog 실행되도록 만들기

Dialog

sencha docs

Ext.Dialog | Ext JS 7.5.1

• items에 data를 바인딩하면 viewmodel에 있는 data를 가져올 수 있음
• 기본적으로 container 상속받았으므로 container 처럼 사용할 수 있을 것이다

dialog 파일 가져오는 법

• 사용하려는 view 파일에 새로운 property로 삽입
  • 새로운 property로 삽입하면 —.dialogs.submitDialog 이렇게 사용할 수 있음
• 버튼을 눌러 활성화하고 싶다면 해당 버튼에 handler 생성
  • this.getView()를 사용하기 위해 상위 viewcontroller에 함수 작성
  • formpanel에서 getValues()를 사용하여 form에 적힌 value들을 가져옴
  • dialog가 없거나 dialog가 destroyed 되었다면 현재 view 인스턴스에 dialog를 불러와 apply한다
  • dialog를 create
  • dialog에 value 연결하는 방법
    • dialog에 setData를 사용하여 values를 직접 삽입
    • value를 viewmodel에 넣고 그 data를 dialog에서 바인딩하여 사용
  • show를 사용하여 dialog 실행

onSubmitButtonClicked: function (button) {
        const formpanel = button.up('formpanelid');
        const formValues = formpanel.getValues();

        // console에 나오게 만들기
        console.log(formValues);

        // dialog 나오게 만들기
        const view = this.getView();
        let submitdialog = this.DialogSubmit;

        if (!submitdialog || submitdialog.destroyed) {
            submitdialog = Ext.apply({
                ownerCmp: view
            }, view.dialogs.submitDialog);

            this.DialogSubmit = submitdialog = Ext.create(submitdialog);
        }

        submitdialog.setData(formValues)
        submitdialog.show();
    }

tpl에서 if 사용하는 방법

`<tpl if="radio == 1">사업자번호 :`,
        `<tpl else>전화번호 :`,
        `</tpl>`,

tpl에서 삼항연산자 사용하는 방법

{[values.radio == 1 ? '사업자번호' : '전화번호']} :,

tpl에서 date format 바꾸는 방법

입금 날짜 : {[Ext.Date.format(values.date, "Y년 m월 d일")]}

• 간단한 함수를 사용할 때는 대괄호를 사용하는 것 같음

Ext.XTemplate | Ext JS 7.5.1

Execute arbitrary inline code with special built-in template variables 다시 읽어보기