2012-01-18 9 views
7

Nhìn vào ExtJS 4 và tôi đang cố gắng để làm "Hello World" hướng dẫn ở đây: http://www.sencha.com/learn/getting-started-with-ext-js-4/Sencha ExtJS 4 - Basic chào bản demo trên thế giới vấn đề

Tôi có tất cả cài đặt tập tin của tôi theo khuyến cáo trong hướng dẫn:

enter image description here

Nhưng, tôi tiếp tục nhận được một lỗi do cú pháp sôi nổi bắt đầu tập tin của họ:

enter image description here

Tôi không sử dụng JQuery hoặc bất kỳ thư viện nào khác - vì Sencha được cho là môi trường javascript hoàn chỉnh.

Đây là mã hoàn chỉnh:

app.js

<a href="#!/api/Ext-method-application" rel="Ext-method-application" class="docClass">Ext.application</a>({ 
    name: 'HelloExt', 
    launch: function() { 
     <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.container.Viewport" rel="Ext.container.Viewport" class="docClass">Ext.container.Viewport</a>', { 
      layout: 'fit', 
      items: [ 
       { 
        title: 'Hello Ext', 
        html : 'Hello! Welcome to Ext JS.' 
       } 
      ] 
     }); 
    } 
}); 

index.html

<!doctype html> 
<html> 
<head> 
    <title>Hello Ext</title> 

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> 
    <script type="text/javascript" src="extjs/ext-debug.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
</head> 
<body></body> 
</html> 

Bất kỳ ý tưởng về những gì có thể là thủ phạm?

Trả lời

6

Bạn không được phép có bất kỳ HTML nào trong tệp JS. Mã trong hướng dẫn được sửa chữa. Các thẻ anchor href này là các liên kết đến tài liệu API ExtJS, bằng cách nào đó đã được chèn vào mã ví dụ.

Mã thực tế nên là:

Ext.application({ 
    name: 'HelloExt', 
    launch: function() { 
     Ext.create('Ext.container.Viewport', { 
      layout: 'fit', 
      items: [ 
       { 
        title: 'Hello Ext', 
        html : 'Hello! Welcome to Ext JS.' 
       } 
      ] 
     }); 
    } 
}); 

Tôi đã đưa ra một báo cáo lỗi về trang đó ở đây: http://www.sencha.com/forum/showthread.php?175129-Documentation-Getting-Started-with-Ext-JS-4.0&p=717098#post717098


Added 21 Tháng 1 năm 2012: rõ ràng là đúng phiên bản đó hướng dẫn có sẵn tại: http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started

+0

Ahhh ok cảm ơn - Tôi chỉ nghĩ rằng họ đã sử dụng một số loại cú pháp điên trong mã của họ. – PhillipKregg

2

Bạn cần cập nhật "app.js" của bạn (loại bỏ thẻ html):

Ext.application({ 
    name: 'HelloExt', 
    launch: function() { 
     Ext.create('Ext.container.Viewport', { 
      layout: 'fit', 
      items: [ 
       { 
        title: 'Hello Ext', 
        html : 'Hello! Welcome to Ext JS.' 
       } 
      ] 
     }); 
    } 
}); 

Javascript phân tích cú pháp không hiểu thẻ html bạn xảy ra để sao chép trong khi tạo ra "app.js" tập tin của bạn.

0

Đây là trang HTML tối thiểu để chạy ExtJS 4 không có MVC:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <link href="/ext/4.0.0/resources/css/ext-all.css" rel="stylesheet" /> 
     <script src="/ext/4.0.0/ext-all.js"></script> 
    </head> 
    <body> 
     <script> 
      Ext.onReady(function() { 
       Ext.Msg.alert('Welcome', 'Hello, World!'); 
      }); 
     </script> 
    </body> 
</html> 

Và một điều này là với MVC:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <link href="/ext/4.0.7/resources/css/ext-all.css" rel="stylesheet" /> 
     <script src="/ext/4.0.7/ext-all.js"></script> 
     <script src="/app.js"></script> 
    </head> 
    <body></body> 
</html> 

Mã của ứng dụng.js:

Ext.application({ 
    name: 'HelloWorld', 
    launch: function() { 
     Ext.Msg.alert('Welcome', 'Hello, World!'); 
    } 
}); 

Thêm các chi tiết trong bản demo trực tuyến của tôi:

ExtJS 4 "Hello World" Application

ExtJS 4 "Hello World" Application Using Ext Loader

ExtJS 4 MVC "Hello World" Application