Question

我试图想出如何在两个不同的浏览器上显示菜单。现在，它非常适合在Chrome上使用固定位置（仅适用于小型Ext面板，而不是所有页面都不用担心）。

问题是它在FireFox中无法正确显示（FireFox中的滑块太多了）。我试图让它们漂浮：对，但它根本不起作用。第一个是完美的，其他的根本没有任何意义。

我尝试使用表格，但我似乎无法理解这种技巧。我已经制作了一张2张colomns牌桌，而这根本不是我所拥有的。

这是Linux（左）和Chrome（右）上面板的图片。面板是带有滑块的面板。你可以看到，在FireFox上，滑块太长了，因为我现在使用固定位置。

FireFox is Left, Chrome is right, see the sliders...

你对我有什么想法吗？桌面布局是个好主意吗？我应该简单地降低滑块的宽度以使它们都适合吗？有办法吗？

或者可能最好问一下：有没有办法让我的大左面板（所有剩下的东西）确保一切都适合那里？因为如果我全屏打开页面，左侧面板的大小正确，即使我调整了较小的尺寸，也没有任何问题......

非常感谢你们。

PS：这是我面板的代码（全部）（它缩进很多，在右侧看到）：

new Ext.Panel({
                                                                                                title: '<center>' + extjs_gui_products_tab + '</center>',
                                                                                                id: 'products_tab',
                                                                                                xtype: 'checkboxgroup',
                                                                                                padding: 3,
                                                                                                cls: 'ProductLabel', 
                                                                                                items: [  

                                                                                                            //TOFINISH
                                                                                                            new Ext.Slider({
                                                                                                                                        width: 125,
                                                                                                                                        value: 73,
                                                                                                                                        listeners: {
                                                                                                                                            change: function(analysesSlider, val) {
                                                                                                                                                map.getLayersByName(openlayers_wms_layer_analyses)[0].setOpacity(val/100);
                                                                                                                                         }},
                                                                                                                                        style: 'position:absolute; left:135px;'
                                                                                                                                        }),                                                             
                                                                                                            new Ext.form.Checkbox({
                                                                                                                                        title: extjs_gui_products_analyses_checkbox_title,
                                                                                                                                        id: 'analyses_checkbox_extjs',
                                                                                                                                        boxLabel: extjs_gui_products_analyses_checkbox_label,
                                                                                                                                        inputValue: extjs_gui_products_analyses_checkbox_label,
                                                                                                                                        listeners: {
                                                                                                                                            check: addAnalyseLayer
                                                                                                                                        }
                                                                                                                                    }),
                                                                                                            new GeoExt.LayerOpacitySlider({
                                                                                                                                            width: 125,
                                                                                                                                            value: 73,
                                                                                                                                            layer: map.getLayersByName(openlayers_vector_layer_observations)[0],
                                                                                                                                            aggressive: true, 
                                                                                                                                            style: 'position:absolute; left:135px;'
                                                                                                                                        }),   

                                                                                                            new Ext.form.Checkbox({
                                                                                                                                        title: extjs_gui_products_observations_checkbox_title,
                                                                                                                                        id: 'observations_checkbox_extjs',
                                                                                                                                        boxLabel: extjs_gui_products_observations_checkbox_label,
                                                                                                                                        inputValue: extjs_gui_products_observations_checkbox_label,
                                                                                                                                        listeners: {
                                                                                                                                            check: loadGeoJSON
                                                                                                                                        }
                                                                                                                                    }),";

                                                                                                        //this condition controls whether or not the radar button is included in the javascript of the GUI
                                                                                                        if($radarButton==="true"){
                                                                                                                                echo "
                                                                                                                                //TOFINISH
                                                                                                                                new Ext.Slider({
                                                                                                                                        width: 125,
                                                                                                                                        value: 73,
                                                                                                                                        listeners: {
                                                                                                                                            change: function(radarSlider, val) {
                                                                                                                                                map.getLayersByName(openlayers_wms_layer_radar)[0].setOpacity(val/100);
                                                                                                                                         }},
                                                                                                                                        style: 'position:absolute; left:135px;'
                                                                                                                                        }),  
                                                                                                                                new Ext.form.Checkbox({
                                                                                                                                                            title: extjs_gui_products_radar_checkbox_title,
                                                                                                                                                            id: 'radar_composite_checkbox_extjs',
                                                                                                                                                            boxLabel: extjs_gui_products_radar_checkbox_label,
                                                                                                                                                            inputValue: extjs_gui_products_radar_checkbox_label,
                                                                                                                                                            listeners: {
                                                                                                                                                                check: addRadarLayer
                                                                                                                                                            }
                                                                                                                                                        }),";
                                                                                                        }
                                                //this condition controls whether or not the radar button is included in the javascript of the GUI
                                                if($forecastButton==="true"){
                                                                                echo "                                                                                                                          
                                                                                                            //TOFINISH
                                                                                                            new Ext.Slider({
                                                                                                                                        width: 125,
                                                                                                                                        value: 73,
                                                                                                                                        listeners: {
                                                                                                                                            change: function(forecastSlider, val) {
                                                                                                                                                map.getLayersByName(openlayers_wms_layer_forecast)[0].setOpacity(val/100);
                                                                                                                                         }},
                                                                                                                                        style: 'position:absolute; left:135px;'
                                                                                                                                        }), 
                                                                                                            new Ext.form.Checkbox({
                                                                                                                                        title: extjs_gui_products_forecast_checkbox_title,
                                                                                                                                        id: 'forecast_checkbox_extjs',
                                                                                                                                        boxLabel: extjs_gui_products_forecast_checkbox_label,
                                                                                                                                        inputValue: extjs_gui_products_forecast_checkbox_label,
                                                                                                                                        listeners: {
                                                                                                                                            check: addForecastLayer
                                                                                                                                        }
                                                                                                                                    }),";
                                                }
                                                                                                        //this condition controls whether or not the summation button is included in the javascript of the GUI
                                                                                                        if($sumButton==="true"){

                                                                                                                                echo "
                                                                                                                                //TOFINISH
                                                                                                                                new Ext.Slider({
                                                                                                                                        width: 125,
                                                                                                                                        value: 73,
                                                                                                                                        listeners: {
                                                                                                                                            change: function(summationSlider, val) {
                                                                                                                                                map.getLayersByName(openlayers_wms_layer_summation)[0].setOpacity(val/100);
                                                                                                                                         }},
                                                                                                                                        style: 'position:absolute; left:135px;'
                                                                                                                                        }), 
                                                                                                                                new Ext.form.Checkbox({
                                                                                                                                                            title: extjs_gui_products_sum_checkbox_title,
                                                                                                                                                            id: 'sum_checkbox_extjs',
                                                                                                                                                            boxLabel: extjs_gui_products_sum_checkbox_label,
                                                                                                                                                            inputValue: extjs_gui_products_sum_checkbox_label,
                                                                                                                                                            listeners: {
                                                                                                                                                                check: addSummationLayer
                                                                                                                                                            }
                                                                                                                                                        })";

                                                                                                        }

                                                                                echo "
                                                                                                ]
                                                                            }),

Answer 1

看起来它与滑块宽度关系不大，而且更多地与父面板有关。

您的代码没有为您设置父面板宽度的任何内容。

试试看，看看会发生什么。

（尝试稍微清理一下代码 - 很难看到它发生了什么，因为它向右缩进了。）

固定位置不会在不同的浏览器中执行，如何在Ext.Panel中创建包含列的表？

1 个答案: