extjs经典沙盒vs经典主题

extjs classic sandbox vs classic theme

本文关键字：经典 vs extjs      更新时间：2023-09-26

有人知道ExtJSclassic sandbox和classic主题之间的区别吗？

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

沙盒听起来像一个游乐场，但我从未看过它（旁注：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') {

就是这样。现在你可以从选项组合框中选择它，它就会被加载。

相关文章：