Skip to main content

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
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
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.
Panel and Toolbar with dock feature
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'
                        }]
                }]
        });

Comments

Popular posts from this blog

Lập trình đa luồng với Task

Bài viết được đăng trên Jou Lập trình
Trong phiên bản .NET framework 4.0, Microsoft đã bổ sung nhiều thư viện hỗ trợ việc xử lý đa luồng (multi-threading), nhằm đơn giản hóa việc lập trình lẫn hiệu suất của chương trình. Trong bài viết này, tôi xin hướng dẫn các bạn sử dụng lớp System.Threading.Task.

Tìm hiểu về IdentityServer 4

Trong bài viết này, mình sẽ hướng dẫn các bạn làm quen với thư viện Identity Server 4, và tích hợp các service In-Memory của Identity Server 4 vào Project Web API trong .NET Core.

[ASP.NET MVC] Authentication và Authorize

Một trong những vấn đề bảo mật cơ bản nhất là đảm bảo những người dùng hợp lệ truy cập vào hệ thống. ASP.NET đưa ra 2 khái niệm: Authentication và Authorize
Authentication xác nhận bạn là ai. Ví dụ: Bạn có thể đăng nhập vào hệ thống bằng username và password hoặc bằng ssh.
Authorization xác nhận những gì bạn có thể làm. Ví dụ: Bạn được phép truy cập vào website, đăng thông tin lên diễn đàn nhưng bạn không được phép truy cập vào trang mod và admin.