BORDER LAYOUT COLLAPSEの奥秘

今日はレポートインタフェースを設計します.上半分はクエリー条件、下半分はBOを呼び出すレポートです.
要求は、クエリー条件を入力し、ポイントをリフレッシュし、上半分のクエリー条件を自動的に縮小することである.
デザインを始めたばかりの頃は、縮めることができましたが、再度クリックしてクエリー条件を開くと、
次のクエリの結果を縮小することはできません.ただのSLIDの動作です
長い間研究したが、上と下の2つの部品を設置する必要があるからだ.

            defaults: {
  			collapsible: true,
    			split: true
	   	    },

また、SLIDを禁止するためには、フローティングフォームを避けるためのオプションfloatable:falseを追加する必要がある.
単独の部品でCOLLAPSEができるものが一つしかないといけない.

        var viewport = new Ext.Viewport({
            layout: 'border',
            renderTo: 'reportResult',
            defaults: {

     			collapsible: true,
    			split: true

		    	//bodyStyle: 'padding:15px'
				},
            
            items: [
                {
                xtype:'form',
                region: 'north',
                height: 102, // give north and south regions a height
                minSize: 102,
                maxSize: 102, 
                hidden: ${hideForm},
                id: 'selectForm', 
                title: ' ', 
                frame: true,
                layout:'column', 

                items: [${paramList} {xtype:'button', text: ' ', 
                          handler:function(e){
                                    
                                    if(Ext.getCmp("selectForm").getForm().isValid()){
                                    	Ext.getCmp("selectForm").toggleCollapse(true);
                          	 			Ext.getCmp("SORiframe").setSrc("${openDocumentUrl}"+getUrl());
                          	 		}
                          	 			
                             
                                              }
                         
                         
                         }
                         
                         ]
            }, 
            centerPanel = new Ext.Panel({
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                activeTab: 0,     // first tab initially active
                layout: 'fit',
                resizable:true, 
                title: " ",
                items: [
                	{
        			xtype : 'iframepanel',
        			id : 'SORiframe',
        			frame: false,
        			loadMask : true
        			,defaultSrc:  "${defOpenDocumentUrl}"${boeUrl3}
        			//defaultSrc: '${defOpenDocumentUrl}'
    　　　　　			}
                ]
            })]
        });