ExtJS自定义主题（theme）样式详解(3)

Ext.define('ThemeDemoApp.view.Viewport', {

extend: 'Ext.container.Viewport',

requires:[

'Ext.layout.container.Border',

'ThemeDemoApp.view.Main'
],

 

layout: {

type: 'border'
},

 

items: [{

  // default UI

   region: 'west',

   xtype: 'panel',

   title: 'West',

   split: true,

   width: 150
}, {

   // custom "highlight" UI

   region: 'center',

   xtype: 'panel',

   layout: 'fit',

   bodyPadding: 20,

   items: [

  {

 xtype: 'panel',

 ui: 'highlight',

 frame: true,

 bodyPadding: 10,

 title: 'Highlight Panel'
  }

   ]

}, {

   // neptune "light" UI

   region: 'east',

   xtype: 'panel',

   ui: 'light',

   title: 'East',

   split: true,

   width: 150
}]

});