Question

我在网络应用中使用了extjs4.1和geoext2 我想通过ajax将mapPanel加载到tabPanel，并填充tabPanel的高度和宽度如果我设置mapPanel的高度和宽度我可以在tabPanel中看到它，但它无法填充tabPanel，因为我设置它的高度和宽度。以下代码：

mapPanel = Ext.create("GeoExt.panel.Map", {
            renderTo: "mappanel",
            height: 575,
            width: 1124,
            map:map,
            zoom: 11,
            tbar : toolbar
        });
var tabs = Ext.create('Ext.tab.Panel', {
            region: 'center', // a center region is ALWAYS required for border layout
            deferredRender: false,
            activeTab: 0,     // first tab initially active
            items: [{
                title: 'History',
                autoScroll: true
            }, {
                title: 'Center Panel',
                autoScroll: true
            }]
        });

当用户通过以下代码单击带有图标的网格列时，我将MapPanel插入到tabPanel。

var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columnLines: true,
        columns: [
            {
                menuDisabled: true,
                sortable: false,
                xtype: 'actioncolumn',
                width: 20,
                items: [{
                    icon   : '<?php echo Yii::app()->baseUrl.'/images/icons/show.png';?>',
                    tooltip: 'Show Map',
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = store.getAt(rowIndex);
                        var jsonData = Ext.encode(store.proxy.reader.jsonData);
                        tabs.remove(tabs.getComponent(2));
                        tabs.insert(2,{
                            title:'Map',
                            layout: 'fit',
                            loader: {
                                scripts: true,
                                autoLoad :true,
                                params:{
                                    history:jsonData,
                                    index:rowIndex
                                },

                                failure : function(){
                                    alert('failed');
                                },
                                url: '<?php echo Yii::app()->createUrl('MapWidget/HistoryMap');?>'

                            }
                        });
                        tabs.setActiveTab(2);
                        tabs.doLayout();
                       }
                }]
            },
...

但是当我在mapPanel选项中清理高度和宽度时，我无法在tabPanel中看到它！如何将mapPanel加载到tabPanel以填充其内容？

Answer 1

来自文档

如果要将Component作为a的子项，请不要使用此选项容器。这是Container的布局经理的责任渲染和管理其子项目。

以下是以正确方式远程加载组件的示例代码：http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/component-loader/component-loader.html

在tabPanel中拟合mapPanel

1 个答案: