Đối tượng trong ExtJS. Ext.create hoặc toán tử mới?

Question

Tôi mới sử dụng ExtJS. Tôi bắt đầu lập trình một hình thức nhỏ. Và tôi hoàn toàn nhầm lẫn về việc sử dụng Ext.create và toán tử mới.

Vì vậy, đây là mã:

Tôi muốn lập biểu mẫu. Tôi tìm thấy một ví dụ nhỏ trên một trong các trang sencha. Nó tạo ra một hình thức như thế này:

var descAndSystem = new Ext.form.Panel ({ 
    region: 'center', 
    layout: 'vbox', 
    margins: '5 5 5 5', 
    xtype: 'form', 
    title: 'Some title', 
    id: 'descAndSystem', 
    width: '800', 
    items: [ 
     { xtype: 'textarea', 
    fieldLabel: 'Provide a description', 
    name: 'rightdescription', 
     }, 
     { 
     xtype: 'combobox', 
     fieldLabel: 'Choose System', 
     store: systems, 
     queryMode: 'local', 
     displayField: 'name', 
     valueField: 'name', 
     name: 'system' 
     } 
    ] 
}); 

sau đó tôi sử dụng descAndSystem như thành phần trong một khung nhìn:

Ext.create('Ext.container.Viewport', { 
    layout: 'border', 
    id: 'wizardcontainer', 
    items: [ 
     descAndSystem, 
     { 
      region: 'south', 
      layout: 'hbox', 
      margins: '5 5 5 5', 
      items: [ 
       { xtype: 'button', text: '<< Back', handler: onNext }, 
       { xtype: 'button', text: 'Next >>', handler: onNext }, 
       { xtype: 'button', text: 'Cancel', align: 'right', handler: function() { alert ('Abgebrochen geklickt.'); } } 
      ] 
     } 
    ] 
}); 

Sau rất nhiều thử và sai tôi thấy rằng tôi có thể truy cập các giá trị của hình thức của tôi bằng cách đoạn mã sau:

Ext.getCmp ('descAndSystem').getForm().findField ('rightdescription').getValue() 

trái ngược với những gì một trong những cuốn sách tôi mua cho biết đoạn mã sau không làm việc:

Ext.getCmp ('rightdescription').getValue() 

Nhưng vấn đề thực sự của tôi là tôi hy vọng rằng

Ext.create ('Ext.form.Panel', { .... }); 

cũng giống như

new Ext.form.Panel ({...}); 

Nhưng khi tôi làm sau này người phiên dịch Chrome nói:

Uncaught TypeError: Cannot read property 'Panel' of undefined' 

Một lần nữa, sau rất nhiều thử nghiệm và lỗi, những điều sau đây đã làm việc:

new Ext.Panel ({...}); 

Không chỉ vậy tôi không thể tìm thấy bất kỳ tham chiếu đến một đối tượng của cái tên đó trong tài liệu, cũng là dòng

Ext.getCmp ('descAndSystem').getForm().findField ('rightdescription').getValue() 

nay mang lại một lỗi:

Uncaught TypeError: Object [object Object] has no method 'getForm' 

Ngoài , Tôi đã cố gắng thay thế descAndSystem bằng một dạng khác bằng thao tác DOM, có nhiều phương thức thay thế khác nhau trong tài liệu. Không ai trong số họ làm việc, tôi luôn luôn có thông báo lỗi "không có phương pháp" thay thế "". Tôi có sự nghi ngờ mạnh mẽ rằng tôi đã có một cái gì đó sai về cơ bản. Bất kỳ gợi ý nào? Tôi đang sử dụng ExtJS 4 và Chromium 17.0.963.56 trên Ubuntu 10.10 64-bit.

Answer 1

Sự khác biệt chính là Ext.create('Ext.form.Panel') sẽ tự động tải xuống tệp javascript thích hợp nếu lớp Ext.form.Panel không tồn tại. Các nhà điều hành vanilla new không thể làm điều này - nó không có ý tưởng những gì một Ext.form.Panel có thể là hoặc nơi định nghĩa có thể được tìm thấy.

Không thể đọc thuộc tính 'Bảng điều khiển' không xác định

Answer 2

Thay đổi dòng

name: 'rightdescription', 

để

id: 'rightdescription', 

và bạn có thể truy cập vào textarea của bạn trực tiếp bằng cách sử dụng:

var yourTextArea = Ext.getCmp ('rightdescription'); 
var yourTextAreaContent = yourTextArea.getValue(); 

Answer 3

var descAndSystem = Ext.create('Ext.form.Panel', {...}) 

Đây là tài liệu cho Ext.create() 01.

Còn về các sự cố khác của bạn ...

1. Khi bạn nói new Ext.Panel({...}) bạn không còn tạo bảng biểu mẫu để phương thức getForm() sẽ không khả dụng.
2. Khi @NTom hiển thị, hãy cho bất kỳ thành phần nào id và bạn sẽ có thể truy cập nó bằng cách sử dụng Ext.getCmp. http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-getCmp

Answer 4

Tôi nghĩ rằng tôi đã tìm thấy sự cố. Tôi sao chép ví dụ từ trang sencha ông:

http://www.sencha.com/learn/getting-started-with-ext-js-4

index.html bao gồm ext-debug.js. Khi tôi bao gồm ext-all-debug.js, khi đó toán tử mới bắt đầu hoạt động :-)

Cảm ơn sự giúp đỡ của bạn. Greets Kai