Upgrade Grid to Ext1.0 from 0.33 - render problems

[ismoore]

Hi

I am in the process of upgrading to 1.0 (production) and have hit problems with the grid control.
I can now get data into the grid fine but
1. all of the headers appear next to each other rather than being spaced though the actual resize bars do appear in the correct place. as you will see from the example the columns do not align to the contents, and the splitters are at the start of account, the middle of amount etc.
2. attempting to resize does nothing at all to the columns.
(see attachment for example - some data 'erased' as it is sensitive)
All was working fine before the upgrade.

Also I want to include more than one grid on the page - is it still the case that I need to define different styles for each grid?

many thanks in advance

[Juanito]

Which browser are you using? I have only seen this problem with pre 2.0 Safari (not supported)

[ismoore]

FireFox 2.0.0.3

[tryanDLS]

Please read this thread which highlights a number of .33 to 1.0 changes - it will probably answer most of your questions.

This thread also addresses some additional changes from 1.0 Beta to 1.0 Final.

[ismoore]

thanks for the information. However it still isn't working The main part of the grid is acting just like a table (when I shrink the grid view the columns shrink too).
here are my includes (context path gets expanded by JSP) and they are all loading correctly, as are the styles

<script type="text/javascript" src="<%=request.getContextPath()%>/pages/javascript/lib/xslfunctions.js"></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/pages/javascript/yui-ext/adapter/yui/yui-utilities.js'></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/pages/javascript/yui-ext/adapter/yui/ext-yui-adapter.js'></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/pages/javascript/yui-ext/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/pages/javascript/yui-ext/resources/css/ext-all.css" />

is there anything obvious I could look for to see what is going wrong? I looked at the styles that were generated and did notice that non of them seemed to have any width information attached unlike the example where I see the widths.

Also when I startup, I get the following error

sp has no properties
http://localhost:8080/pages/javascri...yui-adapter.js
Line 9

Don't know if this could be causing a problem?

[tryanDLS]

Is this happening both FF and IE. Did you change the CSS style names in your HTML to reflect the changes in 1.0 (e.g. everything starts with 'x-')? Can you post your grid/datastore creation code?

[ismoore]

I have changed all of the styles though I didn't have any related to the grid anyway.

The grid is generated based on some XML. I can confirm that headers and fields make sense all of the widths are 100 or more - there were some extra bits in there which I have commented out ( apologies for all of the comments but I have been removing things to make sure nothing else is affecting it. I cannot test on IE at present as there is something else in the code that is causing IE to break and I need to debug that

code follows:

	var fieldNodes = thisNode.selectNodes("columns/column")
    	var headers = $A(fieldNodes).collect(function(node){
					var attrNode = node.attributes;	
					var width = attrNode.getNamedItem("width")? attrNode.getNamedItem("width").value: 100;
					var renderer = null; //(attrNode.getNamedItem("name").value.substring(0,6) == "state")? staterenderer:null;
					
					return {header:attrNode.getNamedItem("name").value , dataIndex:attrNode.getNamedItem("name").value,
							sortable:true, width:parseInt(width) /*, id:attrNode.getNamedItem("name").value, 
			                format:(attrNode.getNamedItem("format")? attrNode.getNamedItem("format").value:"ljt"),
			                renderer:renderer */}
				})
          			
  		var fields = $A(fieldNodes).collect(function (node){return node.attributes.getNamedItem("name").value})
        var schema = {
            tagName: 'record',
            id: 'msgid',
            fields: fields
        };
        //var dataModel = new Ext.widget.grid.XMLDataModel(schema);
         var dataModel = new Ext.data.Store({
        // load using HTTP
        proxy: new Ext.data.HttpProxy({url:Bijective.constants.mvc + '/getGridData'}),
        baseParams: {view:thisNode.getAttribute("name"),queue:currentQueueName,department:currentDepartment,domain:currentDomain },

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               
               record: 'record',
               id: 'msgid'
           }, fields)
    	});
        
        var colModel = new Ext.grid.ColumnModel(headers);
		var selectionModel = new Ext.grid.RowSelectionModel({singleSelect:true})
		selectionModel.addListener("selectionchange",function(sm, rows, ids){
			if (ids[0]) 
				msgid=ids[0];
				var cp = innerLayout.getRegion('south').getActivePanel()
				Screen.tabChange.call(cp.getUpdateManager(), cp)
			}
			, dataModel, true);
		// get unique name of grid
		var id = "grid:"+thisNode.getAttribute("name")
		// create div to contain this grid if it does not exist already
		if (!$(id)) document.body.appendChild(Builder.node("div",{id:id}))
		grid = new Ext.grid.Grid(id, {ds:dataModel, cm:colModel, sm:selectionModel, trackMouseOver:true}).render()
		dataModel.load()
		var vp = innerLayout.add('center', new Ext.GridPanel(grid, {title: thisNode.getAttribute("name")}));
	innerLayout.endUpdate()

[ismoore]

Iwas trying to debug though this and in GridView.layout, when the timer triggers, it seems that is2ndPass is undefined and this causes an exception:

 setTimeout(function(){
 var t = s.dom.offsetTop;
 var w = s.dom.clientWidth,
 h = s.dom.clientHeight;

 lw.setTop(t);
 lw.setSize(ltWidth, h);

 mw.setLeftTop(ltWidth, t);
 mw.setSize(w-ltWidth, h);

 lb.setHeight(h-hdHeight);
 mb.setHeight(h-hdHeight);

 if( is2ndPass !== true && !gv.userResized && expandCol){

[tryanDLS]

is2Pass being null wouldn't in itself cause an exception. I would set a BP there and look at what's happening with cm. It's hard to tell what the colModel looks like based on your generation code, but my guess would be that it's incorrectly set up.

[ismoore]

is2Pass being null wouldn't in itself cause an exception. I would set a BP there and look at what's happening with cm. It's hard to tell what the colModel looks like based on your generation code, but my guess would be that it's incorrectly set up.

you are right, though I have not found an instance yet where it passes into this part of the function.
For the column model I have dumped the creation from FireBug of the array of headers passed.

headers
	[Object header=crtraderef dataIndex=crtraderef, Object header=fund dataIndex=fund sortable=true width=100, Object header=account dataIndex=account sortable=true, 7 more...]
0
	Object header=crtraderef dataIndex=crtraderef
dataIndex	"crtraderef"
header	"crtraderef"
sortable	true
width	100
1
	Object header=fund dataIndex=fund sortable=true width=100
dataIndex	"fund"
header	"fund"
sortable	true
width	100
2
	Object header=account dataIndex=account sortable=true
dataIndex	"account"
header	"account"
sortable	true
width	100
3
	Object header=currency dataIndex=currency sortable=true
dataIndex	"currency"
header	"currency"
sortable	true
width	100
4
	Object header=amount dataIndex=amount sortable=true
dataIndex	"amount"
header	"amount"
sortable	true
width	100
5
	Object header=counterparty dataIndex=counterparty
dataIndex	"counterparty"
header	"counterparty"
sortable	true
width	100
6
	Object header=valuedate dataIndex=valuedate sortable=true
dataIndex	"valuedate"
header	"valuedate"
sortable	true
width	100
7
	Object header=movementtype dataIndex=movementtype
dataIndex	"movementtype"
header	"movementtype"
sortable	true
width	100
8
	Object header=settlementdate dataIndex=settlementdate
dataIndex	"settlementdate"
header	"settlementdate"
sortable	true
width	100
9
	Object header=tradedate dataIndex=tradedate sortable=true
dataIndex	"tradedate"
header	"tradedate"
sortable	true
width	100

Don't know if that helps at all