0

ExtJS パネルの高さを取得するのに非常に苦労していますが、それが異なると考えることができる唯一の理由は、境界領域として定義されたパネルであるということです。彼らにバグ）。高さを取得しようとしている方法を示すコードから始めましょう。実際の高さ、ExtJS の表示内容、別のレイアウト (境界領域内のパネル):

    'cmBuildTab #cmProductExplorer': {
        afterrender: function(productExplorer) {
            var domNode = Ext.getDom(productExplorer.el),
                savedSearchesPanel = productExplorer.down('#savedSearchesPanel');

            console.log('productExplorer.getHeight(): ' + productExplorer.getHeight());   
            console.log(productExplorer.componentLayout);
            console.log(productExplorer.componentLayout.lastComponentSize);
            console.log(domNode);
            console.log('domNode.style.height: ' + domNode.style.height);
            console.log('savedSearchesPanel.getHeight(): ' + savedSearchesPanel.getHeight());
        }
    },

高さを取得するには、dom ノードまたは componentLayout.lastComponentSize を使用する別の方法がいくつかあるのではないかと最初は勧められましたが、どちらも Javascript コードからはアクセスできず、Chrome コンソールからのみアクセスできます。私の最後の試みは、返された dom 文字列を解析することですが、それは恐ろしいハックです。提案を歓迎します。console.log の結果の下に、ビュー構成の関連部分があります。

console.log の結果:

productExplorer.getHeight(): 2

Ext.Class.newClass
autoSized: Object
borders: Object
calculateDockBoxes_running: false
childrenChanged: true
frameSize: Object
id: "dock-1155"
info: Object
initialized: true
initializedBorders: true
lastComponentSize: Object
height: 787
width: 254
__proto__: Object
layoutBusy: false
layoutCancelled: false
onLayout_running: false
owner: Ext.Class.newClass
previousComponentSize: undefined
targetInfo: Object
__proto__: Class.registerPreprocessor.prototype

undefined

<div id=​"panel-1049" class=​"x-panel x-box-item x-panel-default" role=​"presentation" aria-labelledby=​"component-1198" style=​"margin:​ 0px;​ width:​ 254px;​ height:​ 787px;​ left:​ 0px;​ top:​ 0px;​ ">​…​&lt;/div>​

domNode.style.height:  

savedSearchesPanel.getHeight(): 151

構成の表示 (部分):

    },{
        region: 'west',
        collapsible: true,
        title: 'Product Explorer',
        itemId: 'cmProductExplorer',
        split: true,
        width: '20%',
        minWidth: 100,
        layout: {
        type: 'vbox',
        pack  : 'start',
        },
        items: [{
        collapsible: true,
        width: '100%',
        border: false,
        title: 'Search',
        itemId: 'savedSearchesPanel',
        items: [{
            border: false,
            xtype: 'cmSearchTermAccordionPanel'
        },{
            border: false,
            margin: '5 20 0 20',
            html: 'Saved Searches:<hr>'    
        }]
        },{
4

1 に答える 1

1

afterrenderコンポーネントの高さを決定するために使用するイベントではありません。要素のサイズが設定された後ではなく、要素がレンダリングされたときに発生します。4.1を使用している場合boxreadyは、コンテナの初期サイズが1回だけ発生するイベントを使用できますhttp://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-event-boxready。そうでない場合は、afterlayoutイベントを使用してサイズを決定できますが、そのイベントはすべてのレイアウトを起動します。

また、パーセンテージとしてのfyi幅は、4.0でサポートされているように文書化されていません。私はそれらが機能するのを見てきましたが、失敗するのを見ました。

これは、これで問題ないとの判決のおかげで、ビューポートの例からハイジャックしたコードです。
4.1

    Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 150,
        //ADD LISTENERS
        listeners: {
            afterrender:function(){console.log( 'afterrender ' +this.getHeight())},
            boxready:function(){console.log( 'boxready ' +this.getHeight())}
        }
        // could use a TreePanel or AccordionLayout for navigational items
    }, {
        region: 'south',
        title: 'South Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        split: true,
        width: 150
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});

出力：

afterrender 2
boxready 276
于 2012-05-25T02:00:56.140 に答える