javascript - extjs 经典沙盒 vs 经典主题

Question

有谁知道ExtJS classic sandbox与classic主题有什么区别？

我在示例/资源/classic sandbox中找到了主题，但右上角的工具栏只有 4 个选项（访问、经典、灰色、海王星）。如果可能的话，我如何将它设置为具有第五个选项。 folder

Answer 1

沙盒听起来像是一种游乐场，但我从未看过它（旁注：sanbox 使用x4前缀，而默认使用的是x）。无论如何，您可以添加它或任何其他类似的主题

在沙箱的情况下，我们必须调整，因为加载器有一个静态名称前缀ext-all。所以重命名以下文件。

resources/css/ext-sandbox.css
resources/css/ext-sandbox-debug.css 

至

resources/css/ext-all-sandbox.css
resources/css/ext-all-sandbox-debug.css

在那之后打开

examples/shared/options-toolbar.js

以及以下组件定义

{
    xtype: 'combo',
    rtl: false,
    width: 170,
    labelWidth: 50,
    fieldLabel: 'Theme',
    displayField: 'name',
    valueField: 'value',
    labelStyle: 'cursor:move;',
    margin: '0 10 0 0',
    store: Ext.create('Ext.data.Store', {
         fields: ['value', 'name'],
         data : [
             { value: 'access', name: 'Accessibility' },
             { value: 'classic', name: 'Classic' },
             { value: 'gray', name: 'Gray' },
             { value: 'neptune', name: 'Neptune' }
         ]
    }),
/....

将 { value: 'sandbox', name: 'Classic Sandbox' } 添加到它看起来像的数据数组中

data : [
    { value: 'access', name: 'Accessibility' },
    { value: 'classic', name: 'Classic' },
    { value: 'gray', name: 'Gray' },
    { value: 'neptune', name: 'Neptune' },
    { value: 'sandbox', name: 'Classic Sandbox' } // new line
]

打开examples/themes/themes.js并找到function getSizing(id)

根据新主题添加尺寸。如果是沙箱，我们会改变

if (theme == 'gray') {

至

if (theme == 'gray' || theme == 'sandbox') {

而已。现在您可以从选项组合中选择它，它将被加载。