Page 6 of 6 FirstFirst ... 456
Results 51 to 51 of 51

Thread: detail grid example

  1. #51
    Ext User calverte's Avatar
    Join Date
    Apr 2008
    Location
    Washington DC
    Posts
    34

    Post

    You might also want to take a look at a coldfusion custom tag library like ColdExt which is based on the Ext JS Library.

    Update. Here is an example that should get you started:

    html/cfml code (i.e.grid2jsondata.cfm):

    <!--- Based on the ColdExt example of same --->

    PHP Code:
    <html>

    <
    head>
    <
    titleCustom Example Grids</title>

    <
    style type="text/css">
    html padding20pxborder:0margin:0; }
    html body padding20pxborder:0margin:0; }
    body h1 font-familyVerdanafont-size23pxpadding0.5em 0; }
    body h2 font-familyVerdanafont-size18pxpadding1em 0; }

    .
    ext-ie .x-tip {width100%;}
    </
    style>


    <
    link type="text/css" rel="stylesheet" href="../ext/css/ext-all.css" />

    <
    script type="text/javascript" src="../ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>

    <script type="text/javascript">
    Ext.onReady(function(){
        Ext.BLANK_IMAGE_URL = "../ext/images/default/s.gif";
        Ext.QuickTips.init();
        Ext.form.Field.prototype.msgTarget = "side";
    });
    </script>


    </head>

    <body>



    <div id="out"></div>


    <script type="text/javascript">
    Ext.onReady(function(){
        Ext.get("out").createChild({tag: "h1", html: "ColdExt Custom Example Grids"});
        Ext.get("out").createChild({tag: "h2", html: "JSON Grid with remote paging and sorting"});


    var myJSON = new Ext.data.JsonStore({
            autoLoad: true, remoteSort: true, url: "data2ora.cfm", root: "query.data", totalProperty: "totalcount", fields: [ 
    "id" 
    ,
    "country" 
    ,
    "capital" 
     ], baseParams: { 

                limit: "10"
     },
            dummy: true
        }); 

    var GRIDPANEL785 = new Ext.grid.GridPanel({
            height: 287, renderTo: "out", store: myJSON, stripeRows: true, title: "JSON Grid", width: 354, columns: [ 

            {
                dataIndex: "id", header: "ID", sortable: true, width: 40, 
                dummy: true
            } 
    ,

            {
                dataIndex: "country", header: "Country", sortable: true, width: 150, 
                dummy: true
            } 
    ,

            {
                dataIndex: "capital", header: "Capital", sortable: true, width: 160, 
                dummy: true
            } 
     ], bbar: 
    new Ext.PagingToolbar({
                displayInfo: true, pageSize: 10, store: myJSON, 
                dummy: true
            }) 


            dummy: true
        }); 


    });
    </script>



    </body>

    </html> 

    code for retrieving json data using cfml (i.e. data2.cfm):

    PHP Code:
    <cfsetting enablecfoutputonly="true" showdebugoutput="false">

    <!--- 
    cfparam all get and post variables --->
    <
    cfparam name="url.start" default="0">
    <
    cfparam name="url.limit" default="1000">
    <
    cfparam name="url.sort" default="country">
    <
    cfparam name="url.dir" default="ASC">

    <
    cfparam name="form.start" default="#url.start#">
    <
    cfparam name="form.limit" default="#url.limit#">
    <
    cfparam name="form.sort" default="#url.sort#">
    <
    cfparam name="form.dir" default="#url.dir#">

    <!--- 
    define query columns --->
    <
    cfset columns "id,country,capital,continent">

    <!--- 
    validate sort column and sort direction --->
    <
    cfif not ListFindNoCase(columnsform.sort)><cfset form.sort "country"></cfif>
    <
    cfif not ListFindNoCase("ASC,DESC"form.dir)><cfset form.dir "ASC"></cfif>


    <!--- 
    since this is a stand-alone exampledefine our static query data --->
    <
    cfset qCountries QueryNew(columns)>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","AU")>
    <
    cfset QuerySetCell(qCountries,"country","Australia")>
    <
    cfset QuerySetCell(qCountries,"capital","Canberra")>
    <
    cfset QuerySetCell(qCountries,"continent","Oceania")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","CA")>
    <
    cfset QuerySetCell(qCountries,"country","Canada")>
    <
    cfset QuerySetCell(qCountries,"capital","Ottawa")>
    <
    cfset QuerySetCell(qCountries,"continent","North America")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","DK")>
    <
    cfset QuerySetCell(qCountries,"country","Denmark")>
    <
    cfset QuerySetCell(qCountries,"capital","Copenhagen")>
    <
    cfset QuerySetCell(qCountries,"continent","Europe")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","FR")>
    <
    cfset QuerySetCell(qCountries,"country","France")>
    <
    cfset QuerySetCell(qCountries,"capital","Paris")>
    <
    cfset QuerySetCell(qCountries,"continent","Europe")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","IN")>
    <
    cfset QuerySetCell(qCountries,"country","India")>
    <
    cfset QuerySetCell(qCountries,"capital","New Delhi")>
    <
    cfset QuerySetCell(qCountries,"continent","Asia")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","IE")>
    <
    cfset QuerySetCell(qCountries,"country","Ireland")>
    <
    cfset QuerySetCell(qCountries,"capital","Dublin")>
    <
    cfset QuerySetCell(qCountries,"continent","Europe")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","IT")>
    <
    cfset QuerySetCell(qCountries,"country","Italy")>
    <
    cfset QuerySetCell(qCountries,"capital","Rome")>
    <
    cfset QuerySetCell(qCountries,"continent","Europe")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","KZ")>
    <
    cfset QuerySetCell(qCountries,"country","Kazakhstan")>
    <
    cfset QuerySetCell(qCountries,"capital","Astana")>
    <
    cfset QuerySetCell(qCountries,"continent","Asia")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","MX")>
    <
    cfset QuerySetCell(qCountries,"country","Mexico")>
    <
    cfset QuerySetCell(qCountries,"capital","Mexico City")>
    <
    cfset QuerySetCell(qCountries,"continent","North America")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","NL")>
    <
    cfset QuerySetCell(qCountries,"country","Netherlands")>
    <
    cfset QuerySetCell(qCountries,"capital","Amsterdam")>
    <
    cfset QuerySetCell(qCountries,"continent","Europe")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","NZ")>
    <
    cfset QuerySetCell(qCountries,"country","New Zealand")>
    <
    cfset QuerySetCell(qCountries,"capital","Wellington")>
    <
    cfset QuerySetCell(qCountries,"continent","Oceania")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","SE")>
    <
    cfset QuerySetCell(qCountries,"country","Sweden")>
    <
    cfset QuerySetCell(qCountries,"capital","Stockholm")>
    <
    cfset QuerySetCell(qCountries,"continent","Europe")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","CH")>
    <
    cfset QuerySetCell(qCountries,"country","Switzerland")>
    <
    cfset QuerySetCell(qCountries,"capital","Berne")>
    <
    cfset QuerySetCell(qCountries,"continent","Europe")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","TH")>
    <
    cfset QuerySetCell(qCountries,"country","Thailand")>
    <
    cfset QuerySetCell(qCountries,"capital","Bangkok")>
    <
    cfset QuerySetCell(qCountries,"continent","Asia")>
    <
    cfset QueryAddRow(qCountries)>
    <
    cfset QuerySetCell(qCountries,"id","US")>
    <
    cfset QuerySetCell(qCountries,"country","United States")>
    <
    cfset QuerySetCell(qCountries,"capital","Washington, D.C.")>
    <
    cfset QuerySetCell(qCountries,"continent","North America")>


    <!--- 
    simulate db server queryincluding sorting --->
    <
    cfquery name="qSorted" dbtype="query">
        
    SELECT *
        
    FROM qCountries
        ORDER BY 
    #form.sort# #form.dir#
    </cfquery>

    <!--- 
    since this is a stand-alone examplelet cf handle paging using cfoutput --->
    <
    cfset qResult QueryNew(columns)>
    <
    cfoutput query="qSorted" startrow="#form.start+1#" maxrows="#form.limit#">
    <
    cfset QueryAddRow(qResult)>
    <
    cfset QuerySetCell(qResult,"id","#qSorted.id#")>
    <
    cfset QuerySetCell(qResult,"country","#qSorted.country#")>
    <
    cfset QuerySetCell(qResult,"capital","#qSorted.capital#")>
    <
    cfset QuerySetCell(qResult,"continent","#qSorted.continent#")>
    </
    cfoutput>


    <!--- 
    put data and total row count into a struct we can use client side --->
    <
    cfset myResult StructNew()>
    <
    cfset myResult["totalcount"] = qCountries.recordCount>
    <
    cfset myResult["query"] = qResult>


    <!--- use 
    cfjson for serialization to stay cf7 compatible :) --->
    <
    cfobject name="json" component="cfc.json.json">

    <
    cfoutput>
    #json.encode(myResult,"array","lower")#
    </cfoutput>


    <
    cfsetting enablecfoutputonly="true"
    Alternative for data retrival via a CFC (i.e.: ../cfc/data2.cfc?method=getCountries):

    PHP Code:
    <cfcomponent output="no" displayname="Get countries test data">

        <!---    
           
    Created by:  Calvert Acklin
        Description
    Code for getting the country test data (CF 7 Compatible)
        
    Last Updated5/12/2008
        Last Updated by
    Calvert Acklin        
        
    --->


        <!--- 
    The init function creates the structure that will hold instances of our components --->
        <
    cffunction name="init">
            <
    cfset cachedComponents structNew()>
            <
    cfreturn this>
        </
    cffunction>
        
        
        <
    cffunction name="getCountries" access="remote" output="true">
            <
    cfset var qSorted "">

        <!--- 
    cfparam all get and post variables --->
        <
    cfparam name="url.start" default="0">
        <
    cfparam name="url.limit" default="1000">
        <
    cfparam name="url.sort" default="country">
        <
    cfparam name="url.dir" default="ASC">
        

        <
    cfparam name="form.start" default="#url.start#">
        <
    cfparam name="form.limit" default="#url.limit#">
        <
    cfparam name="form.sort" default="#url.sort#">
        <
    cfparam name="form.dir" default="#url.dir#">


        <!--- 
    define query columns --->
        <
    cfset columns "id,country,capital,continent">

        <!--- 
    validate sort column and sort direction --->
        <
    cfif not ListFindNoCase(columnsform.sort)><cfset form.sort "country"></cfif>
        <
    cfif not ListFindNoCase("ASC,DESC"form.dir)><cfset form.dir "ASC"></cfif>

        <!--- 
    since this is a stand-alone exampledefine our static query data --->
        <
    cfset qCountries QueryNew(columns)>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","AU")>
        <
    cfset QuerySetCell(qCountries,"country","Australia")>
        <
    cfset QuerySetCell(qCountries,"capital","Canberra")>
        <
    cfset QuerySetCell(qCountries,"continent","Oceania")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","CA")>
        <
    cfset QuerySetCell(qCountries,"country","Canada")>
        <
    cfset QuerySetCell(qCountries,"capital","Ottawa")>
        <
    cfset QuerySetCell(qCountries,"continent","North America")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","DK")>
        <
    cfset QuerySetCell(qCountries,"country","Denmark")>
        <
    cfset QuerySetCell(qCountries,"capital","Copenhagen")>
        <
    cfset QuerySetCell(qCountries,"continent","Europe")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","FR")>
        <
    cfset QuerySetCell(qCountries,"country","France")>
        <
    cfset QuerySetCell(qCountries,"capital","Paris")>
        <
    cfset QuerySetCell(qCountries,"continent","Europe")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","IN")>
        <
    cfset QuerySetCell(qCountries,"country","India")>
        <
    cfset QuerySetCell(qCountries,"capital","New Delhi")>
        <
    cfset QuerySetCell(qCountries,"continent","Asia")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","IE")>
        <
    cfset QuerySetCell(qCountries,"country","Ireland")>
        <
    cfset QuerySetCell(qCountries,"capital","Dublin")>
        <
    cfset QuerySetCell(qCountries,"continent","Europe")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","IT")>
        <
    cfset QuerySetCell(qCountries,"country","Italy")>
        <
    cfset QuerySetCell(qCountries,"capital","Rome")>
        <
    cfset QuerySetCell(qCountries,"continent","Europe")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","KZ")>
        <
    cfset QuerySetCell(qCountries,"country","Kazakhstan")>
        <
    cfset QuerySetCell(qCountries,"capital","Astana")>
        <
    cfset QuerySetCell(qCountries,"continent","Asia")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","MX")>
        <
    cfset QuerySetCell(qCountries,"country","Mexico")>
        <
    cfset QuerySetCell(qCountries,"capital","Mexico City")>
        <
    cfset QuerySetCell(qCountries,"continent","North America")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","NL")>
        <
    cfset QuerySetCell(qCountries,"country","Netherlands")>
        <
    cfset QuerySetCell(qCountries,"capital","Amsterdam")>
        <
    cfset QuerySetCell(qCountries,"continent","Europe")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","NZ")>
        <
    cfset QuerySetCell(qCountries,"country","New Zealand")>
        <
    cfset QuerySetCell(qCountries,"capital","Wellington")>
        <
    cfset QuerySetCell(qCountries,"continent","Oceania")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","SE")>
        <
    cfset QuerySetCell(qCountries,"country","Sweden")>
        <
    cfset QuerySetCell(qCountries,"capital","Stockholm")>
        <
    cfset QuerySetCell(qCountries,"continent","Europe")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","CH")>
        <
    cfset QuerySetCell(qCountries,"country","Switzerland")>
        <
    cfset QuerySetCell(qCountries,"capital","Berne")>
        <
    cfset QuerySetCell(qCountries,"continent","Europe")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","TH")>
        <
    cfset QuerySetCell(qCountries,"country","Thailand")>
        <
    cfset QuerySetCell(qCountries,"capital","Bangkok")>
        <
    cfset QuerySetCell(qCountries,"continent","Asia")>
        <
    cfset QueryAddRow(qCountries)>
        <
    cfset QuerySetCell(qCountries,"id","US")>
        <
    cfset QuerySetCell(qCountries,"country","United States")>
        <
    cfset QuerySetCell(qCountries,"capital","Washington, D.C.")>
        <
    cfset QuerySetCell(qCountries,"continent","North America")>

        <!--- 
    simulate db server queryincluding sorting --->
        <
    cfquery name="qSorted" dbtype="query">

            
    SELECT *
            
    FROM qCountries
            ORDER BY 
    #form.sort# #form.dir#

        
    </cfquery>    

        
        <!--- 
    since this is a stand-alone examplelet cf handle paging using cfoutput --->
        <
    cfset qResult QueryNew(columns)>
        <
    cfoutput query="qSorted" startrow="#form.start+1#" maxrows="#form.limit#">
            <
    cfset QueryAddRow(qResult)>
            <
    cfset QuerySetCell(qResult,"id","#qSorted.id#")>
            <
    cfset QuerySetCell(qResult,"country","#qSorted.country#")>
            <
    cfset QuerySetCell(qResult,"capital","#qSorted.capital#")>
            <
    cfset QuerySetCell(qResult,"continent","#qSorted.continent#")>
        </
    cfoutput>
        
        <!--- 
    put data and total row count into a struct we can use client side --->
        <
    cfset myResult StructNew()>
        <
    cfset myResult["totalcount"] = qCountries.recordCount>
        <
    cfset myResult["query"] = qResult>
        
        <!--- use 
    cfjson for serialization to stay cf7 compatible :) --->
        <
    cfobject name="json" component="cfc.json.json">
        
        <
    cfprocessingdirective suppresswhitespace="yes">
        <
    cfsetting showdebugoutput="no">
        <!--- 
    It is important to ensure you have no spaces between the cfcontent and cfoutput tags in order to return a clean json string. If you are outputting XML instead of json this is an imperitive! --->
        <!--- use 
    cfjson for serialization to stay cf7 compatible :) ---> 
            <
    CFCONTENT TYPE="text" RESET="Yes"><cfoutput>#json.encode(myResult,"array","lower")#</cfoutput>
        
    </cfprocessingdirective>
        
        
        </
    cffunction>


    </
    cfcomponent
    Please note that the CFC above has not been fully tested but should work.

    ~Calvert
    Last edited by calverte; 19 May 2008 at 9:20 AM. Reason: grammar

Page 6 of 6 FirstFirst ... 456

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
  •