1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    76
    Vote Rating
    0
    ismoore is on a distinguished road

      0  

    Question Upgrade Grid to Ext1.0 from 0.33 - render problems

    Upgrade Grid to Ext1.0 from 0.33 - render problems


    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
    Attached Images

  2. #2
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    159
    Vote Rating
    4
    Juanito is on a distinguished road

      0  

    Default Browser???

    Browser???


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

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    76
    Vote Rating
    0
    ismoore is on a distinguished road

      0  

    Default


    FireFox 2.0.0.3

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    76
    Vote Rating
    0
    ismoore is on a distinguished road

      0  

    Default still no joy

    still no joy


    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
    Code:
    <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
    Don't know if this could be causing a problem?

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    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?

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Posts
    76
    Vote Rating
    0
    ismoore is on a distinguished road

      0  

    Default more info

    more info


    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:
    Code:
    	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()

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    76
    Vote Rating
    0
    ismoore is on a distinguished road

      0  

    Default error in grid code

    error in grid code


    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:

    Code:
     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){

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    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.

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Posts
    76
    Vote Rating
    0
    ismoore is on a distinguished road

      0  

    Default


    Quote Originally Posted by tryanDLS View Post
    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.
    Code:
    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

Thread Participants: 2