[Layout] window中动态调整Panel样式错位的问题

[ 196 查看 / 5 回复 ]

返回列表
发新话题 回复该主题
fantasy8341
头像

  • 新手上路
  • 28
  • 28
  • 2008-09-09
2010-02-02 17:23 |只看楼主 1#
t T
window中动态调整Panel样式错位的问题
我做一个类似于QQ的界面。希望点击“聊天记录”后window宽度变宽，原本收缩的panel将会展开，并保证原来的聊天框口宽度不变，效果如图1.可是我当前实现的效果则是window宽度变宽，但是panel遮住原来的聊天框口。见图2. 请高手帮着看看，代码如下：
  1. Ext.onReady(function() {

  3. //追加按钮
  4. var addTool = function (){
  5. var f=0;
  6. Ext.getCmp('editMsg').getToolbar().add('-', {
  7. width : 20,
  8. text: '聊天记录',
  9. cls: 'x-btn-icon x-edit-mybuttons', //设置自定义样式
  10. handler: function() {
  11. //控制右侧panel
  12. if (f=== 1) {
  13. Ext.getCmp('mynav').collapse();
  14. f= 0;} else {
  15. Ext.getCmp('mynav').expand();
  16. Ext.get('winQQ').setWidth(800);
  17. f= 1; }
  18. }
  19. });
  20. }


  23. //文字显示区域------------
  24. var showMsg = new Ext.Panel({
  25. border : false, //边框线
  26. height : 200,
  27. xtype : 'panel',
  28. id : 'showMsg',
  29. layout : 'fit',
  30. bodyStyle : 'padding:10px;',
  31. autoScroll:true
  32. });
  33. //文字显示区域------------

  35. //编辑器------------
  36. var htmEditor = new Ext.form.HtmlEditor({
  37. xtype : 'htmleditor',
  38. id : 'editMsg',
  39. name : 'body',
  40. height:120,
  41. //width:100%,
  42. allowBlank : false,
  43. anchor : '0-50',
  44. enableSourceEdit:false,
  45. enableLists:false,
  46. enableLinks :false,
  47. enableAlignments :false,
  48. border : false
  49. });
  50. //编辑器------------

  52. //聊天纪录区域------------
  53. var eastPanel = new Ext.Panel({
  54. region:"east",
  55. title:"east",
  56. id:'mynav',
  57. width:350,
  58. split:true,
  59. collapsible:true,
  60. titleCollapse:true,
  61. collapsible : true,
  62. closable : true,
  63. collapsed : true //默认收缩状态
  64. });
  65. //聊天纪录区域------------

  67. var win = new Ext.Window({
  68. title : 'winQQ',
  69. id : 'winQQ',
  70. name : 'winQQ',
  71. width : 480,
  72. height : 400,
  73. collapsible : true,
  74. labelAlign : 'left',
  75. labelWidth : 60,
  76. hideLabel : false,
  77. maximizable : true,
  78. border : false,
  79. layout : 'border',
  80. frame : true,
  81. items:[{
  82. region:"center",
  83. border : false, //边框线
  84. items:[showMsg,{
  85. labelAlign: 'top',
  86. minHeight : 150,
  87. frame:true,
  88. split : true,
  89. xtype : 'form',
  90. border : false,
  91. hideLabels : true,
  92. bodyStyle : 'background:transparent;',
  93. items : [htmEditor],
  94. buttons : [{
  95. text : '发送',
  96. type:'submit'
  97. }, {
  98. text : '关闭'
  99. }]
  100. }]
  101. },eastPanel]
  102. });

  104. win.show();
  105. addTool(); //追加按钮
  106. });
复制代码
附件:您所在的用户组无法下载或查看附件
TOP
supergarfield
头像

  • 版主
  • 2578
  • 2521
  • 2009-02-05
Medal No.1Medal No.2Medal No.3Medal No.4
2010-02-02 17:25 |只看该用户 2#
t T
window中动态调整Panel样式错位的问题

展开后用window的doLayout方法试试。
TOP
fantasy8341
头像

  • 新手上路
  • 28
  • 28
  • 2008-09-09
2010-02-02 20:57 |只看楼主 3#
t T
window中动态调整Panel样式错位的问题

2楼的说法 我试了一下  好像不行啊
TOP
supergarfield
头像

  • 版主
  • 2578
  • 2521
  • 2009-02-05
Medal No.1Medal No.2Medal No.3Medal No.4
2010-02-03 08:49 |只看该用户 4#
t T
window中动态调整Panel样式错位的问题

代码应该改成这样：
  1.                     Ext.getCmp('winQQ').setWidth(800);
                        Ext.getCmp('mynav').expand();
                        f = 1;

                        Ext.getCmp('winQQ').doLayout();
复制代码
TOP
fantasy8341
头像

  • 新手上路
  • 28
  • 28
  • 2008-09-09
2010-02-03 09:20 |只看楼主 5#
t T
window中动态调整Panel样式错位的问题

  1. Ext.get('winQQ').setWidth(800);
  2.                                                         Ext.getCmp('mynav').expand();
  3.                                                         f= 1;
  4.                                                         win.doLayout();
复制代码
是改为这样了，没有作用啊，版主你试过了嘛，不行吧？
TOP
supergarfield
头像

  • 版主
  • 2578
  • 2521
  • 2009-02-05
Medal No.1Medal No.2Medal No.3Medal No.4
2010-02-03 12:12 |只看该用户 6#
t T
window中动态调整Panel样式错位的问题

看来楼主根本没有仔细看我贴出来的代码：
你的代码：Ext.get('winQQ').setWidth(800);
我的代码：Ext.getCmp('winQQ').setWidth(800);

在加上doLayout方法就行了。
TOP
返回列表
上一主题 | 下一主题