PDA

View Full Version : Strage behaviour with panel.update


mhubert
5 Jun 2007, 9:43 PM
I have a nested layout -- I can probably post a live example sometime tomorrow if needed.


...
var reportSearch = new Ext.ContentPanel('report-search', "Search");
var reportSummary = new Ext.ContentPanel('report-summary',"Report Summary");

var reportLayout = new Ext.BorderLayout(Ext.get('report'), {
hideOnLayout: true
, north: {
initialSize: 160
, minSize: 50
, maxSize: 400
, titlebar: true
, collapsible: true
, showPin: true
, animate: true
, autoScroll: true
, collapsedTitle: 'Report - Search'
, split: true
, collapsed: true
, hidden: false
}
, center: { titlebar: true
, autoScroll: true
, titlebar: true
, collapsible: true
, showPin: true
, animate: true
, autoScroll: true
, collapsedTitle: 'Report - Summary'
}
});
reportLayout.add('north', reportSearch);
reportLayout.add('center', reportSummary);
...
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', {}));
layout.add('west', acc);
...
layout.add('center', new Ext.ContentPanel('report', "Report"));
layout.add('center', new Ext.ContentPanel('howto', "How to"));
layout.add('south', new Ext.ContentPanel('south', "Footer"));


layout.getRegion('center').showPanel(tabId || 'dashboard');
layout.restoreState();
layout.endUpdate();



I am updating the ReportSummary using JavaScript



<script type="text/javascript" language="javascript">
function display_report(report) {
panel = Ext.get("report-summary");
//panel = Ext.get("report");
panel.load({
url: "report.html",
//params: {"parameter":report},
nocache: false,
text: "Loading...",
showLoadIndicator: true,
scripts: true
});
//alert("loaded");
}

</script>


report.html will eventually call the backend process -- but this seamed easier for now
the resulting grid
will only appear after I resize the browser window (this behaviour is consisten accross IE6, IE7, FF2) so I assume it is somethig I am not doing quite right.

Please let me know.

Thx

Martin
PS: Jack -- I just subscribed to the Silver support -- in hopes to support your effort and maybe getting some of my deficiencies bridged faster ;)
brian.moeskau
5 Jun 2007, 10:08 PM
".html" is actually an invalid file type for doing POSTs (which is what update does for you behind the scenes) -- if you look in Firebug at your HTTP response, I would guess that it's an HTTP error code telling you that you can't POST to an html file. If that's the case, then you should replace it with a basic placeholder server page of some sort (php, asp). If that's not your issue, then I'm not sure what the problem is :) but I have seen this as an issue in the past.

Edit: The specific HTTP code that I've seen in this situation in the past is 405. If you have that error, it means that the HTTP method (POST) is not allowed for the resource that you are pointing to on the server.
mhubert
5 Jun 2007, 10:12 PM
".html" is actually an invalid file type for doing POSTs (which is what update does for you behind the scenes) -- if you look in Firebug at your HTTP response, I would guess that it's an HTTP error code telling you that you can't POST to an html file. If that's the case, then you should replace it with a basic placeholder server page of some sort (php, asp). If that's not your issue, then I'm not sure what the problem is :) but I have seen this as an issue in the past.
I run on a localhost using the wamp server on windows, one can also change the apache config manually if desired to allow post to an .html
Thanks for trying -- but I don't believe this is it -- since I also get the desired display once I resize the browser (as mentioned above)
jack.slocum
6 Jun 2007, 1:21 AM
What's the code look like coming back from the server?
mhubert
6 Jun 2007, 5:01 AM
What's the code look like coming back from the server?

if I change the javascript that fills the panel to point to the report panel
(panel = Ext.get("report");) it displays without the discribed problem.

report.html


<html>
<body>
Report
<script type="text/javascript" src="report.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<div id="example-grid" class="x-grid-mso" style="border: 1px solid #c3daf9; overflow: hidden; width:520px;"></div>
</body>
</html>

report.js


var baseUrl='tarifftrek.xml';

Ext.onReady(function(){

// create the Data Store
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: baseUrl}),
baseParams:{action_display_report_xml:'1',database:'ups',report_id:'commoditysearch',auth_user_name:'uptimect',auth_password:'5002-frus',auth_logon_op:'1'},
reader: new Ext.data.XmlReader({
// records will have an "row" tag
record: 'row',
totalRecords: 'total'
}, ['id','carrier','detail'])
});

var cm = new Ext.grid.ColumnModel([
{header: "id", width: 120, dataIndex: 'id'},
{header: "carrier", width: 80, dataIndex: 'carrier'},
{header: "detail", width: 285, dataIndex: 'detail'}
]);

cm.defaultSortable = true;

// create the grid
var grid = new Ext.grid.Grid('example-grid', {
ds: ds,
cm: cm
});
grid.render();

var gridFoot = grid.getView().getFooterPanel(true);

// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying record {0} - {1} of {2}',
emptyMsg: "No records to display"
});


ds.load({params:{start:1,limit:25,action_display_report_xml:1,database:'ups',report_id:'commoditysearch'}});
});


and tarifftrek.xml:


<?xml version="1.0" encoding="UTF-8" ?>
<report_response generator="Tariff-Trek-V5">
<result>
<total>2021</total>
<row><id>YMASU-B022</id><fak>N</fak><carrier>YMLU</carrier><detail>LIGHTING EQUIPMENT/REFLECTORS</detail><exception/></row>
<row><id>YMASU-B023</id><fak>N</fak><carrier>YMLU</carrier><detail>WHEELS</detail><exception/></row>
<row><id>YMASU-B024</id><fak>N</fak><carrier>YMLU</carrier><detail>SPORTING EQUIPMENT</detail><exception/></row>
<row><id>YMASU-B025</id><fak>N</fak><carrier>YMLU</carrier><detail>STONEWARE</detail><exception/></row>
<row><id>YMASU-B028</id><fak>N</fak><carrier>YMLU</carrier><detail>HARDWARE (HOUSED BEARING / CONVOYER)</detail><exception/></row>
<row><id>YMASU-B029</id><fak>N</fak><carrier>YMLU</carrier><detail>GIFTWARE</detail><exception/></row>
<row><id>YMASU-B030</id><fak>N</fak><carrier>YMLU</carrier><detail>INFLATABLE BEDS</detail><exception/></row>
<row><id>YMASU-B031</id><fak>N</fak><carrier>YMLU</carrier><detail>SCREWS, BOLTS &amp; NUTS</detail><exception/></row>
<row><id>YMASU-B032</id><fak>N</fak><carrier>YMLU</carrier><detail>GREETING CARDS</detail><exception/></row>
<row><id>YMASU-B034</id><fak>N</fak><carrier>YMLU</carrier><detail>NAILS</detail><exception/></row>
<row><id>YMASU-B035</id><fak>N</fak><carrier>YMLU</carrier><detail>MOTORS, NOS</detail><exception/></row>
<row><id>YMASU-B036</id><fak>N</fak><carrier>YMLU</carrier><detail>E.GOODS</detail><exception/></row>
<row><id>YMASU-B037</id><fak>N</fak><carrier>YMLU</carrier><detail>YARNS</detail><exception/></row>
<row><id>YMASU-B038</id><fak>N</fak><carrier>YMLU</carrier><detail>TURNER</detail><exception/></row>
<row><id>YMASU-B039</id><fak>N</fak><carrier>YMLU</carrier><detail>DECORATIVE GLASS</detail><exception/></row>
<row><id>YMASU-B040</id><fak>N</fak><carrier>YMLU</carrier><detail>LIGHTING FIXTURES</detail><exception/></row>
<row><id>YMASU-B041</id><fak>N</fak><carrier>YMLU</carrier><detail>RACING CAR</detail><exception/></row>
<row><id>YMASU-B042</id><fak>N</fak><carrier>YMLU</carrier><detail>CLEANER</detail><exception/></row>
<row><id>YMASU-B043</id><fak>Y</fak><carrier>YMLU</carrier><detail>FAK (EXCLUDING GARMENTS)</detail><exception>GARMENTS</exception></row>
<row><id>CNUAS-B001</id><fak>N</fak><carrier>CHIN</carrier><detail>SOAP FLAKES</detail><exception/></row>
<row><id>CNUAS-B002</id><fak>N</fak><carrier>CHIN</carrier><detail>VACUUM SYSTEMS</detail><exception/></row>
<row><id>WSASC-FAK1</id><fak>Y</fak><carrier>WSDU</carrier><detail>Freight all kinds, including general departments store merchandise and garments.</detail><exception>Excludes coiled metals, except Port-to-Port; excludes hazardous cargo (unless specifically provided herein), refrigerated cargo and over dimensional cargo.</exception></row>
<row><id>CNUAS-B003</id><fak>N</fak><carrier>CHIN</carrier><detail>Aluminum Powder, Non Hazardous</detail><exception/></row>
<row><id>SHASU-FAKN</id><fak>Y</fak><carrier>SHPT</carrier><detail>FREIGHT ALL KINDS, NON-HAZARDOUS</detail><exception>HAZARDOUS</exception></row>
<row><id>MSLUS-B009</id><fak>N</fak><carrier>MESU</carrier><detail>TIRES</detail><exception/></row>
</result>
<messages>
</messages>
</report_response>


thanks
jack.slocum
6 Jun 2007, 6:05 AM
You will need to remove the html and body tags. Those are invalid to inject in the middle of a page.
tryanDLS
6 Jun 2007, 6:17 AM
The report.html snippet should not contain HTML and BODY tags. Also, the .css file will not get processed when loading this way - all your css should be included in your base page.
mhubert
7 Jun 2007, 7:08 AM
The report.html snippet should not contain HTML and BODY tags. Also, the .css file will not get processed when loading this way - all your css should be included in your base page.
very strange:
[code]
Report
<script type="text/javascript" src="report.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<div id="example-grid" class="x-grid-mso" style="border: 1px solid #c3daf9; overflow: hidden;
width:520px;"></div>
[\code]
removed the body and html tag --- but no change in behaviour.

Which would have struck me as strange as a. it works fine if I use thereport panel as target, b. I used the same methode to load other test web-pages. But it was worth a try.

Also once I resize it does get processed correctly incl the .css

===========================
I suspect some other silly user error. One other clue that may help: different order of events:
1. load main html
2. click on report tab (note: initially the report summary panel is light blue)
3. resize browser window (now report summary has a white background)
4. click on the tree to execute the javascript to load report.html

result it shows instantly.
brian.moeskau
9 Jun 2007, 10:28 PM
This thread was answered here: http://extjs.com/forum/showthread.php?p=38070