Hybrid View

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    18
    Vote Rating
    0
    khanh3m is on a distinguished road

      0  

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

    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
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    18
    Vote Rating
    0
    khanh3m is on a distinguished road

      0  

    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
    Ext User
    Join Date
    Mar 2007
    Posts
    18
    Vote Rating
    0
    khanh3m is on a distinguished road

      0  

    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
    Vote Rating
    0
    venki5star is on a distinguished road

      0  

    Default Any solution yet?

    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

Thread Participants: 2