1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default I must be missing something.

    I must be missing something.


    My JSP outputs the following code to the browser:

    Code:
    <?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><link rel="stylesheet" href="/aspicio/Aspicio.css"><script type="text/javascript" src="/aspicio/js/yahoo.js" ></script><script type="text/javascript" src="/aspicio/js/event.js"></script><script type="text/javascript" src="/aspicio/js/dom.js"></script><script type="text/javascript" src="/aspicio/js/logger.js"></script><script type="text/javascript" src="/aspicio/js/connection.js"></script><script type="text/javascript" src="/aspicio/js/animation.js"></script><script type="text/javascript" src="/aspicio/js/dragdrop.js"></script><script type="text/javascript" src="/aspicio/js/treeview.js"></script><script type="text/javascript" src="/aspicio/js/container.js"></script><script type="text/javascript" src="/aspicio/js/menu.js"></script><script type="text/javascript" src="/aspicio/js/YahooExtensions.js"></script><script type="text/javascript" src="/aspicio/js/fcl.js"></script><title>Area Maintenance</title></head><body ><body><div id="message">
    
    </div><div id="menu">
    
    <script type="text/javascript" src="/aspicio/js/fclmenu.js"></script><div class="MenuBar " ><span class="MenuButton" onmouseover="buttonMouseover(this, 'Menu24676841');" onclick="return buttonClick(this, 'Menu24676841');">Static Data</span><span class="MenuButton" onmouseover="buttonMouseover(this, 'Menu1375978');" onclick="return buttonClick(this, 'Menu1375978');">Application Data</span></div><div  id="Menu24676841"  class="Menu " >Area/Postal/Zip CodesClass ControlCompaniesHouse ComponentsContactsContactTypesCountriesCountry sub-entitiesCurrencies<span  class="MenuItem "  onclick="clearActiveButton();0"  >DateInfo</span>Economic GroupsLanguagesMarketsMain Menu GroupingsSupply-Chain PlayersPlayer TypesTimeZonesUsersUser Groups</div><div  id="Menu1375978"  class="Menu " >Tax No ValidationsApplication ClassesApplication Components</div></div><div id="titleBar">Area Maintenance</div><div id="content">
    
    <script type='text/javascript' src='/aspicio/dwr/engine.js'></script>
    <script type='text/javascript' src='/aspicio/dwr/util.js'></script>
    <script type="text/javascript" src="/aspicio/dwr/interface/RemoteEntityLister.js"></script>
    <script type="text/javascript" src="/aspicio/js/dom.js"></script>
    <script type="text/javascript" src="/aspicio/js/YahooExtensions.js"></script>
    <script type="text/javascript" src="/aspicio/js/yui-ext.js"></script>
    <script type="text/javascript" src="/aspicio/js/AspicioGridDataModel.js"></script>
    <script type="text/javascript" src="/aspicio/dwr/util.js"></script>
    <script type="text/javascript">
    DWREngine.setTextHtmlHandler(function()
    {
    	alert("DWR call rejected by server.\nSession timed out. Reloading page");
    	top.location.href.reload(true);
    });
    
    var AreaTabset = null;
    var AreaListTab = null;
    var AreaFormTab = null;
    var AreaListerId = null;
    var AreaDataModel = null;
    var AreaGrid = null;
    
    function bodyOnLoad()
    {
    	AreaTabset = new YAHOO.ext.TabPanel("MaintenanceTabset");
    	AreaFormTab = AreaTabset.addTab("AreaFormTab", "Area");
    	AreaListTab = AreaTabset.addTab("AreaListTab", "Area List");
    	editArea(0);
    }
    
    function editArea(row)
    {
    	AreaFormTab.getUpdateManager().update("/aspicio/editUser.do?type=Area&id=" + row);
    	AreaFormTab.activate();
    }
    
    function loadAreaListTab(form)
    {
    //	Use YAHOO's Connection to collect all form values (Except uuid and version) into a string.
    	form.uuid.disabled = true;
    	form.uuid.version = true;
    	YAHOO.util.Connect.setForm(form);
    	form.uuid.disabled = false;
    	form.uuid.version = false;
    
    //	Switch to the list tab
    	AreaListTab.activate();
    
    	var paramString = YAHOO.util.Connect._sFormData;
    	YAHOO.widget.Logger.log("Submitting criteria: '" + paramString + "'");
    	RemoteEntityLister.createEntityLister(paramString, createAreaGrid);
    }
    
    function createAreaGrid(id)
    {
    	AreaListTab.bodyEl.setStyle("width", AreaListTab.bodyEl.getWidth() + "px");
    	AreaListerId = id;
    	AreaDataModel = new YAHOO.ext.grid.AspicioDataModel(AreaListerId);
    	AreaGrid = new YAHOO.ext.grid.Grid("AreaListTab", AreaDataModel, AreaDataModel);
    	AreaGrid.autoSizeColumns = true;
    	AreaGrid.minColumnWidth = 50;
    	AreaGrid.render();
    }
    
    </script>
    <body onload="bodyOnLoad()">
    	<div id="MaintenanceTabset" style="height:550px">
    		<div id="AreaFormTab" class="tab-content"></div>
    		<div id="AreaListTab" class="tab-content" style="height:500px">
    		</div>
    	</div>
    </body>
    </div></body></html>
    This displays:



    There are no header boundaries.

    The columns are autosized too wide.

    Double clicking on the header when the cursor changes to resize (It does think there are column header boundaries) shrinks column size to about 5px.

    Resizing a column header does not resize the data columns.

    The header does not scroll left/right when the data table is scrolled left/right.

    I know this stuff works in the examples, so it must be something I'm doing wrong, hence posting in "Help".

    Also, the tabs are not displaying right. There's a line under the tab labels seperatring them from the body - the active tabpanel doesn't "flow" into the label.

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    The column splitters are done with one of the images in the resources directory in the download. By default grid.css points to ../images/grid/ for all images.

    Do me a favor and remove this line:

    <?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    And see if that fixes the problems. I haven't tested any of this in XHTML strict, so that's the first thing I noticed.

    If that isn't an option, or it doesn't fix it, can you put up a page anywhere that I can take a look and try to debug?

    Thanks,

    Jack

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I've figured a lot of it out.

    My ColumnModel has to accept the setColumnWidth() calls from the auto-measuring, and then fire the column width changed event.

    I've fixed the image locations in my CSS.

    The only thing tat doesn't look that good now is the tabs in the tabpanel. There's a line under the tabs.*

    *I don't know what the terminology is, the little sticky up things with the title in, they are the "tab"s right?

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Yes. The CSS for the tabs comes from the YUI patterns library. It's possible they won't work with XHTML strict. I don't know. You may need to tweak the CSS.

    The way it keeps that line from appearing is by using margin-bottom: -1px. It's possible that margin-bottom: -1px is not vaid in strict mode but I'm just guessing.

Similar Threads

  1. Possible bug - Horizontal scroll bar missing on IE 6.0
    By adb8640 in forum Ext 1.x: Bugs
    Replies: 0
    Last Post: 27 Mar 2007, 3:06 PM
  2. missing images in documentaion
    By snod0g in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 22 Mar 2007, 9:31 AM
  3. getChildrenByClassName missing in Ext 1.0?
    By Nullity in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 7 Mar 2007, 12:24 PM
  4. Missing parameter in HttpProxy
    By tolstoj in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 3 Mar 2007, 1:25 AM
  5. json.php missing in yui-ext 0.33
    By eddyyanto in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 23 Dec 2006, 8:41 AM

Thread Participants: 1