Results 1 to 5 of 5

Thread: Please Help...Multiple grid on the same page

  1. #1

    Default Please Help...Multiple grid on the same page

    I have searched the forum and made the changes as suggested in many of the post. However, I still have problem of displaying data in multiple grids on the same page. Here is my code:
    grid.css
    Code:
    #xml-example{
    	border: 1px solid #cbc7b8;
    	left: 0;
    	position: relative;
    	top: 0;
    }
    #xml-example .ygrid-col-0 {
    }
    #xml-example .ygrid-col-1 {
    }
    #xml-example .ygrid-col-2{
    }
    #xml-example .ygrid-col-3 {
    }
    #xml-example .ygrid-col-4 {
    }
    #xml-example.ygrid-mso{
    	border: 1px solid #6593cf;
    }
    #xml-example.ygrid-vista{
    	border: 1px solid #b3bcc0;
    }
    #donotcontactdlg{
    	border: 1px solid #cbc7b8;
    	left: 0;
    	position: relative;
    	top: 0;
    }
    #donotcontactdlg .ygrid-col-0 {
    }
    #donotcontactdlg .ygrid-col-1 {
    	text-align: right;
    }
    #donotcontactdlg .ygrid-col-2{
    	text-align: right;
    }
    #donotcontactdlg .ygrid-col-3 {
    	text-align: right;
    }
    #donotcontactdlg .ygrid-col-4 {
    	text-align: right;
    }
    #donotcontactdlg.ygrid-mso{
    	border: 1px solid #6593cf;
    }
    #donotcontactdlg.ygrid-vista{
    	border: 1px solid #b3bcc0;
    }
    Here is my script for the first grid. The second grid is pretty much the same thing too

    Code:
    var donotcontact = {
        init : function(){
            var myteststring = [['yes'],['no'],['maybe']]
            var dataModel = myteststring;
            var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
            var myColumns = [
    			{header: "Options", width: 200, sortable: true, sortType: sort.asUCString}
    		];
    		var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);
    		// create the Grid
    		YAHOO.ext.grid.GridView.prototype.updateBodyHeight = function(){} 
            this.grid = new YAHOO.ext.grid.Grid('donotcontactdlg', dataModel, colModel);
            this.grid.render();
            this.grid.getSelectionModel().selectFirstRow();
        }    
    }
    here is the code for the html page
    Code:
    <button onclick="YAHOO.kn.container.formdonotcontactdlg.show();donotcontact.init();">Simple Dialog</button></P>
    
    
    <button onclick="YAHOO.kn.container.dlg2.show();loadcompany.init();">Advanced Dialog</button></p>
    
    	<div id="formdonotcontactdlg" >
    		<div class="hd">Please enter your information</div>
    		<div class="bd">
    		<div id="donotcontactdlg" class="ygrid-simple-view" style="width:300px;height:250px;overflow:hidden;position:relative;"></div>
    		</div>
    	</div>
    	<div id="dlg2">
    		<div class="hd">Please enter your information</div>
    		<div class="bd">
    		 	<div id="xml-example"  style="width:550px;height:200px;overflow:hidden;"></div>
    		</div>
    	</div>
    There are two buttons on the page which will be activate once the button is clicked. If I click on the first button, the data show and then when I click on the second button, the data will not show. If I refresh it again, and click on the second button, the data show but not the first grid. I suspected that there got to be something wrong with my css. Please help!

    Thanks

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

    Default

    What exactly is going wrong? Do you have the css columns defined for both grids?

  3. #3

    Default

    There are two grids with different number of columns. There are two button on a form which will open up the dialog box, inside this dialog box is the grid. The first time I click on the button, everything works fine. However, as soon as click on it the second time, the data of the first grid dissapear.

    I have the css for each column ...as shown in the previous post....but still have this problem.

    KN

  4. #4

    Default

    I debug the code and I found the following interesting thing:

    in my grid, I have several columns that are hidden using the following code:

    Code:
    colModel.setHidden(0, true);
    If I unhide the column, then all the data show in both grids display properly.

    Do I have to override any other code to make this work?

    KN

  5. #5
    Sencha User venki5star's Avatar
    Join Date
    Feb 2008
    Location
    Chennai, India
    Posts
    7

    Default Any solution yet?

    Hi,
    I am also having the same issue. Is there a solution to fix this? I am using ExtJS 4.0.7
    Venkatesh Mookkan
    My: Website | Yahoo Group | Blog Spot

Similar Threads

  1. Problem with column width with multiple grids on a page
    By SLerman in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 28 Feb 2007, 8:22 AM
  2. Column width problem when multiple grid on same page
    By Greeens in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 9 Feb 2007, 7:44 AM
  3. Multiple Grids on a Page, Column Adjust Problem?
    By rooster in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 8 Jan 2007, 1:42 PM
  4. Single or multiple page layout?
    By seldon in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 23 Dec 2006, 3:22 AM
  5. Multiple BasicDialog instances on same page
    By khnle in forum Ext 1.x: Help & Discussion
    Replies: 11
    Last Post: 8 Dec 2006, 11:38 PM

Posting Permissions

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