các nút extjs xuất hiện trên thanh công cụ

Question

Xin chào, tôi có một câu hỏi nhỏ nhưng có vẻ như không thể tìm ra.

khi tôi đặt một nút trong thanh công cụ ExtJS, nó sẽ xuất hiện với một apperance mặc định (giống như bất kỳ tùy chọn cửa sổ thanh công cụ)

làm thế nào để làm cho nó trông giống như một nút trong một hình thức ??

Answer 1

Xem bài đăng này trên diễn đàn Sencha Toolbar Button Style. Tôi cũng tìm thấy kiểu dáng của nút này làm văn bản khá không trực quan cho người dùng. Chỉ với một vài dòng CSS được thêm vào tệp tin tổng thể css ExtJs của bạn, bạn có thể thay đổi diện mạo này trên toàn cầu cho ứng dụng của bạn.

Answer 2

này là khá gần với điều này: ExtJS Button Style Toolbar

Câu trả lời tôi đang tìm kiếm đã được tìm thấy trong câu hỏi rằng:

Thêm

ctCls: 'x-btn-over' 

để cấu hình của nút làm cho nó thực sự trông giống như một nút. Đây là loại hack vì điều này về cơ bản là tạo kiểu cho nút thanh công cụ xuất hiện giống như nó đang được di chuột qua, nhưng trong trường hợp của tôi, tôi đã quyết định điều này là đủ tốt.

chỉnh sửa: Tôi chưa chạm ExtJS kể từ phiên bản 3, vì vậy có vẻ như điều này không còn hoạt động nữa.

Answer 3

Hãy thử như thế này:

tbar: [ 
    { xtype: 'button', text: 'Button 1', cls:'x-btn-default-small' } 
] 

Answer 4

Đây là giải pháp của tôi (nó hoạt động cho ExtJS 3.3.3):

Đối với nút bổ sung thêm lớp, tôi đặt tên nó là 'x-toolbar-grey- btn ':

xtype: 'button', 
id: 'processButton', 
text: 'Process', 
ctCls: 'x-toolbar-grey-btn' 

Styles cho các lớp học thêm, trong file CSS riêng biệt:

.x-toolbar-grey-btn .x-btn-tl{ 
    background-position: 0 0; 
} 
.x-toolbar-grey-btn .x-btn-tr{ 
    background-position: -3px 0; 
} 
.x-toolbar-grey-btn .x-btn-tc{ 
    background-position: 0 -6px; 
} 
.x-toolbar-grey-btn .x-btn-ml{ 
    background-position: 0 -24px; 
} 
.x-toolbar-grey-btn .x-btn-mr{ 
    background-position: -3px -24px; 
} 
.x-toolbar-grey-btn .x-btn-mc{ 
    background-position: 0 -1096px; 
} 
.x-toolbar-grey-btn .x-btn-bl{ 
    background-position: 0 -3px; 
} 
.x-toolbar-grey-btn .x-btn-br{ 
    background-position: -3px -3px; 
} 
.x-toolbar-grey-btn .x-btn-bc{ 
    background-position: 0 -15px; 
} 
.x-toolbar-grey-btn button{ 
    font-weight: bold; 
} 

Vì hình ảnh nút hình ảnh nằm trong tệp '/ext-3.3.3/resources/images/default/button/btn.gif', tôi chỉ thay đổi vị trí nền thuộc tính. Có vẻ như nút gốc.

Answer 5

Bạn cần phải bọc nó trong một bảng điều khiển, đây là giải pháp cho ExtJS 4.2.5

{ 
    xtype: 'panel', 
    items: { 
     xtype: 'button', 
     text : 'My button' 
    } 
}