Ext Js: Các thao tác cơ bản

Hôm nay, mình sẽ hướng dẫn cách cài đặt và các thao tác cơ bản trong Ext Js.

Cài đặt thư viện

Trước khi bắt đầu với Ext Js, bạn phải download thư viện ở trang Sencha.com
Sau khi giải nén, bạn sẽ thấy rất nhiều thư mục và file, nhưng bạn chỉ cần quan tâm đến 2 file:

• ext-all.css
• ext-all.js

Đây là 2 file cần thiết tối thiểu để chạy được Ext Js. Ngoài ra nếu các bạn có sử dụng hình ảnh thì thêm thư mục "themes" vào.
Lưu ý: Thư mục Themes và thư mục css phải nằm cùng cấp với nhau.

Các thao tác cơ bản

Mọi hàm trong Ext Js đều bắt đầu với tiền tố Ext.
Ví dụ: Ext.onReady(), Ext.get(),...

onReady()

Hàm này được gọi khi tất cả phần tử DOM đã sẵn sàng và trước khi nội dung trang được hiển thị.
Alias Ext.Loader.onReady
Cú pháp:

onReady( Object fn, Object scope, Object options )

Khi xử lý sự kiện trên trang web của bạn, bạn nên đặt code Ext JS vào trong hàm Ext.onReady(). Việc đặt code vào hàm này đảm bảo mọi thứ trên trang đã sẵn sàng cho việc xử lý.
Ví dụ:

    Ext.onReady(function () {
        //put all your code here.
    });

Ext.Element

Ext Js cung cấp rất nhiều hàm để truy cập đến các phần tử DOM và nhiều thao tác để xử lý chúng.

Chọn phần tử với thẻ Id duy nhất

Cú pháp:

get( String/HTMLElement/Ext.Element el ) : Ext.dom.Element

Ví dụ:

Nhật ký học tập

Hide Link
<script type="text/javascript">
    Ext.onReady(function () {
        //Ext.MessageBox.alert('Hello', 'The DOM is ready!');
        
    });

    function hideLink() {
        var el = Ext.get("link");
        el.hide();
    }
</script>

Dom Query: Chọn nhiều phần tử

Nếu bạn muốn chọn nhiều phần tử dựa trên 1 điều kiện nào đó thay vì sử dụng id (phần tử có id chỉ tồn tại duy nhất trên 1 trang), Ext Js cung cấp DomQuery. Nó là 1 bộ công cụ mạnh mẽ cho phép bạn chọn nhiều phần tử DOM dựa trên html tag, css attribute hoặc css class name.
Cú pháp:

select( String selector, [Boolean unique] ) : Ext.CompositeElement

Ví dụ:

<p class="myClass">first paragraph</p>
<p class="myClass">second paragraph</p>
<p>third one</p>
<button onclick="highLightParagraph();">High Light Paragraph</button>
<button onclick="highLightClassName();">High Light My Class</button>
<script type="text/javascript">
    Ext.onReady(function () {
        //Ext.MessageBox.alert('Hello', 'The DOM is ready!');        
    });

    function hideLink() {
        var el = Ext.get("link");
        el.hide();
    }

    function highLightParagraph() {
        Ext.select('p').each(function (el) {
            console.log(el.dom.innerHTML);
        });
    }

    function highLightClassName() {
        Ext.select(".myClass").each(function (el) {
            console.log(el.dom.innerHTML);
        });
    }
</script> 

Link download ví dụ: MediaFire
Lưu ý: Để xem được kết quả từ console.log, trong Firefox, bạn dùng Firebug hoặc trong Google Chrome, bạn dùng Development tools

Nhatkyhoctap's Blog