• ExtJs里表格自动显隐滚动条


    ExtJs里面,layout:’border’这种布局应该很常用,但我用的时候,因为不熟,走了一些弯路。比如说,一个页面,大体布局是这样的:

    上:查询输入框
    中+下:查询结果(表格,底部有分页控件)

    代码如下,其中有些属性一定要设置才能达到理想的效果(参阅注释):

    var formQuery = Ext.create('QueryFormTongji', {
            id: 'formPower1',region: 'north'//这个region很重要!如果没有它,此查询框将被下面的表格所屏蔽
        });//查询框
        var formTu = Ext.create('QueryFormTongjiTu', {
            id: 'formTu', heigth: 220, region: 'north'
        });//统计图
    
        var grid = Ext.create('my.view.test.List', {
            id: 'grid1',
            region: 'center',
            store: listStore,
            columns: [……]});//查询结果(表格)
    
            var vp = Ext.create('Ext.container.Viewport', {
            layout: { type: 'border' },
            items: [{
                xtype: 'tabpanel',
                region: 'center',
                id: 'topPanel',
                activeTab: 0,
                items: [
                                {
                                    xtype: 'panel',
                                    title: '查询',
                                    id: 'panelPower',
                                    layout: 'border',//有了这个属性,表格才会随分辨率而自动显隐垂直滚动条
                                    items: [formQuery,grid]
                                },
                               {
                                   xtype: 'panel',
                                   title: '统计图',
                                   layout: 'border',
                                   id: 'tPanel',
                                   items: [
                                        formTu,
                                        {
                                            autoScroll: true,
                                            xtype: 'panel',
                                            region: 'center',
                                            contentEl: 'DivMapWinInfo'
                                        }
                                    ]
                               }
                        ],
                listeners: {
                    tabchange: {
                        fn: this.onTopTabpanelTabChange,
                        scope: this
                    }
                }
            }]
        });    

    版权声明:本文为博主原屙文章,喜欢你就担走。

  • 相关阅读:
    ubuntu segmentation fault 段错误
    css配合js模拟的select下拉框
    让IE6下支持固定定位
    max-height,min-height在IE下不支持的解决方法
    图片居中
    完美运动框架,随意调用,兼容性好
    JS创建Ajax的XMLHttpRequest对象的通用方法
    JS兼容性问题(FF与IE)
    css样式
    html之marquee详解[转]
  • 原文地址:https://www.cnblogs.com/leftfist/p/4764231.html
Copyright © 2020-2023  润新知