Page 2 of 6 FirstFirst 1234 ... LastLast
Results 11 to 20 of 51

Thread: detail grid example

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

    Default

    The object which represents the rows of the Grid (your "topics" element) needs to be an Array:

    Code:
    {"topics": [
    {"message":"CALL TRACY (514)344-1515 EXT.241","title":"MESSAGE","ID":106,"date_sent":"03/14/2007","label":"normal"},
    {"message":"CALL JIM (514)344-98739 EXT.763","title":"MESSAGE","ID":107,"date_sent":"03/14/2007","label":"medium"},
    {"message":"CALL BILL (514)344-2663 EXT.53","title":"MESSAGE","ID":108,"date_sent":"03/14/2007","label":"urgentl"},
    ], "totalCount":37}
    Apart from that, it looks good, you will be able to pull that into a Grid in just a few lines if you follow the code in the Grid examples.

  2. #12

    Default

    Thanks animal
    So far so good!!.

    so far my cfscript looks like this:
    Code:
    <cfinclude template="json.cfc" /> 
    
    <cfquery datasource="midah" name="getMessages"> 
    SELECT * FROM messages_message
    ORDER BY ID
    </cfquery> 
    
    <cfoutput>
       <cfscript> 
    
    counter = #getMessages.currentRow#;
    	
        thestruct = StructNew(); 
        thestruct["totalCount"] = structnew(); 
        thestruct["totalCount"] = "#getMessages.recordCount#"; 
        thestruct["topics"] = ArrayNew(1);
    
    	
    			thestruct.topics[counter]["ID"] = structnew();
    			thestruct.topics[counter]["ID"] = "#getMessages.ID#"; 
    			
    			thestruct.topics[counter]["label"] = structnew();
    			thestruct.topics[counter]["label"] = "#getMessages.label#";
    		
    		  
    			thestruct.topics[counter]["title"] = structnew();
    			thestruct.topics[counter]["title"] = "#Replace(getMessages.title, chr(13) & chr(10), " ","ALL")#"; 
    			
    			
    			thestruct.topics[counter]["message"] = structnew();
    			thestruct.topics[counter]["message"] = "#Replace(getMessages.message, chr(13) & chr(10), " ","ALL")#"; 
    			
    			thestruct.topics[counter]["date_sent"] = structnew();
    			thestruct.topics[counter]["date_sent"] = "#getMessages.date_sent#"; 	
    			
    					
    
       </cfscript> 
    </cfoutput> 
    
    
    <cfinvoke component="JSON" method="encode" data="#thestruct#" returnvariable="result" /> 
    <cfcontent reset="yes"> 
    <cfoutput>#result#</cfoutput>
    and the result is:
    Code:
    {"topics":[{"message":"CALL TRACY EXT.241 (514)344-1515","title":"","ID":55,"date_sent":"03/12/2007","label":"urgent"}],"totalCount":37}
    now i just have one last issue..
    I cant seem to get the script to loop through all the records and add the to the structure. i tried to loop the query, i tried to add a counter, nothing works..

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

    Default

    @dangerzone

    You're way over-complicating things. Just duplicate the query into your struct key for the data.

    Code:
    <cfinclude template="json.cfc" /> 
    
    <cfquery datasource="midah" name="getMessages"> 
    SELECT * FROM messages_message 
    ORDER BY ID 
    </cfquery> 
    
    <cfscript> 
      temp = StructNew();
      temp.totalCount = getmessages.recordcount;
      temp.data = Duplicate(getmessages);
    </cfscript> 
    
    <cfinvoke component="JSON" method="encode" data="#temp#" returnvariable="result" /> 
    <cfcontent reset="yes"> 
    <cfoutput>#result#</cfoutput>
    If the CFC doesn't encode the JSON in the proper format, then it's "broken" and should either be fixed to correctly output the data or you should switch to the JSONEncode() function availabe from http://cflib.org/.
    Jeff Howden
    Ext JS - Support Team Volunteer
    [email protected]

  4. #14

    Default

    WOW hock: ==> So much simpler Thanks JeffHowden.

    ok so now i get this:
    Code:
    {"totalcount":37,"data":{"RECORDCOUNT":37,"COLUMNLIST":"DATE_SENT,ID,MESSAGE,TITLE",
    "DATA":{"DATE_SENT":["03/12/2007","03/12/2007","03/12/2007","03/12/2007","03/12/2007","03/12/2007","03/12/2007",
    "03/12/2007","03/12/2007","03/12/2007","03/12/2007","03/12/2007","03/12/2007","03/12/2007","03/12/2007","03/12/2007","03/12/2007",
    "03/12/2007","03/13/2007","03/13/2007","03/13/2007","03/13/2007","03/13/2007",
    "03/13/2007","03/13/2007","03/13/2007","03/13/2007","03/13/2007","03/13/2007","03/13/2007","03/13/2007","03/13/2007","03/13/2007"
    ,"03/14/2007","03/14/2007","03/14/2007","03/14/2007"],
    "ID":[55,56,57,58,59,60,63,64,65,66,67,68,69,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106],
    "MESSAGE":["hey avi turn on your cell i\'m trying to call you!!!!\r\ni just remembered something i want to tell you","annie=athletic works=woven=2500=wants price","hershey=2x6 clr=350 pieces=cell 237-0608","SAMANTHA FROM THE BARGAIN SHOP CALLED REGARDING YOUR EMAIL","golden brand\r\npo #15239\r\n100,000 1\" swiftach=assunta=deliver 9th flr, attention ira","Sam... I did NOT call this person.\r\n\r\nRobyn from Domain called for 25,000 kids choice tickets. Do you want to sell to them? at how much?","Sam... I did NOT call this person.\r\n\r\nRobyn from Domain called for 25,000 kids choice tickets. Do you want to sell to them? at how much?","MESSIBA??????????","PLEASE CALL SAKO FROM PINPOINT\r\n(514)383-6710","PLEASE CALL SAKO FROM PINPOINT\r\n(514)383-6710","PLEASE CALL SAKO FROM PINPOINT\r\n(514)383-6710","Chan you can print now just restart the program!","100,000\r\n3/4\" DIAMITER CLEAR\r\nTINTEED DARK BLACK\r\n$6.95/1000","1.5 x 1\r\nnylon label\r\nprinted 2 sides\r\n2500 pieces\r\n\r\nneeds to resell\r\n\r\nI told $25.00 for setup","leslie singerman=514-573-7922\t\t\r\n\r\n2 woven labelsl I left with you.","Chaya - my sister - needs a price for her 1.25\" x 1\" iron on labels?","CALL EARL AT LANALEE","(514)270-4006\r\nALEX WINTER\r\nSUMPREME LITHO","PLEASE SEND 137069 TO TOTAL KIDS BY EMAIL","PLEASE SEND 137069 TO TOTAL KIDS BY EMAIL","PRINTER","i cant work on it right away cause abie doesnt really want mo to, but i will have it fixed soon","TTHANK YOU","no problem","DON FROM HUBSHIER CALLED\r\n(514)244-2687\r\nPLEASE CALL HIM ASAP","BRURIA FROM GODINGER CALLED\r\n(514)276-9950","hey call me please i got you an app with the dentist!!!","when?","it shouldn\'t log you out anymore until tomorow","mrs. whice calles 514-341-7053\r\nfrom Quality shopping","CALL PHIL BACK PLEASE","dfghdfghdfg","dfghdfghdfg","test","CALL MARIO ON HIS CELL","CHAN CALL MARK FISHMAN RE CHEQUE THAT WENT TO THE WRONG ADDRESS","CALL TRACY (514)344-1515 EXT.241"],"TITLE":["","m hadad","twin","THE BARGAIN SHOP","ORDER","Domain","Domain","","MESSAGE","MESSAGE","MESSAGE","Print function enabled","PHIL","Mr. Winter","","","MESSAGE","MESSAGE","INVOICE","INVOICE","","working of it","","no problem","meassage","MESSAGE","","","","message","MESSAGE","dfgh","dfgh","test","MEASSAGE","MESSAGE","MESSAGE"]}}}
    although now all the messages are in an array, all the id's are in an array etc...

    thanks again JeffHowden

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

    Default

    Getting there. I can't help you with PHP syntax, but you have to have each row as a seperate element in an array eg:

    Code:
    {
        "totalCount":3,
        "topics": [
            {"message":"CALL TRACY (514)344-1515 EXT.241","title":"MESSAGE","ID":106,"date_sent":"03/14/2007","label":"normal"},
            {"message":"CALL JIM (514)344-98739 EXT.763","title":"MESSAGE","ID":107,"date_sent":"03/14/2007","label":"medium"},
            {"message":"CALL BILL (514)344-2663 EXT.53","title":"MESSAGE","ID":108,"date_sent":"03/14/2007","label":"urgentl"},
        ]
    }

  6. #16

    Default

    hey animal, i really appreciate all the help your giving me! Thanks alot man.

    so far in order to have each row as a seperate element, i have to use the cfml code we've constructed together:

    Code:
    <cfinclude template="json.cfc" /> 
    
    <cfquery datasource="midah" name="getMessages"> 
    SELECT * FROM messages_message
    ORDER BY ID
    </cfquery> 
    
    <cfoutput>
    <cfscript> 
    
    	counter = #getMessages.currentRow#;
    	
        thestruct = StructNew(); 
       	thestruct["totalCount"] = structnew(); 
        thestruct["totalCount"] = "#getMessages.recordCount#"; 
        thestruct["topics"] = ArrayNew(1);
    
    	
    			thestruct.topics[counter]["ID"] = structnew();
    			thestruct.topics[counter]["ID"] = "#getMessages.ID#"; 
    			
    			thestruct.topics[counter]["label"] = structnew();
    			thestruct.topics[counter]["label"] = "#getMessages.label#";
    		
    		  
    			thestruct.topics[counter]["title"] = structnew();
    			thestruct.topics[counter]["title"] = "#Replace(getMessages.title, chr(13) & chr(10), " ","ALL")#"; 
    			
    			
    			thestruct.topics[counter]["message"] = structnew();
    			thestruct.topics[counter]["message"] = "#Replace(getMessages.message, chr(13) & chr(10), " ","ALL")#"; 
    			
    			thestruct.topics[counter]["date_sent"] = structnew();
    			thestruct.topics[counter]["date_sent"] = "#getMessages.date_sent#"; 	
    			
    					
    
    		
    </cfscript> 
    </cfoutput> 
    
    
    <cfinvoke component="JSON" method="encode" data="#thestruct#" returnvariable="result" /> 
    <cfcontent reset="yes"> 
    <cfoutput>#result#</cfoutput>
    witch from what i gather is the proper output:

    Code:
    {"topics":[{"message":"hey avi turn on your cell i\'m trying to call you!!!! i just remembered something i want to tell you","title":"","ID":55,"date_sent":"03/12/2007","label":"urgent"}],"totalCount":37}

    although the grid does not render the info::

    here is my paging.js




    Code:
    /*
     * Ext - JS Library 1.0 Alpha 3 - Rev 4
     * Copyright(c) 2006-2007, Jack Slocum.
     */
    
    Ext.onReady(function(){
    
        // create the Data Store
        var ds = new Ext.data.Store({
    
            proxy: new Ext.data.ScriptTagProxy({
                url: 'jsonDATA.cfm'
            }),
    
            // create reader that reads the Topic records
            reader: new Ext.data.JsonReader({
                root: 'topics',
                totalProperty: 'totalCount',
                id: 'ID'
            }, [
                {name: 'ID', mapping: 'ID', type: 'int'},
                {name: 'title', mapping: 'title'},
                {name: 'message', mapping: 'message'},
                {name: 'label', mapping: 'label'},
                {name: 'date_sent', mapping: 'date_sent'}
            ]),
    
            // turn on remote sorting
            remoteSort: true
        });
        ds.setDefaultSort('ID', 'desc');
    
    
    
    
    // the data store
        var cm = new Ext.grid.ColumnModel([{
    									   
               header: "ID",
               dataIndex: 'ID',
               width: 25
            },{
               header: "Title",
               dataIndex: 'title',
               width: 200
            },{
               header: "Message",
               dataIndex: 'message',
               width: 420
            },{
               header: "Message Marked",
               dataIndex: 'label',
               width: 150
            },{
               header: "Date Sent",
               dataIndex: 'date_sent',
               width: 150
            }]);
    		
    		
    
        // 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: 's'
        });
        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: 25,
            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:0, limit:25}});
    
        function toggleDetails(btn, pressed){
            grid.getView().refresh();
        }
    });
    the datagrid doesnt load the data?

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

    Default

    I think it's because you're using an ScriptTagProxy.

    (BTW, I assume you have rmoved the other 36 elements in the "topics" array to save space?)

    A ScriptTagProxy is only for cross-domain data requests, ie to another domain than the one your page came from.

    This is because XMLHttpRequests can't go cross domain. So instead, a new <script> element is added with a URL you specified.

    Obviously that means that you must respond with executable code rather than just data.

    See http://www.yui-ext.com/manual/data:proxy

    If you don't need this, just use an HttpProxy.

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

    Default

    @dangerzone

    If the JSON cfc is returning an object of arrays, then it's not going to work so hot with Ext. I'd suggest instead that you use JSONEncode() from http://www.cflib.org/udf.cfm?ID=1288.
    Jeff Howden
    Ext JS - Support Team Volunteer
    [email protected]

  9. #19

    Default

    @jeffHowden
    i did and JSONEncode() returns the data in the worng format (all the id's in one array, all the messages in another array etc...), however the JSON cfc returns the data in the proper format, but as you saw, i have to jump hoops to structure the data, and for some odd reason, only returns one record.

    im still trying to drill this down. if you have any ideas, i could really use them!
    im going nuts trying to figure this out!


    Thanks again jeffHowden

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

    Default

    Quote Originally Posted by dangerzone
    @jeffHowden
    i did and JSONEncode() returns the data in the worng format (all the id's in one array, all the messages in another array etc...), however the JSON cfc returns the data in the proper format, but as you saw, i have to jump hoops to structure the data, and for some odd reason, only returns one record.

    im still trying to drill this down. if you have any ideas, i could really use them!
    im going nuts trying to figure this out!


    Thanks again jeffHowden
    Ah, indeed you're right. I forgot that I've been generating my JSON using my own UDFs. So, short of writing your own, here's how your code needs to be updated (you'll kick yourself when you see what's missing :twisted: ):

    Code:
    <cfinclude template="json.cfc" />
    
    <cfquery datasource="midah" name="getmessages">
      SELECT id
           , label
           , title
           , message
           , date_sent
        FROM messages_message
       ORDER BY id
    </cfquery> 
    
    <cfscript>
      thestruct = StructNew(); 
      thestruct['totalCount'] = StructNew(); 
      thestruct['totalCount'] = getmessages.recordcount; 
      thestruct['topics'] = ArrayNew(1); 
    </cfscript>
    
    <cfloop query="getMessages">
      <cfscript> 
        thestruct.topics[currentrow] = StructNew();
        thestruct.topics[currentrow]['id'] = id;
        thestruct.topics[currentrow]['label'] = label;
        thestruct.topics[currentrow]['title'] = Replace(title, chr(13) & chr(10), ' ','ALL');
        thestruct.topics[currentrow]['message'] = Replace(message, chr(13) & chr(10), ' ','ALL');
        thestruct.topics[currentrow]['date_sent'] = date_sent;
      </cfscript>
    </cfoutput>
    
    <cfinvoke component="JSON" method="encode" data="#thestruct#" returnvariable="result" />
    <cfcontent reset="yes">
    <cfoutput>#result#</cfoutput>
    Jeff Howden
    Ext JS - Support Team Volunteer
    [email protected]

Page 2 of 6 FirstFirst 1234 ... 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
  •