EXTJS(5.1.3)如何将展开工具对齐到East折叠到右侧面板的顶部

qpgpyjmq  于 2024-01-07  发布在  其他
关注(0)|答案(1)|浏览(124)

我有一个3面板的应用程序:左(西),中心和右(东).左,右面板是可折叠的.我想在右面板上的展开工具显示在折叠面板的侧标题的顶部.有没有办法做到这一点?到目前为止,我已经失败了.
这里有一个小提琴显示的问题:
https://fiddle.sencha.com/#fiddle/3ppm&view/editor
我试过查看可用的工具栏-似乎没有什么允许这样做。我也试过添加事件来拦截面板的展开和折叠,以尝试调整工具的位置,但似乎也不起作用。

5fjcxozz

5fjcxozz1#

你可以通过设置工具和标题的CSS样式来调整工具的位置。我已经更新了小提琴,检查你分享的小提琴!也有代码供你参考!
CSS代码:

  1. .x-tool-after-title{
  2. top:auto !important;
  3. }
  4. .x-title-rotate-right{
  5. top:30px !important;
  6. }

字符串
app.js:

  1. Ext.application({
  2. name: 'Fiddle',
  3. launch: function() {
  4. var mainView = new Ext.panel.Panel({
  5. xtype: 'panel',
  6. title: 'Container',
  7. layout: 'border',
  8. itemId: 'bigContainer',
  9. height: 300,
  10. items: [{
  11. xtype: 'panel',
  12. title: 'Left Panel',
  13. itemId: 'LeftPanel',
  14. region: 'west',
  15. width: 300,
  16. height: 900,
  17. collapsible: true,
  18. collapseMode: 'header',
  19. titleCollapse: true,
  20. split: true,
  21. flex: 1,
  22. scroll: false,
  23. }, {
  24. xtype: 'panel',
  25. title: 'Center',
  26. itemId: 'centerPanel',
  27. region: 'center',
  28. width: 300,
  29. height: 900,
  30. }, {
  31. xtype: 'panel',
  32. title: 'Right Panel',
  33. itemId: 'rightPanel',
  34. region: 'east',
  35. width: 300,
  36. height: 900,
  37. collapsible: true,
  38. collapseMode: 'header',
  39. titleCollapse: true,
  40. split: true,
  41. flex: 1,
  42. scroll: false,
  43. }],
  44. renderTo: Ext.getBody()
  45. });
  46. }
  47. });

展开查看全部

相关问题