Tinh chỉnh hành vi Panel và xử lý tương tác người dùng

Khi xây dựng giao diện với ExtJS, việc kiểm soát độ co giãn và kích thước của các thành phần là bước cơ bản để đảm bảo bố cục linh hoạt. Dưới đây là các cấu hình trọng tâm giúp bạn tối ưu hóa trải nghiệm.

Kích hoạt chế độ thu gọn (Collapse)

Để người dùng có thể tự động ẩn hiện khu vực nội dung mà không thay đổi kích thước vùng chứa, áp dụng thuộc tính sau:

const collapsibleContainer = Ext.create('Ext.panel.Panel', {
    collapsible: true,
    title: 'Khu vực tùy chọn',
    height: 200,
    renderTo: document.body
});

Tạo thanh kéo chia tách (Split Handle)

Khi đặt nhiều panel song song hoặc chồng lớp, thêm split: true sẽ hiển thị thanh trượt cho phép người dùng điều chỉnh kích thước trực tiếp trên trình duyệt:

{
    xtype: 'container',
    layout: 'hbox',
    items: [{
        flex: 2,
        split: true,
        html: '<div style="background:#f4f4f4;height:100%;">Phần trái</div>'
    }, {
        flex: 1,
        html: '<div style="background:#e0e0e0;height:100%;">Phần phải</div>'
    }]
}

Chèn bộ chọn ngày và quản lý thuộc tính ảnh

Tích hợp lịch biểu trực tiếp vào container giúp rút ngắn thao tác nhập liệu. Cách truyền thống và ổn định nhất là nhúng component DatePicker vào danh sách items:

Ext.widget('panel', {
    title: 'Chọn mốc thời gian',
    frame: true,
    autoHeight: true,
    width: 240,
    layout: 'fit',
    items: [Ext.create('Ext.DatePicker')]
});

Đối với thẻ <img> trong HTML, hiểu rõ các tham số giúp tối ưu băng thông và bố cục trang:

• src: Đường dẫn tệp nguồn. Hỗ trợ .png, .jpg, .svg. Có thể là đường dẫn tuyệt đối hoặc tương đối.
• width/height: Quy định kích thước pixel ban đầu. Nên khớp tỷ lệ gốc để tránh biến dạng, nếu cần thay đổi kích thước thì nên xử lý qua CSS.
• alt: Nội dung thay thế khi ảnh không tải được hoặc dùng cho trình đọc màn hình.
• hspace/vspace: Khoảng đệm ngang/dọc xung quanh ảnh (tiền thân của CSS margin/padding).
• border: Độ dày khung bao quanh ảnh.
• align: Căn chỉnh đoạn văn bản bên cạnh ảnh (top, middle, bottom, left, right).
• lowsrc: Ảnh chất lượng thấp hiển thị tạm thời trong lúc tải ảnh chính (tính năng legacy, nay thường thay bằng loading="lazy").

Cách giám sát trạng thái ứng dụng (Debugging)

Thay vì dừng thực thi bằng alert(), hãy sử dụng Console API của trình duyệt để in ra mảng dữ liệu hoặc trạng thái component chi tiết hơn:

function traceComponentStatus(componentRef, metadata) {
    console.group(`Kiểm tra đối tượng [${componentRef.id}]`);
    console.log('Dữ liệu thô:', metadata);
    console.table({
        tên: componentRef.title,
        trạng_thái: metadata.active ? 'Đang hoạt động' : 'Tạm dừng',
        thời_gian: new Date().toLocaleTimeString()
    });
    console.groupEnd();
}

traceComponentStatus(myPanel, { active: true, version: 1.2 });

Hỗ trợ này cho phép xem cấu trúc đối tượng dạng cây, lọc theo từ khóa và không làm gián đoạn luồng chạy của ứng dụng.

Ẩn viền GridPanel để đồng bộ theme

Trong các dashboard hoặc form tổng hợp, viền mặc định của bảng dữ liệu thường tạo cảm giác rối mắt. Chỉ cần gán false cho thuộc tính border để xóa đường bao ngoài cùng:

Ext.define('App.view.DataGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.datagrid',
    border: false, 
    forceFit: true,
    columns: [
        { text: 'Mã SP', dataIndex: 'id', flex: 1 },
        { text: 'Tên SP', dataIndex: 'name', flex: 2 }
    ],
    store: 'ProductStore'
});

Khi bật chế độ này, chỉ còn lại đường kẻ phân chia cột bên trong, giúp bảng tích hợp mượt mà hơn vào nền giao diện chung.