PDA

View Full Version : ASP.Net button not fire



jesdial
17 Apr 2007, 1:02 AM
Hello all

I can't get an ASP.Net button fire onClick event...
Any suggestion?
You can see at:
www.my3dgis.com/gmapsexample

(excuse for the bad Google map key.. i'll change it along the day...)

Jes

hcervantes
17 Apr 2007, 9:20 AM
I am still having difficulty. I tried what the post said, to render the BorderLayout on the aspnetForm as opposed to document.body. It was still messing up, but now, I am getting this JavaScript error on ext-all.js:
Microsoft JScript runtime error: 'prototype' is null or not an object
Here is were it breaks (highligted part)



var F=function(){},scp,spp=sp.prototype


scp, spp and sp are undefined values. What did I break?

Here is my code, I removed all the asp.net controls:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="webmap2.aspx.cs" Inherits="WebMap" %>

<%@ Register Assembly="ESRI.ArcGIS.ADF.Web.UI.WebControls, Version=9.2.0.1324, Culture=neutral, PublicKeyToken=8fc3cc631e44ad86"
Namespace="ESRI.ArcGIS.ADF.Web.UI.WebControls" TagPrefix="esri" %>
<%@ Register Assembly="ESRI.ArcGIS.ADF.Tasks, Version=9.2.0.1324, Culture=neutral, PublicKeyToken=8fc3cc631e44ad86" Namespace="ESRI.ArcGIS.ADF.Tasks" TagPrefix="esriTasks" %>
<%@ Register Src="Measure.ascx" TagName="Measure" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>AdGeo WebMap</title>
<link rel='stylesheet' type='text/css' href='css/ext/css/ext-all.css' />
<link rel="stylesheet" type="text/asa" href="css/ext/css/grid_example.css" />
<link rel="stylesheet" type="text/css" href="css/ext/css/ytheme-aero.css" />
<link rel="stylesheet" type="text/css" href="css/ext/css/ytheme-aero.css" />


<!-- Libs -->
<script type='text/javascript' src='ext/yui-utilities.js' ></script>
<script type='text/javascript' src='ext/ext-yui-adapter.js' ></script>
<!-- End libs -->
<script type='text/javascript' src='ext/ext-all.js' defer="defer"></script>
<script type="text/javascript" src="ext/ext_grid_table.js" defer='defer' ></script>
<script type="text/javascript" src='ext/custom.js' defer='defer' ></script>
<!-- Rico Lib -->
<script src="JavaScript/rico.js" type="text/javascript"></script>

<style type="text/css">
#attributeGrid { border:1px solid #bbb;border-collapse:collapse; }
#attributeGrid td,#the-table th { border:1px solid #ccc;border-collapse:collapse;padding:5px; }
</style>

<style type='text/css'>
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
.x-layout-panel-north {
border:0px none;
}
#nav {
}
#autoTabs, #center1, #center2, #west {
padding:10px;
}
#north, #south{
font:normal 8pt arial, helvetica;
padding:4px;
}
.x-layout-panel-center p {
margin:5px;
}
#props-panel .x-grid-col-0{
}
#props-panel .x-grid-col-1{
}
</style>


</head>
<body >

<form id="form1" runat="server">
<div id="container" style="width:100%;height:100%;">

<%-- west panel --%>
<div id="west" class="x-layout-inactive-content" style="border:3">


</div>
<%-- results panel --%>
<div id="results" class="x-layout-inactive-content" style="border:3">


</div>
<%-- North --%>
<div id="north" class="x-layout-inactive-content" style="border:3">

</div>

<%-- East content --%>
<div id="east" class="x-layout-inactive-content" style="border:3">
</div>

<%-- Legend --%>
<div id="legend" class="x-layout-inactive-content" style="border:3">

this is legend
</div>
<%-- center layout--%>
<div id="innerCenter" >
</div>
<%-- Map Display --%>
<div id="center1" style="border:3; position: absolute; width: 100%; height:100%">
<div id="Map_Panel" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<div id="Map1"></div>
</div>
<div style="position:absolute; top:15px; right:20px; z-index:99;font-family:Arial; font-size:tiny; color:Gray">
Copyright AdGeo 2007
</div>
</div>
<%-- tool bar--%>
<div id="toolbar" style="position:absolute">

</div>
<%--horizontal toolbar--%>
<div id="h-toolbar" style="position:absolute">

</div>
<%-- south panel --%>
<div id="south" class="x-layout-inactive-content" style="border:3">

</div>
<div id="divAttributeDisplay">
<div id="divAttributeData" style="position: absolute; width: 400px; height: 150px">
</div>
</div>


</div>
</form>

</body>
</html>


custom.js


canvas = function(){
var layout;
return {
init : function(){
layout = new Ext.BorderLayout('form1' , {
hideOnLayout: true,
north: {
split:false,
initialSize: 109,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 200,
minSize: 100,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:false,
closeOnTab: true,
minSize: 300,
maxSize: 600
}
});

var innerCenter = new Ext.BorderLayout('innerCenter', {
north: {
split:false,
initialSize: 30,
titlebar: false
},
west: {
split:false,
initialSize: 30,
titlebar: false
},
center: {
split:false,
titlebar: false
}
});

layout.beginUpdate();
innerCenter.add('west', new Ext.ContentPanel('toolbar', 'Toolbar'));
innerCenter.add('north', new Ext.ContentPanel('h-toolbar', 'hToolbar'));
innerCenter.add('center', new Ext.ContentPanel('center1', 'Map'));
//innerCenter.add('center', new Ext.ContentPanel('divAttributeDisplay', {title: 'Attibutes', closable: false, fitToFrame:true}));
layout.add('center', new Ext.NestedLayoutPanel(innerCenter, "Map"));
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', new Ext.ContentPanel('south', {title: 'Information', closable: true, fitToFrame:true}));
layout.add('west', new Ext.ContentPanel('results', {title: 'Task Results', fitToFrame:true}));
layout.add('west', new Ext.ContentPanel('west', {title: 'Utilities', fitToFrame:true}));
layout.add('east', new Ext.ContentPanel('legend', {title: 'Legend', fitToFrame:true}));
layout.add('east', new Ext.ContentPanel('east', {title: 'Layer List', fitToFrame:true}));

// Show the default panels when two or more

layout.getRegion('west').showPanel('west');
innerCenter.getRegion('center').showPanel('center1');
layout.on("regioncollapsed", sizeMap);
layout.on("regionexpanded", sizeMap);
layout.on("regionresized", sizeMap);
layout.endUpdate();

}
};

}();

Ext.EventManager.onDocumentReady(canvas.init, canvas, false);

tryanDLS
17 Apr 2007, 9:50 AM
Are any of your .Net controls pulling down JS code that modifies the Object or Function prototypes?

What are you doing in ext_grid_table.js?

hcervantes
17 Apr 2007, 10:50 AM
I am using a nother company's (ESRI) controls that are using js. I am not sure if they are modifying the form.
The ext_grid_table.js is code I pulled from your grid example. Here it is:


/*
* Ext JS Library 1.0 Beta 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* [email protected]
*
* http://www.extjs.com/license
*/



/**
* @class Ext.grid.TableGrid
* @extends Ext.grid.Grid
* A Grid which creates itself from an existing HTML table element.
* @constructor
* @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
* The table MUST have some type of size defined for the grid to fill. The container will be
* automatically set to position relative if it isn't already.
* @param {Object} config A config object that sets properties on this grid and has two additional (optional)
* properties: fields and columns which allow for customizing data fields and columns for this grid.
* @history
* 2007-03-01 Original version by Nige "Animal" White
* 2007-03-10 jvs Slightly refactored to reuse existing classes
*/
Ext.grid.TableGrid = function(table, config) {
config = config || {};
var cf = config.fields || [], ch = config.columns || [];
table = Ext.get(table);

var ct = table.insertSibling();

var fields = [], cols = [];
var headers = table.query("thead th");
for (var i = 0, h; h = headers[i]; i++) {
var text = h.innerHTML;
var name = 'tcol-'+i;

fields.push(Ext.applyIf(cf[i] || {}, {
name: name,
mapping: 'td:nth('+(i+1)+')/@innerHTML'
}));

cols.push(Ext.applyIf(ch[i] || {}, {
'header': text,
'dataIndex': name,
'width': h.offsetWidth,
'tooltip': h.title,
'sortable': true
}));
}

var ds = new Ext.data.Store({
reader: new Ext.data.XmlReader({
record:'tbody tr'
}, fields)
});

ds.loadData(table.dom);

var cm = new Ext.grid.ColumnModel(cols);

if(config.width || config.height){
ct.setSize(config.width || 'auto', config.height || 'auto');
}
if(config.remove !== false){
table.remove();
}

Ext.grid.TableGrid.superclass.constructor.call(this, ct,
Ext.applyIf(config, {
'ds': ds,
'cm': cm,
'sm': new Ext.grid.RowSelectionModel(),
autoHeight:true,
autoWidth:true
}
));
};

Ext.extend(Ext.grid.TableGrid, Ext.grid.Grid);


If I don't include this JS file, it works, but still with wierd behavior. When I use the

layout = new Ext.BorderLayout('form1' , {
hideOnLayout: true,
north: {
nothing displays, but if I use


layout = new Ext.BorderLayout(document.body , {
hideOnLayout: true,
north: {

It shows up fine. However, I am not doing any postbacks on this example, I plan on doing a ton of call backs, so I need to use 'form1' instead of body.document, according to the other thread.

tryanDLS
17 Apr 2007, 11:16 AM
If you're not putting the layout in document.body, the container needs be absolutely positioned or have position:relative. Not sure if you want to try that directly on the form, or put the form into a div.

hcervantes
17 Apr 2007, 11:53 AM
I did put the position:absolute on the form, and it is now displaying it fine in IE. However, when I resize a panel it messes up the layout completely. I will now try adding form into a div.

hcervantes
17 Apr 2007, 12:02 PM
I put a div around the form and it has exactly the same affect. I'm lost. I have no idea how to make it work.

hcervantes
18 Apr 2007, 5:42 AM
This was supposed to follow here:
http://extjs.com/forum/showthread.php?t=4778
Don't know how it happened.