Ext Js: Layouts

Layout hay còn gọi là dàn trang, bố cục trình bày dữ liệu. Trong Ext Js, layout là một trong những thành phần quan trọng nhất bởi vì nó định nghĩa container được sắp xếp như thế nào. Việc sắp xếp và hiển thị các thành phần trên trang web rất khó và đòi hỏi nó phải hoạt động tốt. Vì vậy, bạn sẽ bắt gặp nhiều định nghĩa về layout trong Ext Js:

• Container Layouts: Auto Layout, Anchor Layout, Absolute Layout…
• Component Layouts: Dock Layout, Tool Layout, Field Layout, Trigger Field Layout.

Component Layout chịu trách nhiệm sắp xếp các phần tử html cho một Component.
Container Layout chịu trách nhiệm sắp xếp các phần tử nằm trong container chứa nó và điều chỉnh kích thước của tất cả các container con khác.
Trong bài viết này, mình không có tham vọng giới thiệu tất cả các layout, mà chỉ giới thiệu một vài layout trong đó. Bạn có thể tham khảo và tìm thêm tài liệu ở trang Sencha.com

Container Layout

Sơ đồ dưới đây minh họa hệ thống phân cấp của các Layout nằm trong Container Layout.

Auto Layout

Auto Layout là layout mặc định cho component khi không có layout nào được chỉ ra.

Auto Layout

Ví dụ: Bạn tạo 4 panels và sắp xếp chúng vào một container (trong trường hợp này là window container)

        var panel1 = Ext.create('Ext.panel.Panel', {
            title: 'Panel 1',
            html: 'Panel 1',
            height: 60,
            width: 100
        });
        var panel2 = Ext.create('Ext.panel.Panel', {
            title: 'Panel 2',
            html: 'Panel 2',
            height: 80,
            width: 60
        });
        var panel3 = Ext.create('Ext.panel.Panel', {
            title: 'Panel 3',
            html: 'Panel 3',
            height: 65,
            width: 100
        });
        var panel4 = Ext.create('Ext.panel.Panel', {
            title: 'Panel 4',
            html: 'Panel 4',
            height: 70,
            width: '90%'
        });
        var auto = Ext.create('Ext.window.Window', {
            title: 'Auto Layout',
            width: 100,
            height: 320,
            layout: 'auto',
            defaults: {
                bodyStyle: 'padding:15px'
            },
            items: [panel1, panel2, panel3, panel4]
        });
        auto.show();

Tất cả các Panel con được thêm vào Window một cách tự động theo thứ tự khai báo ở phần items. Nếu bạn thay đổi kích thước của Window, panel sẽ không tự thay đổi kích thước theo (kể cả panel 4) bởi vì thuộc tính mặc định của panel là Auto.

Component Layout

Dock Layout

DockLayout là 1 tính năng mới của Ext Js 4, và được áp dụng chủ yếu trong Panel Component. Layout này được sử dụng cho Header và Toolbar.
Đoạn code dưới đây sử dụng tính năng hiển thị toolbar đã có từ phiên bản 3:

        var html = '<div style="padding:10px;"><h1><center><span>Body</center></h1></div>';
        var panel1 = Ext.create('Ext.panel.Panel', {
            collapsible: true,
            width: 400,
            renderTo: 'mainContent',
            title: 'Ext 4 Panel - Header',
            html: html,
            tbar: Ext.create('Ext.toolbar.Toolbar', {
                items: [{
                    type: 'button',
                    text: 'Button - Top Toolbar'
                }]
            }),
            bbar: Ext.create('Ext.toolbar.Toolbar', {
                items: [{
                    type: 'button',
                    text: 'Button - Bottom Toolbar'
                }]
            }),
            fbar: Ext.create('Ext.toolbar.Toolbar', {
                items: [{
                    type: 'button',
                    text: 'Button - Footer Toolbar'
                }]
            })
        });

Đoạn code trên định nghĩa 1 Panel với 3 toolbar với vị trí lần lượt là top, bottom và footer. Hình dưới đây minh họa ví trí xuất hiện của 3 thanh toolbar.

Panel and Toolbar

1 cách dễ hơn là bạn có thể sử dụng tính năng dockedItem trong Ext.panel.AbstractPanel (không được hỗ trợ trong Ext.container.Container và Ext.container.Viewport) để định ví trí hiển thị của thanh toolbar ở vị trí top, bottom, left, right với thuộc tính dock.

Toolbar with Dock Layout

        var html = '<div style="padding:10px;"><h1><center><span>Body</center></h1></div>';
        var panel2 = Ext.create('Ext.panel.Panel', {
            collapsible: true,
            width: 400,
            border: true,
            renderTo: 'mainContent',
            title: 'Ext 4 Panel - Header',
            headerPosition: 'top',
            html: html,
            dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{
                        xtype: 'button',
                        text: 'Button - Top Toolbar'
                    }]
                }, {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [{
                        xtype: 'button',
                        text: 'Button - Bottom Toolbar'
                    }]
                }, {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [{
                            xtype: 'component',
                            flex: 1 //will occupy 100% of the width of the panel
                        }, {
                            xtype: 'button',
                            text: 'Button - Footer Toolbar'
                        }]
                }]
        });