Extjs에서 양방향 데이터 연결의 사용 방법
2307 단어 extjs
Extjs의 양방향 데이터 바인딩
Sometimes a component's state, e.g. the
checked state of a checkbox or the selected record of a grid, is interesting to other components. When a component is assigned a reference to identify it, that component will publish some of its key properties in the ViewModel. In this example, we have the "Admin Key"textfield's disabled config bound to the the checked state of the checkbox. This results in the textfield being disabled until the checkbox is checked. This sort of behavior is well suited for dynamic forms like this:
Ext.define('MyApp.view.TestViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test', // connects to viewModel/type below
data: {
firstName: 'John',
lastName: 'Doe'
},
formulas: {
// We'll explain formulas in more detail soon.
name: function (get) {
var fn = get('firstName'), ln = get('lastName');
return (fn && ln) ? (fn + ' ' + ln) : (fn || ln || '');
}
}
});
Ext.create('Ext.panel.Panel', {
title: 'Sign Up Form',
viewModel: {
type: 'test'
},
items: [{
xtype: 'checkbox',
boxLabel: 'Is Admin',
reference: 'isAdmin'
},{
xtype: 'textfield',
fieldLabel: 'Admin Key',
bind: {
disabled: '{!isAdmin.checked}'
}
}]
});여기에서ViewModel의 데이터에 isAdmin을 정의하지 않았지만 양방향 데이터를 통해textfield에 귀속할 수 있습니다.이것은 위 문서에서 말한 "When a component is assigned a reference to identify it,that component will publish some of its key properties in the View Model"때문입니다. 구성 요소가 Reference 속성을 사용하면 구성 요소 자체의 관건적인 속성을 View Model 데이터에 등록할 수 있습니다.내 MenuView Model에서 왜 formulas에서menugrid를 사용할 수 있는지 해결했다.selection,menugrid 구성 요소가 Reference:'menugrid'를 등록했기 때문입니다.
공식 문서 주소:
extjs 공식 문서
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
extjsgrid에서columns에 사용되는store가 초기화되지 않은 해결 방법자세히 보기 extjs를 사용하여grid를 개발할 때, 만약에 어떤 열의 편집기가store라면,store가 불러오는 것을 완성하지 못했을 때list 데이터를 불러옵니다. 이 열이 표시되지 않는 문제는 다음과 같습니다...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
