고급 탭 패널 마법사

Question

나는 다소 진보 된 TabPanel 마법사가 있는데 제대로 작동하지 못하는 것 같습니다. 기본적으로, 나는 4 개의 탭을 가지고있다 ... 각 탭은 그 자신의 폼이다. 탭이 그 자체로 밸리데이션을해야하기 때문에, 탭을 오른쪽으로 비활성화해야하는지, 다음 탭을 활성화해야 하는지를 결정할 수있다.

내가 다루는 주된 특징은 렌더링되지 않은 탭이 실제로 유효하다고 생각한다는 것입니다. 실제로 필드가 allowBlank: false으로 설정되어 있고 값이 비어 있습니다. 그렇다면 반전이 있는데, 여기에 값이 설정되어 있지만 유효하지 않다고 생각합니다.

다른 단점은 탭 패널이로드 될 때 this.getViewModel().notify()으로 전화해야한다는 것입니다. 그렇지 않으면 초기 유효성을 확인할 때 활성화 된 양식이 유효하지 않다고 생각합니다.하지만 이것이 바인딩과 관련이 있다고 생각합니다. 지연 때문에 지금 당장이 문제를 처리 할 수 ​​있습니다.

이 문제를 해결하기 위해 deferredRender: false을 사용할 수는 있지만 실제로 사용하는 앱에서는 탭이 각 탭에서 진행되기 때문에 원하지 않습니다. 따라서 성능이 좋지 않습니다.

In my Fiddle에 세 개의 탭이 활성화되어있는 것을 볼 수 있습니다. 사실 3 번째 탭에는 모델의 데이터가 있지만 유효하지 않다고 믿기 때문에 4 개의 탭이 활성화되어 있어야합니다. 이 탭은 유효하지 않다고 생각하기 때문에 isValid가 false인지 확인하기 때문에 checkValidity 메소드가 다시 발생합니다 (현재 탭이 유효하지 않은 경우 탭을 사용하지 않도록 설정하고 사용자가 계속 실행해야합니다. 디자인). 콘솔에서 :

• tab3에는이 allowBlank로 설정되어 있기 때문에 사실이 아니다, 이는 무효라고 생각 : 거짓,하지만
이
• Tab4이 때문에 사실이 아니다, 이는 유효하다고 생각한다 바인드 값을 갖는다 허용하도록 설정되었습니다. 허점 : 값이 없습니다.

아무도 통찰력이 있습니까? 이 끔찍한 잘못에 대해 내가 갈 건가요?

Answer 1

보기 모델과 바인딩이 자신이 생각하는대로하지 않기 때문에 이러한 현상이 발생합니다.

첫째 -이 같은 필드 만들 때 :

{ fieldLabel: 'Value3', xtype: 'textfield', name: 'value2', allowBlank: false, 
    bind: { value: '{model1.value2}' } 
} 

이 필드가 어떤 값으로 초기에 만들어집니다. 그것은 당신이 어떤 가치도 정의하지 않았기 때문입니다. 바인딩은 즉시 영향을주지 않습니다. 성능상의 이유로 탭이 렌더링 될 때까지는 일반적으로 바인딩되지 않습니다. (렌더링 작업을 지연시키지 않는 이유입니다)

결과적으로 탭 3의 유효성을 검사하면 실패합니다 그 이유는 아직 가치가 없기 때문입니다.

:이 변경, 먼저 탭 패널을 렌더링 할 때,이 출력 (산세 코멘트)을 얻을으로

console.log(form.owner.title, form.getValues(), form.owner.rendered, isValid) 

: 당신이 수 라인 (24)에 로그 문을 변경하는 경우이 더 명확하게 볼 수 있습니다

afterrender 
activate 
checking 
tab2 Object {} false true 
tab3 Object {} false true 
tab4 Object {} false true 
tab1 Object {value: "blah"} true true 

참고 다른 순서 : 당신이 this.getViewModel().notify()를 호출하지 않는 경우, 당신은이 출력을 얻을

afterrender // triggers the view model to notify. 
activate 
checking 
tab1 Object {value: "blah"} true true // Value bound because it was rendered. 
tab2 Object {value: ""} false true 
tab3 Object {value2: ""} false false // Value not bound because it is not rendered 
checking 
tab4 Object {} false true // No properties yet... 

는

참고.

그래서 여기서 어떻게됩니까? 첫 번째로, 탭의 개별 양식에는 필드 값이 바인딩 될 때까지 데이터가 없습니다. 필드가 없으면 유효한 것으로 간주됩니다.

isValid를 호출하면 필드가 강제로 정의되지만 강제로 바인딩되지는 않습니다. 따라서 그들은 가치가 없으며, tab3의 경우에는 유효하지 않게됩니다. tab3은 유효하지 않으므로 (아직 데이터 바운드가 없음), 탭 4는 사용 가능하지 않습니다.

viewModel.notify()을 호출하지 않으면 첫 번째 호출시 checkValidity()에 바인딩 된 데이터가 아직없는 tab1입니다. 따라서 유효하지 않으며 (필드 만 있지만 값은 없음), tab2 등은 사용할 수 없습니다.

유효성은 결국 모두 정렬되지만 true에서 false로 변경 될 때만 상태를 확인합니다. false에서 true로 변경하지 마십시오. 당신이 보는 행동을 알려줍니다.

해결 방법? 아마 몇 가지 방법이 있습니다. 아마도 패널의 initComponent 동안 viewModel에서 값을 가져 와서 패널에 값을 명시 적으로 할당하는 것이 가장 효과적 일 것입니다. 이렇게하면 처음에는 정확한 상태로 만들어 지므로 유효성 검사를 통과합니다.