Как добавить панель инструментов к моему макету в extjs? - PullRequest
Новая
       23

Как добавить панель инструментов к моему макету в extjs?

1 голос
/ 06 февраля 2012

Я пытаюсь добавить панель инструментов в уже созданный макет. У меня есть коды для панели инструментов и макета, но я не знаю, как интегрировать слишком

Для моей панели инструментов 

<script>
Ext.onReady(function () {
new Ext.Toolbar({renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Menu Button',
menu: [{
text: 'Better'
}, {
text: 'Good'
}, {
text: 'Best'
}]
},'->', {
xtype: 'splitbutton',
text: 'Split Button',
menu: [{
text: 'Item One'
}, {
text: 'Item Two'
}, {
text: 'Item Three'
}]
},'', {
xtype: 'cycle',
showText: true,
minWidth: 100,
prependText: 'Quality: ',
items: [{
text: 'High',
checked: true
}, {
text: 'Medium'
}, {
text: 'Low'
}]
},]
});
});
</script>

и для моего макета у меня есть 

<script>
var viewport = new Ext.Viewport({
layout: "border",
defaults: {
bodyStyle: 'padding:10px;',
},
items: [{
region: "north",
html: 'North',
margins: '5 5 5 5'
}, {
region: 'west',
collapsible: true,
title: 'Some Info',
width: 200,
html: 'West',
margins: '0 0 0 5'
}, {
region: 'center',
title: 'Our Info',
html: 'Center',
margins: '0 0 0 0'
}, {
region: 'east',
collapsible: true,
width: 200,
title: 'Their Info',
html: 'East',
margins: '0 5 0 0'
}, {
region: 'south',
title: 'Their Info',
html: 'South',
width: 200,
margins: '5 5 5 5'
}]
});
</script>

Как я могу использовать панель инструментов на этой странице? Спасибо

@ Джастин, вот мой полный код 

var viewport = new Ext.Viewport({
layout: "border",
tbar: new Ext.Toolbar({
//Toolbar config options
items: [{
xtype: 'button',
height: 27,
text: 'Menu Button',
menu: [{
text: 'Better'
}, {
text: 'Good'
}, {
text: 'Best'
}]
}, '->',
{
xtype: 'splitbutton',
text: 'Split Button',
menu: [{
text: 'Item One'
}, {
text: 'Item Two'
}, {
text: 'Item Three'
}]
}, '',
{
xtype: 'cycle',
showText: true,
minWidth: 100,
prependText: 'Quality: ',
items: [{
text: 'High',
checked: true
}, {
text: 'Medium'
}, {
text: 'Low'
}]
}, ]
}),
defaults: {
bodyStyle: 'padding:10px;',
},
//layouf config
tems: [{
region: "north",
html: 'North',
margins: '5 5 5 5'
}, {
region: 'west',
collapsible: true,
title: 'Some Info',
width: 200,
html: 'West',
margins: '0 0 0 5'
}, {
region: 'center',
title: 'Our Info',
html: 'Center',
margins: '0 0 0 0'
}, {
region: 'east',
collapsible: true,
width: 200,
title: 'Their Info',
html: 'East',
margins: '0 5 0 0'
}, {
region: 'south',
title: 'Their Info',
html: 'South',
width: 200,
margins: '5 5 5 5'
}]
});

1 Ответ

1 голос
/ 06 февраля 2012

Вы должны иметь возможность добавить свою панель инструментов в качестве опции конфигурации на bbar или tbar главной панели. 

var viewport = new Ext.Viewport({
  layout: "fit",           
  items: [
    //We add one "main" panel that fills up entire Viewport
    {
      layout: "border",
      defaults: {
        bodyStyle: 'padding:10px;',
      },
      tbar: new Ext.Toolbar({ 
        //your Toolbar config options
      }), 
      items: [
        //your panels here
      ]
    }
  ]
  ...

В этом сценарии вы захотите избавиться от конфигурации "renderTo"на панели инструментов.

...