PropertyGrid Layout - Ext JS-优快云博客

本文探讨了Ext.grid.PropertyGrid在IE7和Firefox2浏览器下的两个显示问题：文本溢出处理不一致及编辑框定位偏移。通过示例代码复现问题，并推测可能的原因在于CSS设置差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Couple of issues related to the use of Ext.grid.PropertyGrid.

(1) In IE7 when a string is wider than the size of the column, you get the ... indicator at the end of the text - this is missing when the same page is viewed in Firefox 2.

(2) This is more of a strange positioning issue. Using the sample code below (which can be saved into any html file - changing the ext locations at the top of the file).

When you double-click on the value field, the editable text field appears, but is not correctly centered - it is slightly shifted to the left - and you can see the original underlying text at the far right side. I know this is probably a css issue (most likely in my example rather than EXT) as the PropertyGrid looks as it should in Jack's Ext Debug Console and Inspector dialog - but am not sure where?

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Grid Test</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="ext/yui-utilities.js"></script>
        <script type="text/javascript" src="ext/ext-yui-adapter.js"></script>
        <script type="text/javascript" src="ext/ext-all-debug.js"></script>   
        <script type="text/javascript">
            AppPanels = function(){
                return {
                    init : function(){
                       var layout = new Ext.BorderLayout(document.body, {
                            hideOnLayout: true,
                            east: {
                                split:true,
                                initialSize: 250,
                                minSize: 175,
                                maxSize: 400,
                                titlebar: true,
                                collapsible: true,
                                animate: true
                            },
                            center: {
                                titlebar: true,
                                autoScroll:false
                            }
                        });
                        
                        var propsFilterLayout = new Ext.BorderLayout('content', {
                            center: {
                                titlebar: true,
                                autoScroll:true
                            }
                        });
                        
                        layout.beginUpdate();                
                        
                        var stylesGrid = new Ext.grid.PropertyGrid('propsPanel', {
                            nameText: 'Style',
                            enableCtxMenu: false,
                            enableColumnResize: true,
                            clicksToEdit: 2
                        });
                        stylesGrid.setSource({});
                        var stylePanel = propsFilterLayout.add('center', 
                                    new Ext.GridPanel(stylesGrid, {title: 'Node:'}));
                        stylesGrid.render();
                        stylesGrid.getView().mainHd.setDisplayed(true);
                          
                        layout.add('east', new Ext.NestedLayoutPanel(propsFilterLayout, {title: 'Properties', closable: false}));
                        layout.add('center', new Ext.ContentPanel('center1', {title: 'Graph', closable: false}));
                        layout.endUpdate();
                        
                        var value = new Ext.grid.PropertyRecord({       
                                       name: "Description",
                                       value: "This is a slightly long description which may or may not be useful!"
                                     });
                                     
                        var locds = stylesGrid.getDataSource();
                        locds.insert(0,value);
                    }  
                };     
            }();
            Ext.EventManager.onDocumentReady(AppPanels.init, AppPanels, true);
        </script>      
    </head>
    <body>
        <div id="center1">Central panel.</div>
        <div id="content"></div>
        <div id="propsPanel"></div>
    </body>
</html>

[/code]