extjs 5: tạo liên kết dữ liệu cho thuộc tính tùy chỉnh của thành phần

Question

tôi có thành phần được mở rộng từ trường tệp, và tôi đã thêm thuộc tính tùy chỉnh 'serverPath' vào nó và tôi cũng đã xác định trình lấy và đặt.

mã:

Ext.define('MyApp.ux.Field.File',{ 
    extend:'Ext.form.field.File', 
    xtype:'myfilefield', 
    serverPath:'', 
    getServerPath:function(){ 
    return this.serverPath; 
}, 
setServerPath:function(serverPath){ 
    this.serverPath = serverPath; 
} 
}); 

Ext.create('MyApp.ux.Field.File',{ 
    bind:{ 
     serverPath:'{serverPath}' 
    }, 
    viewModel:{ 
     type:'myViewModel' 
    } 
}); 

tôi sẽ không dán định nghĩa của myViewModel. nó đơn giản.

và hóa ra ràng buộc không có hiệu lực.

có ai giúp được không?

Answer 1

lớp học của bạn nên là:

Ext.define('MyApp.ux.Field.File',{ 
    extend:'Ext.form.field.File', 
    xtype:'myfilefield', 
    config: { 
    serverPath:'' 
    } 
}); 

Và bạn sẽ có tất cả các thiết lập vì ExtJS sẽ tạo setter và getter cho bạn cũng như các setter. Trong mô hình quan điểm của bạn chắc chắn rằng bạn có một:

data: { 
    serverPath : 'yourPathGoesHere' 
} 

Sửa Có hai điều mà người mất tích:

1. Khi một giá trị trên ViewModel thay đổi thay đổi được công bố không đồng bộ bởi lập lịch biểu. Nếu bạn muốn các thay đổi được phản ánh một cách vô giá, bạn cần sử dụng thông báo trên ViewModel hoặc hủy bỏ logic sau khi thay đổi một chút.
2. Để nhận các thuộc tính cấu hình tùy chỉnh của một lớp để thông báo lại cho ViewModel các thay đổi bạn cần thêm chúng vào thuộc tính cấu hình 'xuất bản'. Vui lòng xem điều này updated fiddle.