tải tệp html vào bảng điều khiển

Question

Tôi mới dùng sencha touch 2.0. Tôi có một tập tin html. Tôi đang cố tải tệp html (hoặc nội dung) này vào một bảng điều khiển. Tôi chỉ đơn giản là sử dụng một cuộc gọi ajax nhưng nó không hoạt động. Sau đây là mã.

Đây là tệp html tôi đang chạy trong trình duyệt.

index.html:

<script type="text/javascript" src="touch/sencha-touch-debug.js"></script> 
<script type="text/javascript" src="HTMLPanel.js"></script> 
<script type="text/javascript" src="app.js"></script> 

đây là app.js:

Ext.setup({ 
    name : 'SampleLoad', 
    requires : ['HTMLPanel'], 
    launch : function() { 
     var HTMLPanel = new HTMLPanel({ 
      scroll : 'vertical', 
      title : 'My HTML Panel', 
      url : 'sample.html' 
     }); 
    } 
}); 

và đây là HTMLPanel.js:

//HTMLPanel = Ext.extend(Ext.Panel, { //gives error 
var HTMLPanel = Ext.define('HTMLPanel',{ 
    extend : 'Ext.Panel', 
    constructor : function(config) { 
     HTMLPanel.superclass.constructor.apply(this, arguments); 

     // load the html file with ajax when the item is 
     // added to the parent container 
     this.on(
      "activate", 
      function(panel, container, index) { 
       if(this.url && (this.url.length > 0)) 
       { 
        Ext.Ajax.request({ 
         url : this.url, 
         method : "GET", 
         success : function(response, request) { 
          //console.log("success -- response: "+response.responseText); 
          panel.update(response.responseText); 
         }, 
         failure : function(response, request) { 
          //console.log("failed -- response: "+response.responseText); 
         } 
        }); 
       } 
      }, 
      this 
     ) 
    }, 

    url : null 
}); 

Tôi chỉ muốn nội dung html được hiển thị trong bảng điều khiển. Ai đó có thể giúp đỡ?

Answer 1

Hệ thống lớp học đã thay đổi khá nhiều trong Sencha Touch 2 so với 1.x. Nó bây giờ rất giống với ExtJS 4. Ý tưởng đằng sau những thay đổi là làm cho nó dễ hiểu hơn, nhanh hơn để phát triển và năng động hơn.

Một số thay đổi:

• bạn nên không còn sử dụng new HTMLPanel({}). Thay vào đó, hãy sử dụng Ext.create, tức là Ext.create('HTMLPanel', {}).
• bạn không còn nên sử dụng Ext.extend để xác định các lớp tùy chỉnh của mình. Thay vào đó, hãy sử dụng Ext.define với thuộc tính extend.
• bạn không cần sử dụng HTMLPanel.superclass.constrctor.apply(this, arguments) nữa để gọi cho phụ huynh. Thay vào đó, bạn có thể sử dụng this.callParent(arguments)

• bạn rất hiếm khi ghi đè constructor. Đây là thực hành tồi. Thay vào đó, bạn nên sử dụng config khối:

  Ext.define('HTMLPanel', { 
      extend: 'Ext.Panel', 
  
      config: { 
       html: 'This is the html of this panel.' 
      } 
  }); 
  

  Xin lưu ý rằng cấu hình chỉ đi trong khối config khi bạn định nghĩa một lớp mới sử dụng Ext.define. Nếu bạn đang tạo một phiên bản mới của một lớp bằng cách sử dụng Ext.create, new ClassName hoặc sử dụng một đối tượng có xtype, cấu hình làm không cần phải nằm trong đối tượng cấu hình.

Bạn có thể tìm hiểu thêm thông tin về hệ thống lớp học mới bằng cách đọc this guide. Ngoài ra còn có hướng dẫn tuyệt vời về cách di chuyển từ 1.x đến 2.x here.

Vì vậy, hãy cho phép mã của bạn hoạt động.

index.html (không có gì cần phải thay đổi):

<script type="text/javascript" src="touch/sencha-touch-debug.js"></script> 
<script type="text/javascript" src="HTMLPanel.js"></script> 
<script type="text/javascript" src="app.js"></script> 

ứng dụng.js:

// You should use Ext.application, not Ext.setup 
Ext.application({ 
    name: 'SampleLoad', 
    requires: ['HTMLPanel'], 
    launch: function() { 
     var HTMLPanel = Ext.create('HTMLPanel', { 
      // this is now `scrollable`, not `scroll` 
      //scroll: 'vertical', 
      scrollable: 'vertical', 

      url: 'sample.html' 
     }); 

     // Add the new HTMLPanel into the viewport so it is visible 
     Ext.Viewport.add(HTMLPanel); 
    } 
}); 

HTMLPanel.js:

// You do not need to save a reference to HTMLPanel when you define your class 
//var HTMLPanel = Ext.define('HTMLPanel', { 
Ext.define('HTMLPanel', { 
    extend: 'Ext.Panel', 

    // We are using Ext.Ajax, so we should require it 
    requires: ['Ext.Ajax'], 

    config: { 
     listeners: { 
      activate: 'onActivate' 
     }, 

     // Create a new configuration called `url` so we can specify the URL 
     url: null 
    }, 

    onActivate: function(me, container) { 
     Ext.Ajax.request({ 
      // we should use the getter for our new `url` config 
      url: this.getUrl(), 
      method: "GET", 
      success: function(response, request) { 
       // We should use the setter for the HTML config for this 
       me.setHtml(response.responseText); 
      }, 
      failure: function(response, request) { 
       me.setHtml("failed -- response: " + response.responseText); 
      } 
     }); 
    } 
}); 

Hy vọng điều này giúp.

Answer 2

Câu trả lời của rdougan có hiệu quả đối với tôi. Nếu nó vẫn không hoạt động cho bạn, hãy xem this example from the Sencha Docs nơi chúng đang tải các tệp .js bằng AJAX một cách hơi khác (nó sẽ giống hệt nhau đối với các tệp .html). Để lấy nguồn, download the Sencha Touch 2 SDK và nó sẽ ở dưới examples/nestedlist.