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" target="_blank" rel="external nofollow" />
<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]
 # 2   |
| |