`
kalogen
  • 浏览: 880037 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Ext TabPanel items高度宽度自适应(续)

阅读更多

经过努力调试,终于解决了头痛的问题,只要加上如下的红色,即可自适应浏览器了!浪费的时间可冤枉了,不过解决了也有成就感啊哈哈!


FirstPanel=function(){
 FirstPanel.superclass.constructor.call(this, {
    id : 'mapabcMonitor',
    contentEl : "mapdiv",
    layout : 'accordion',
    title : '地图监控',
    autoScroll: true,
    disabled:true,
    items : []
   });  
}
Ext.extend(FirstPanel, Ext.Panel);

SecondPanel=function(){
 
 SecondPanel.superclass.constructor.call(this, {
    id : 'center-panel',
    layout : 'accordion',
    title : '竹节图监控 ',
    autoScroll: true,
    disabled:false,
    html:'<br/><b><font color=red>颜色表示行驶方向:绿色向右,黄色向左,灰色未知方向 </font></b>(实时监控会自动刷新)<p>',
    items : []
   });  
}
Ext.extend(SecondPanel, Ext.Panel);

function removeMouseEven() {
 if(tabstate==1){
  var tab = Ext.getCmp('findaroundcar');
  var ap = tab.getActiveTab();
  if (ap.id == 'leftPanel2') {
   unregistMouseAddMarker();
  }
 }
}
function removeEven(){
 Ext.getCmp("center_del").hide();
 Ext.getCmp("center_set").show();
 Ext.getCmp("center_set").enable();
 longitude=0;
 latitude=0;
 removeMouseEven() ;
}
/***************************************************
 * 线路监控
 ************************************************/
LeftPanel = function() {
 var panel=this;
 this.secondPanel = new SecondPanel();
 this.firstPanel = new FirstPanel();
 
 this.tabs = new Ext.TabPanel({
   id : 'findaroundcar',
   activeItem : 1,
   border : false,
   items : [panel.secondPanel,panel.firstPanel]
   
 });
 LeftPanel.superclass.constructor.call(this, {
      title : '线路监控',
   id : 'leftPanel',
   region : 'center',
   layout:"fit",
   
collapsible: false,
   //autoScroll: true,
   items : [panel.tabs]
   });
}
Ext.extend(LeftPanel, Ext.Panel);

分享到:
评论

相关推荐

    WPF tab宽度自适应 可关闭

    以下将详细讲解如何实现“WPF TabControl”的可关闭功能以及宽度自适应。 一、添加可关闭按钮 1. 创建一个新的`TabItem`模板:首先,我们需要创建一个自定义的`DataTemplate`,在其中添加一个可以关闭的按钮。通常...

    可以拖拽的页签面板----Ext TabPanel

    在EXT JS这个强大的JavaScript框架中,`Ext.TabPanel` 是一个非常重要的组件,它用于创建具有可切换页签的用户界面。在这个特定的例子中,我们关注的是一个扩展版的`Ext.TabPanel`,它增加了拖放(DragDrop)功能,...

    tapestry4.02中封装ext的TabPanel组件

    在本文中,我们将深入探讨 Tapestry 4.02 框架中封装的 Ext TabPanel 组件。Tapestry 是一个开源的Java Web 应用程序开发框架,它允许开发者使用简单的Java类和模板语言来创建动态、交互式的Web应用。而 Ext 是一个...

    Ext中TabPanel的动态页面加载

    在EXT JS这个强大的JavaScript库中,`TabPanel`是一个核心组件,用于实现多标签页界面。本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载,这在构建可扩展且高效的Web应用时非常关键。通过动态加载,...

    ext-------竖向标签TabPanel

    竖向标签TabPanel-------------------------------------------------

    ext的tabpanel的激活与注意事项

    var tabPanel = Ext.getCmp('myTabPanel'); // 获取tabpanel实例 var desiredTab = Ext.getCmp('myDesiredTab'); // 获取目标选项卡实例 tabPanel.setActiveTab(desiredTab); // 激活目标选项卡 ``` 在这个例子中,...

    extjs4.2.1 tabPanel刷新及关闭标签

    this.tabPanel.items.each(function(item) { if (item !== activeItem && item.closable) { this.tabPanel.remove(item); } }, this); } ``` 在此函数中,首先获取当前激活的标签页,然后遍历`TabPanel`中的...

    treepanel 和 tabpanel 完整

    在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...

    ExtJS-3.4.0系列:Ext.TabPanel

    `width`和`height`分别定义了组件的宽度和高度。 接着,我们向`TabPanel`添加了两个面板(`items`): ```javascript tabs.add({ title: '标题 1', html: '内容 1' }); tabs.add({ id: Ext.id(), title: '...

    Ext中的tabpanel关闭后再打开不显示的问题

    ### Ext中的tabpanel关闭后再打开不显示的问题 在Ext框架中,`TabPanel`是一个非常重要的组件,用于实现页面中的多标签页功能。然而,在实际应用过程中可能会遇到一个常见问题:当某个标签页被关闭后,如果尝试重新...

    ExtJS扩展:垂直页签tabPanel

    在CSS中,我们需要调整原有的TabPanel样式,例如更改tab的位置、方向、宽度和高度,以及处理滚动条等。文件中可能包含对`.x-tab-bar`, `.x-tab` 和 `.x-tab-active` 等类的定制,以实现垂直方向的显示。 `scroll-...

    Ext.TabPanel

    TabPanel的使用,添加tab,加载页面,添加事件

    ExtJS TabPanel beforeremove beforeclose使用说明

    centerPanel = new Ext.TabPanel({ // ... listeners: { beforeremove: function(ct, component) { return false; // 阻止Panel被移除 } } }); ``` 然而,仅仅阻止`beforeremove`事件并不足以实现关闭确认...

    ExtJS tabPanel实例

    在JavaScript代码中,这通常会涉及创建一个新的对象,并配置相应的属性,如宽度、高度、边框等。 ```javascript var tabPanel = Ext.create('Ext.tab.Panel', { width: 800, height: 600, renderTo: Ext.getBody...

    ExtJS TabPanel 标签操作

    创建一个基本的TabPanel需要指定` xtype: 'tabpanel' `,并可以通过`items`属性来添加初始的面板。例如: ```javascript Ext.application({ name: 'MyApp', launch: function () { Ext.create('Ext.container....

    jQuery模仿ExtJS之TabPanel最新

    TabPanel(选项卡组件) 参数说明 renderTo| jQuery object | NULL&gt; 渲染到某容器 将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。 ...

    Extjs4.2 根据不同的数值设置tabpanel行的背景颜色

    var tabPanel = Ext.create('Ext.tab.Panel', { width: 600, height: 300, items: [ { title: 'Value Table', layout: 'fit', items: Ext.create('MyApp.view.MyGrid') } ] }).render(Ext.getBody()); })...

    ext 的拖拽示例,很不错的

    ext拖拽示例,可以通过ext生成的layout自动拖拽,效果很不错的

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    在本文中,我们将深入探讨ExtJS库中的两个关键组件:TreePanel和TabPanel,并结合实际测试情况来理解它们如何协同工作。ExtJS是一款强大的JavaScript框架,用于构建富客户端应用程序,而TreePanel和TabPanel是其核心...

    Extjs4.2 设置tabpanel当前活动页签的样式

    Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序(RIA)。其中,tabpanel是Extjs中一个常用的控件,用于显示多个面板。设置tabpanel当前活动页签的样式是...

Global site tag (gtag.js) - Google Analytics