Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Prolem with hidden columns

  1. #1

    Default Prolem with hidden columns

    I had post a message about the GridEditor.
    Because the url kept changing I have created a static html page
    which demonstrates the problem.

    I think the problem is related to hidden columns in both cases.
    The url of the file is:
    http://mathind.csd.auth.gr/test_case.tgz(128K)
    Please extract the file (It will create a directory named test_case) and open the file
    test.html

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    Before I do all that, what is the problem?

  3. #3

    Default

    The problem is that in the first column 4 columns are displayed one over the other
    and the last for columns display nothing under the header

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    Do a search for "multiple grids".. I think that is your problem.

  5. #5

    Default

    In the example there is only one grid.

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    You will need to create rules as in the "multiple grids" post. If you look in grid.css there are 20 placeholder rules that are used by default if you don't define any rules for the columns in your grid. Your grid has 26 columns, so the extra 6 columns have no rules to use. Open grid.css you will see what I am talking about and there is a blob in there explaining it.

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    The Grid is so super-useful, that I think the "multiple grids" question will become a FAQ.

    Jack, I suggest a "sticky" thread containing the following suggestion (Unless you want to add the CSSStyleSheet object to yui-ext!).

    Use the CSSStyleSheet object to create container-specific style rules for each grid:

    Code:
    //		Create stylesheet rules for this specific grid.
    		this.stylesheet = new CSSStyleSheet();
    		for (var i = 0; i < this.columnModel.getColumnCount(); i++)
    		{
    			this.stylesheet.addRule("#" + this.container.id + " .ygrid-col-" + i, "");
    		}
    
    //		Make sure the yui-ext sees the new rules
    		YAHOO.ext.util.CSS.getRules(true);

    Where this is the CSSStyleSheet object:

    Code:
    /**
    	An object which encapsulates a dynamically created, modifiable stylesheet.
    */
    function CSSStyleSheet()
    {
    /**
     *	The array of rules for this stylesheet.
     *	@private
    */
    	this.rules = [];
    
    /**
     *	An associative array, keyed by the selector text containing the rule index number for
     *	the rule for that selector text.
     *	@private
    */
    	this.ruleIndex = [];
    
    	if (document.createStyleSheet)
    	{
    		this.sheet = document.createStyleSheet();
    	}
    	else
    	{
    		this.styleElement = document.createElement("style");
    		document.getElementsByTagName("head")[0].appendChild(this.styleElement);
    		this.sheet = this.styleElement.styleSheet ? this.styleElement.styleSheet : this.styleElement.sheet;
    	}
    }
    
    /**
    	Create a style rule in the stylesheet.
    	@param selectorText The CSS selector text.
    	@param ruleText The style specification with or without braces.
    */
    CSSStyleSheet.prototype.addRule = function(selectorText, ruleText)
    {
    	var result;
    
    //	Opera, and other browsers with no DOM stylesheet support
    	if (!this.sheet)
    	{
    //		Remove braces.
    		ruleText = ruleText.replace(/^\{?([^\}])/, "$1");
    
    //		If it exists, modify it.
    		if (!this.ruleIndex[selectorText])
    			this.ruleIndex[selectorText] = this.rules.length;
    		this.rules[this.ruleIndex[selectorText]] = ruleText;
    
    //		Build the innerHTML of the style element from our rules.
    		var cssText = "";
    		for (var sel in this.ruleIndex)
    			cssText = sel + " {" + this.rules[this.ruleIndex[sel]] + "}";
    		this.styleElement.innerHTML = cssText;
    	}
    
    //	DOM standard. Result object contains looks like {cssText:selectorText + " " + ruleText}
    //	cssText property is readonly. deleteRule(ruleIndex} must be used to remove.
    	else if (this.sheet.insertRule)
    	{
    //		insertRule() requires braces
    		if (!/^\{[^\}]*\}$/.test(ruleText))
    			ruleText = "{" + ruleText + "}";
    
    		var r = this.sheet.cssRules.length;
    		this.sheet.insertRule(selectorText + " " + ruleText, r);
    		result = this.sheet.cssRules[r];
    		this.ruleIndex[selectorText] = r;
    
    		if (this.rules.length == 0)
    			this.rules = this.sheet.cssRules;
    	}
    
    //	IE.
    //	Each rule object has a style property which contains the style attributes.
    	else if (this.sheet.addRule)
    	{
    //		addRule() requires no braces
    		ruleText = ruleText.replace(/^\{?([^\}])/, "$1");
    		var r = this.sheet.rules.length;
    		if (ruleText.length == 0)
    			ruleText = " "
    		this.sheet.addRule(selectorText, ruleText);
    		result = this.sheet.rules[r];
    		this.ruleIndex[selectorText] = r;
    
    		if (this.rules.length == 0)
    			this.rules = this.sheet.rules;
    	}
    	else
    	{
    		alert("Cannot create rule");
    	}
    	return result;
    };
    
    /**
     *	Change a style property in a rule.
     *	@param selectorText The identifier of the rule to change
     *	@param property The name of the style property to change
     *	@param value The new value of the style property.
     */
    CSSStyleSheet.prototype.changeRule = function(selectorText, property, value)
    {
    	var index = this.ruleIndex[selectorText];
    
    //	If the rule is not present, create it.
    	if (typeof index == "undefined")
    	{
    		this.addRule(selectorText, property + ":" + value);
    	}
    
    //	Opera, and other browsers with no DOM stylesheet support
    	if (!this.sheet)
    	{
    		var cssText = this.rules[index];
    		if (cssText)
    		{
    			var propSearch = new RegExp("^(.*" + property + "\\s*\:\\s*)([^;]*)(.*)$");
    			var ruleText = propSearch.exec(cssText);
    //			If the value was in the old rule...
    			if (ruleText)
    			{
    //				And it was different...
    				if (ruleText[4] != value)
    				{
    					this.rules[index] = ruleText[1] + value + ruleText[3];
    				}
    			}
    			else
    			{
    				this.rules[index] = cssText + "; " + property + ": " + value + ";";
    			}
    
    //			Rebuild the innerHTML of the style element from our rules.
    			cssText = "";
    			for (var sel in this.ruleIndex)
    				cssText = sel + " {" + this.rules[this.ruleIndex[sel]] + "}";
    			this.styleElement.innerHTML = cssText;
    		}
    
    		var cssText = "";
    		var cssText = "";
    		for (var sel in this.ruleIndex)
    			cssText = sel + " {" + this.rules[this.ruleIndex[sel]] + "}";
    	}
    
    //	IE. Easy
    	else if (this.sheet.addRule)
    	{
    		var style = this.rules[index].style;
    		property = property.replace(/-([a-z])/gi, function(m0, m1) {return m1.toUpperCase();});
    		style[property] = value;
    	}
    
    //	DOM standard. We must parse the rule, delete, and create a new one.
    	else if (this.sheet.insertRule)
    	{
    		var oldRule = this.rules[index];
    		if (oldRule)
    		{
    			var cssText = oldRule.cssText;
    			var propSearch = new RegExp("^[^\\{]*(\\{.*" + property + "\\s*\\:\\s*)([^};]*)([^}]*})");
    			var ruleText = propSearch.exec(cssText);
    
    //			If the value was in the old rule...
    			if (ruleText)
    			{
    //				And it was different...
    				if (ruleText[4] != value)
    				{
    					cssText = ruleText[1] + value + ruleText[3];
    					this.sheet.deleteRule(index);
    					this.sheet.insertRule(selectorText + " " + cssText, index);
    				}
    			}
    			else
    			{
    				var propSearch = new RegExp("\\{([^}]*)}");
    				ruleText = propSearch.exec(cssText);
    				cssText = "{ " + ruleText[1] + "; " + property + ": " + value + " }";
    				this.sheet.deleteRule(index);
    				this.sheet.insertRule(selectorText + " " + cssText, index);
    			}
    		}
    	}
    };
    
    CSSStyleSheet.prototype.getRuleProperty = function(selectorText, property)
    {
    	var index = this.ruleIndex[selectorText];
    
    //	If the rule is not present, create it.
    	if (typeof index == "undefined")
    	{
    		return;
    	}
    
    //	Opera, and other browsers with no DOM stylesheet support
    	if (!this.sheet)
    	{
    		var cssText = this.rules[index];
    		if (cssText)
    		{
    			var propSearch = new RegExp("^.*" + property + "\s*\:\s*([^;]*)");
    			var ruleText = propSearch.exec(cssText);
    
    //			If the value was in the old rule...
    			if (ruleText)
    			{
    				return ruleText[1];
    			}
    		}
    	}
    
    //	IE. Easy
    	else if (this.sheet.addRule)
    	{
    		var style = this.rules[index].style;
    		property = property.replace(/-([a-z])/gi, function(m0, m1) {return m1.toUpperCase();});
    		return style[property];
    	}
    
    //	DOM: We must parse the rule cssText.
    	else if (this.sheet.insertRule)
    	{
    		var oldRule = this.rules[index];
    		if (oldRule)
    		{
    			cssText = oldRule.cssText;
    			var propSearch = new RegExp("^.*" + property + "\\s*\\:\\s*([^};]*)");
    			var ruleText = propSearch.exec(cssText);
    
    //			If the value was in the old rule...
    			if (ruleText)
    			{
    				return ruleText[1];
    			}
    		}
    	}
    };

  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    Can you do me a favor Animal and give me another link where you are using the CSSStylesheet class and I will surf there in Safari and give it a look. If it works it would be a great addition.

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Go to http://80.177.128.44:8080/aspicio/fo...untrySubEntity

    log in as nigelw, password p

    Then go to http://80.177.128.44:8080/aspicio/TestLayout.html

    The Search button is in the Layout's titlebar - a little binocular icon.

    To get more ListManagers, just click on the page title div, and you can create as many ListManagers with Grids in as you want.

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    I'm not sure if this is new, but the ListManager in the full screen...

    if you pull the bottom edge of the browser upwards to shrink the window, the Layout doesn't resize correctly, and you get scrollbars.

    I'm sure that was working... :?:

Page 1 of 2 12 LastLast

Similar Threads

  1. Hidden Column Headers
    By willpage in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 16 Jan 2007, 3:05 PM
  2. Problem with hidden column in grid
    By manugoel2003 in forum Ext 1.x: Bugs
    Replies: 7
    Last Post: 21 Dec 2006, 8:50 AM
  3. layout() of BorderLayout on hidden tab
    By Animal in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 4 Dec 2006, 4:01 AM
  4. Replies: 8
    Last Post: 31 Oct 2006, 6:57 PM
  5. EditGrid hidden column
    By anakreon in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 25 Oct 2006, 2:05 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •