Page 3 of 6 FirstFirst 12345 ... LastLast
Results 21 to 30 of 51

Thread: detail grid example

  1. #21

    Default

    @jeffHowden
    LOL :lol: You just got me banging my head on my desk!!!!

    my fourth attempt at this had a similar structure but, as usual, was over complicated:


    Code:
    <cfinclude template="jsonencode.cfm">
    
    <cfquery datasource="midah" name="getMessages"> 
    SELECT * FROM messages_message
    ORDER BY ID
    </cfquery> 
    
    <cfoutput query="getMessages">
    
    <cfset thestruct = StructNew()>
    <cfset thestruct["totalCount"] = structnew()>
    <cfset thestruct["totalCount"] = "#getMessages.recordCount#">
    
    <cfset thestruct["topics"] = ArrayNew(1)>
    
    	
    	<cfloop from="1" to="#getMessages.recordCount#" index="counter">
    		
    			<cfset thestruct.topics[counter]["ID"] = structnew()>
    			<cfset thestruct.topics[counter]["ID"] = "#counter#">
    		
    			<cfset thestruct.topics[counter]["label"] = structnew()>
    			<cfset thestruct.topics[counter]["label"] = "#getMessages.label[counter]#">
    			
    			<cfset thestruct.topics[counter]["title"] = structnew()>
    			<cfset thestruct.topics[counter]["title"] = "#Replace(getMessages.title[counter], chr(13) & chr(10), " ","ALL")#">
    			
    			<cfset thestruct.topics[counter]["message"] = structnew()>
    			<cfset thestruct.topics[counter]["message"] = "#Replace(getMessages.message[counter], chr(13) & chr(10), " ","ALL")#">
    			
    			<cfset thestruct.topics[counter]["date_sent"] = structnew()>
    			<cfset thestruct.topics[counter]["date_sent"] = "#getMessages.date_sent[counter]#">
    		
    	</cfloop>
    	
    	
    	<cfset temp = jsonencode(thestruct)>
    	<cfcontent reset="yes">
    
    	#temp#
    </cfoutput>
    But we'll get there... eventualy!!!


    Thanks for the help! it really simplified things!!!

  2. #22
    Sencha User JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038

    Default

    Use the code I posted, it should work. The reason yours doesn't is because thestruct is being recreated every iteration of the cfoutput. BTW, since you're not actually outputting anything, there's no reason to use <cfoutput query="getmessages". Instead, use <cfloop query="getmessages"> as in my example.
    Jeff Howden
    Ext JS - Support Team Volunteer
    [email protected]

  3. #23

    Default

    :lol: GUESS WHAT ......... :lol:

    IT WORKED!!!

    here's the demo:
    http://www.nbsprinting.com/DATAGRIDS/Paging_Grid_Test

    but, there still is one problem...
    the paging feature doesnt work.

    BTW, Thanks again for all the help, couldn't have done it otherwise

  4. #24
    Sencha User JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038

    Default

    Are you returning all the rows in your JSON or just the ones from start to limit?

    If it's all the rows, which you probably are if you used my code exactly, then you'll need to change the <cfloop> to use startrow of #Val(form.start + 1)# and endrow of #Val(form.start + form.limit)# (off the top of my head).
    Jeff Howden
    Ext JS - Support Team Volunteer
    [email protected]

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

    Default

    Resizing doesn't quite work. You should resize the outer wrapper box, then manually make the "center" container div match that on resize, and then resize the grid to match that..

    The resizer needs to know the extra vertical padding that that nice x-box scheme adds round it's center "content" div so that it can synchronize the height of that center div to exactly fill the available space. Then resize the grid to match its container.

    With the code below, you only now need to set the width and height of the "main_top_grid" element. The code below should keep the content cell synchronized with it.

    Try this code...

    Code:
            var gridWrapper = Ext.get("main_top_grid");
            var gridContainer = Ext.get("message-grid");
    	var horizPadding = gridWrapper.child(".x-box-ml").getPadding("lr") +
    		this.container.getPadding("lr") +
    		gridWrapper.child(".x-box-mr").getPadding("lr");
    	var vertPadding = gridWrapper.child(".x-box-tc").getHeight() +
    		gridWrapper.child(".x-box-bc").getHeight();
            gridContainer.setHeight(gridWrapper.getHeight() - vertPadding);
    
            var grid = new Ext.grid.Grid(gridContainer, {
                ds: ds,
                cm: cm,
                selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
                enableColLock:true
            });
    
            var rz = new Ext.Resizable(this.gridWrap, {
                wrap:true,
                minHeight:100,
                pinned:true,
                handles: 'se'
            });
            rz.on("resize", function() {
                gridContainer.setHeight(gridWrapper.getHeight() - vertPadding);
                grid.autoSize;
    	});
    Then

    Code:
        <div style="width:890px;height:400px" class="x-box-blue" id="main_top_grid">
            <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
            <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
                <h3 style="margin-bottom:5px;">Messages Datagrid</h3>
                <div id="message-grid" style="border:1px solid #99bbe8;overflow: hidden"></div>
            </div></div></div>
            <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
        </div>
    YMMV :wink:

  6. #26

    Default

    hey animal,
    hey jeffHowden

    @animal: Thanks for the panel resize code! Though it only works in IE :o

    so far the paging element works, although not completly, but it work.
    the info display, shows false information (doesnt display the right amount of records)
    and for some odd reason the grid always starts at the last page.
    http://www.nbsprinting.com/DATAGRIDS/Paging_Grid_Test/
    so if you guys have any ideas....

    Thanks again for all the help guys!

  7. #27
    Sencha User JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038

    Default

    To start off with, your CFM file really needs to have that leading whitespace in the response trimmed out. You can fix this by wrapping the contents of your Application.cfm with a <cfsilent> block. Or, if you're outputting stuff in your Application.cfm (which you shouldn't be), then at least you can use the reset attribute of the <cfcontent> tag to reset any previous output so your JSON response is nice and concise.

    Second, it's not that the grid is starting at the last page, but rather it's starting at the second page (which just happens to be the total number of pages). This is because you've messed with the start value, sending in 1 (thinking that's the first page) when what you really want to do is send 0. This is why my block of code in a previous response incremented form.start by 1 prior to using it on the server.
    Jeff Howden
    Ext JS - Support Team Volunteer
    [email protected]

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

    Default

    Quote Originally Posted by dangerzone
    hey animal,
    hey jeffHowden

    @animal: Thanks for the panel resize code! Though it only works in IE :o
    Can you post up the page with that resize code in, so that we can see how it doesn't work. I lifted that code from my own resizable table code which worked, so it's probably just a small problem.

  9. #29

    Default

    whats up guys, man you guys work fast! cant keep up and im the one asking the questions!!! :lol:

    @ Animal, here's my js for the grid:

    Code:
    /*
     * Ext - JS Library 1.0 Alpha 3 - Rev 4
     * Copyright(c) 2006-2007, Jack Slocum.
     */
    
    
    
    Ext.onReady(function(){
    
    	 Ext.QuickTips.init();
    	 
                    // create the Data Store
                    var ds = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url: 'jsonDATA.cfm'}),
    
                   // create reader that reads the Topic records
                   reader: new Ext.data.JsonReader({
                               root: 'topics',
                               totalProperty: 'totalCount'
    	     },
    
               [		
       
                {name: 'id', mapping: 'id'},
                {name: 'message', mapping: 'message'},
                {name: 'sender', mapping: 'sender'},
                {name: 'label', mapping: 'label'},
                {name: 'date_sent', mapping: 'date_sent'}
                
                ]),
    
               remoteSort: false
               
               });
              
              ds.setDefaultSort('id', 'desc');
              	
    	
            function renderTitle(value){
                      return String.format('{0}', value);
              }
      
    
    
        // the data store
        var cm = new Ext.grid.ColumnModel([
            {
               header: "ID",
               dataIndex: 'id',
               width: 50
            },{
               header: "Message",
               dataIndex: 'message',
               width: 500
            },{
               header: "Message From",
               dataIndex: 'sender',
               width: 110
            },{
               header: "Date Sent",
               dataIndex: 'date_sent',
               width: 100
            },{
               header: "Label",
               dataIndex: 'label',
               width: 80
            }]);
    
        // by default columns are sortable
        cm.defaultSortable = true;
    
    
        // create the editor grid
        var grid = new Ext.grid.Grid('message-grid', {
            ds: ds,
            cm: cm,
            selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
            enableColLock:true
        });
    
        // make the grid resizable, do before render for better performance
        var rz = new Ext.Resizable('message-grid', {
            wrap:true,
            minHeight:100,
            pinned:true,
            handles: 'se'
        });
        rz.on('resize', grid.autoSize, grid);
    	
    
        // render it
        grid.render();
    
        var gridFoot = grid.getView().getFooterPanel(true);
    
        // add a paging toolbar to the grid's footer
        var paging = new Ext.PagingToolbar(gridFoot, ds, {
            pageSize: 15,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"
        });
        // add the detailed view button
        paging.add('-', {
            pressed: true,
            enableToggle:true,
            text: 'Detailed View',
            cls: 'x-btn-text-icon details',
            toggleHandler: toggleDetails
        });
    
        // trigger the data store load
        ds.load({params:{start:1, limit:15}});
    
        function toggleDetails(btn, pressed){
               var clicked = btn.renderer = pressed ? true : false;
    	if (! clicked){
    	 var x=document.getElementsByTagName("li");
    	        for(i=0;i<=x.length;i++){
    	                          var spanID = x[i].getAttribute('id');
    		           document.getElementById(spanID).style.display='none';
    	       }
                    }
    						
    	else{
    	       var x=document.getElementsByTagName("li");
    	            for(i=0;i<=x.length;i++){
    		    var spanID = x[i].getAttribute('id');
    		    document.getElementById(spanID).style.display='block';
    	                }
    					
    	       }	
    	grid.getView().refresh();
                  }
    });
    And the html:

    Code:
        <div style="width:894px;" class="x-box-blue" id="main_top_grid">
            <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
            <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
                <h3 style="margin-bottom:5px;">Ext - Help Forum</h3>
                <div id="message-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 865px; height: 300px;"></div>
            </div></div></div>
            <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
        </div>

    @jeffHowden

    I use my Application.cfm only to define the database and i also use <cfsilent> in my application file but it doesnt seem to remove the white spaces from the response, other then that the app file is pretty much empty.
    also about <cfcontent>, my provider disabled it as a security risk....? any ideas?

    and when i used the example from the previous post the return was:
    pages 2 of 1 instead of pages 2 of 2.

    Thank guys for all!

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

    Default

    Create your grid like this:

    Code:
        var gridWrapper = Ext.get("main_top_grid");
        var gridContainer = Ext.get("message-grid");
        var vertPadding = gridWrapper.child(".x-box-tc").getHeight() +
            gridWrapper.child(".x-box-bc").getHeight() + 
            gridWrapper.child("h3").getHeight();
        gridContainer.setHeight(gridWrapper.getHeight() - vertPadding);
    
        var grid = new Ext.grid.Grid(gridContainer, {
            ds: ds,
            cm: cm,
            selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
            enableColLock:true
        });
    
        var rz = new Ext.Resizable(this.gridWrap, {
            wrap:true,
            minHeight:100,
            pinned:true,
            handles: 'se'
        });
        rz.on("resize", function() {
            gridContainer.setHeight(gridWrapper.getHeight() - vertPadding);
            grid.autoSize;
        });
    Just size the main, outer box - the resize resizes the grid container to fit into the available space

    Code:
    <div style="width:890px;height:400px" class="x-box-blue" id="main_top_grid">
            <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
            <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
                <h3 style="margin-bottom:5px;">Messages Datagrid</h3>
                <div id="message-grid" style="border:1px solid #99bbe8;overflow: hidden"></div>
            </div></div></div>
            <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
        </div>
    Then put that page up somewhere we can run it and see what happens.

Page 3 of 6 FirstFirst 12345 ... LastLast

Similar Threads

  1. how to best handle updates from detail to the master table
    By sjivan in forum Community Discussion
    Replies: 2
    Last Post: 22 Dec 2008, 3:27 AM
  2. Detail link with id, from grid
    By brondsem in forum Community Discussion
    Replies: 4
    Last Post: 2 Apr 2007, 1:58 AM
  3. Expand Grid Lines to Detail More
    By domluc in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 27 Mar 2007, 11:03 AM
  4. sizing issues with master-detail center-south layout
    By sjivan in forum Community Discussion
    Replies: 14
    Last Post: 23 Dec 2006, 8:37 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
  •