1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    60
    Vote Rating
    1
    ImShogun is on a distinguished road

      0  

    Red face Grid data display only with store data parameter, can't get url to work

    Grid data display only with store data parameter, can't get url to work


    Hello folks,

    I'm quite desperate, I've been trying the whole day to replace my "dummyData" with "some ajax JSON" in this Grid (Grouped by).

    I'll paste the full code at the end of my post, but in the meantime here is the part in which I thing I did (many?) mistake(s):

    The non working code with real data (it is a mix of 2 attempts, one with and without use of proxy):

    Code:
             
            MyInStoreProxy = new Ext.data.HttpProxy({
                        //where to retrieve data
                        url: 'listings/actions.cfc?method=GetActions&tab=in', //url to data object (server side script)
                        method: 'GET'
                    });
            
            
            MyInStore = new Ext.data.GroupingStore({
                    reader: MyReader,
                    //data: Ext.grid.dummyDataIN,
                    autoLoad:true,
                    //url:'listings/actions.cfc?method=GetActions&tab=in',
                    sortInfo:{field: 'Action', direction: "ASC"},
                    groupField:'source',
                    proxy:MyInStoreProxy
                    //root:'data'
                });
            MyInStore.load();     
            
            //GRILLE ACTIONS 
            //IN
            ActionsIn = new Ext.grid.GridPanel({
                title:'Inbox',
                tabTip:'assigned <b>to</b> you',            
                iconCls:'IconActionsIn',            
                store: MyInStore,
        
                columns: [
                    {id:'action',header: "Action", width: 60, sortable: true, dataIndex: 'Action'},
                    {header: "Status", width: 50, sortable: true, dataIndex: 'Status', renderer: RenderStatus},
                    {header: "Due date", width: 20, sortable: true, dataIndex: 'ExpireDate'},
                    {header: "Sub-actions", width: 20, sortable: true,  dataIndex: 'Assignements', tooltip:'Accomplished assignements <b>versus</b> total Assignements'},//renderer: Ext.util.Format.usMoney,
                    {header: "From", hidden: false, width: 20, sortable: true, dataIndex: 'From'},//, renderer: Ext.util.Format.usMoney
                    {header: "To", hidden: true, width: 20, sortable: true, dataIndex: 'To'},
                    {header: "Source", width: 20, sortable: true, dataIndex: 'source'},
                    {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
                ],
        
                view: new Ext.grid.GroupingView({
                    forceFit:true,
                    groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                })
            });
    And here the data sent trough 'listings/actions.cfc?method=GetActions&tab=in':

    Code:
    [['2008/1.1.A027','ongoing','blue','0/0','IC','E','4/2/2009 12:00am','31/12/2009', 'IAS/2008/01'],    ['2008/1.1.A028','overdue','blue','0/1','IC','E','4/2/2009 12:00am','31/08/2009', 'IAS/2008/01'],    ['2008/1.1.B021','waiting for approval','blue','2/2','IC','E1','4/2 12:00am','31/12/2009', 'IAS/2008/01'],    ['2008/1.1.B022','expiring','blue','1/3','IC','E2','4/2/2009 12:00am','30/09/2009', 'IAS/2008/01'],    ['2008/1.1.C028','ongoing','blue','4/8','IC','A','4/2/2009 12:00am','31/12/2009', 'IAS/2008/02'],    ['2008/1.1.C029','finished','blue','1/1','IC','A3','4/2/2009 12:00am','31/12/2009', 'IAS/2008/02'],    ['2008/1.1.D029','ongoing','blue','2/2','IC','B','4/2/2009 12:00am','31/12/2009', 'IAS/2008/03'],    ['2008/1.1.E029','finished','blue','1/1','IC','C','4/2/2009 12:00am','31/12/2009', 'IAS/2008/03']]
    Please note that I've tryed to set that url parameter directly on the GroupingStore, then in the proxy, none worked, and I'm lost in my own confusion. It is just one of these moments when you're to close to the problem to see it :-)

    Now, here is the working "dummy" code:

    Code:
                Ext.grid.dummyDataIN = [
                ['2008/1.1.A027','ongoing','blue','0/0','-','IC','4/2/2009 12:00am','31/12/2009', 'IAS/2008/01'],
                ['2008/1.1.A028','overdue','blue','0/1','-','IC','4/2/2009 12:00am','31/08/2009', 'IAS/2008/01'],
                ['2008/1.1.B021','waiting for approval','blue','2/2','-','IC','4/2 12:00am','31/12/2009', 'IAS/2008/01'],
                ['2008/1.1.B022','expiring','blue','1/3','-','IC','4/2/2009 12:00am','30/09/2009', 'IAS/2008/01'],
                ['2008/1.1.C028','ongoing','blue','4/8','-','IC','4/2/2009 12:00am','31/12/2009', 'IAS/2008/02'],
                ['2008/1.1.C029','finished','blue','1/1','-','IC','4/2/2009 12:00am','31/12/2009', 'IAS/2008/02'],
                ['2008/1.1.D029','ongoing','blue','2/2','-','IC','4/2/2009 12:00am','31/12/2009', 'IAS/2008/03'],
                ['2008/1.1.E029','finished','blue','1/1','-','IC','4/2/2009 12:00am','31/12/2009', 'IAS/2008/03']                                    
            ];    
            
            MyInStore = new Ext.data.GroupingStore({
                    reader: MyReader,
                    data: Ext.grid.dummyDataIN,
                    autoLoad:true,
                  
                    sortInfo:{field: 'Action', direction: "ASC"},
                    groupField:'source',
                    proxy:MyInStoreProxy
                });
            MyInStore.load();        
            
            //GRILLE ACTIONS 
            //IN
            ActionsIn = new Ext.grid.GridPanel({
                title:'Inbox',
                tabTip:'assigned <b>to</b> you',            
                iconCls:'IconActionsIn',            
                store: MyInStore,
        
                columns: [
                    {id:'action',header: "Action", width: 60, sortable: true, dataIndex: 'Action'},
                    {header: "Status", width: 50, sortable: true, dataIndex: 'Status', renderer: RenderStatus},
                    {header: "Due date", width: 20, sortable: true, dataIndex: 'ExpireDate'},
                    {header: "Sub-actions", width: 20, sortable: true,  dataIndex: 'Assignements', tooltip:'Accomplished assignements <b>versus</b> total Assignements'},//renderer: Ext.util.Format.usMoney,
                    {header: "From", hidden: false, width: 20, sortable: true, dataIndex: 'From'},//, renderer: Ext.util.Format.usMoney
                    {header: "To", hidden: true, width: 20, sortable: true, dataIndex: 'To'},
                    {header: "Source", width: 20, sortable: true, dataIndex: 'source'},
                    {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
                ],
        
                view: new Ext.grid.GroupingView({
                    forceFit:true,
                    groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                })
            });
    Thanks for your help!!

    Code:
     <script language="javascript" type="text/javascript">
        Ext.onReady(function(){
            
            //INITIATE TOOLTIPS
            Ext.QuickTips.init();
    
            
            //DUMMY DATA
            //ACTIONS IN
            Ext.grid.dummyDataIN = [
                ['2008/1.1.A027','ongoing','blue','0/0','-','IC','4/2/2009 12:00am','31/12/2009', 'IAS/2008/01'],
                ['2008/1.1.A028','overdue','blue','0/1','-','IC','4/2/2009 12:00am','31/08/2009', 'IAS/2008/01'],
                ['2008/1.1.B021','waiting for approval','blue','2/2','-','IC','4/2 12:00am','31/12/2009', 'IAS/2008/01'],
                ['2008/1.1.B022','expiring','blue','1/3','-','IC','4/2/2009 12:00am','30/09/2009', 'IAS/2008/01'],
                ['2008/1.1.C028','ongoing','blue','4/8','-','IC','4/2/2009 12:00am','31/12/2009', 'IAS/2008/02'],
                ['2008/1.1.C029','finished','blue','1/1','-','IC','4/2/2009 12:00am','31/12/2009', 'IAS/2008/02'],
                ['2008/1.1.D029','ongoing','blue','2/2','-','IC','4/2/2009 12:00am','31/12/2009', 'IAS/2008/03'],
                ['2008/1.1.E029','finished','blue','1/1','-','IC','4/2/2009 12:00am','31/12/2009', 'IAS/2008/03']                                    
            ];        
            //ACTIONS OUT
            Ext.grid.dummyDataOUT = [
                ['2008/1.1.A027','ongoing','blue','0/0','IC','E','4/2/2009 12:00am','31/12/2009', 'IAS/2008/01'],
                ['2008/1.1.A028','overdue','blue','0/1','IC','E','4/2/2009 12:00am','31/08/2009', 'IAS/2008/01'],
                ['2008/1.1.B021','waiting for approval','blue','2/2','IC','E1','4/2 12:00am','31/12/2009', 'IAS/2008/01'],
                ['2008/1.1.B022','expiring','blue','1/3','IC','E2','4/2/2009 12:00am','30/09/2009', 'IAS/2008/01'],
                ['2008/1.1.C028','ongoing','blue','4/8','IC','A','4/2/2009 12:00am','31/12/2009', 'IAS/2008/02'],
                ['2008/1.1.C029','finished','blue','1/1','IC','A3','4/2/2009 12:00am','31/12/2009', 'IAS/2008/02'],
                ['2008/1.1.D029','ongoing','blue','2/2','IC','B','4/2/2009 12:00am','31/12/2009', 'IAS/2008/03'],
                ['2008/1.1.E029','finished','blue','1/1','IC','C','4/2/2009 12:00am','31/12/2009', 'IAS/2008/03']                                    
            ];                
            
            //PRESENTATION DES DONNEES DES ACTIONS
            var MyReader = new Ext.data.ArrayReader({}, [
               {name: 'Action'},
               {name: 'Status'},
               {name: 'StatusClass'},
               {name: 'Assignements'},
               {name: 'From'},
               {name: 'To'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
               {name: 'ExpireDate'},           
               {name: 'source'},
               {name: 'desc'}
            ]);
            
            //RENDU DES CELLULES:
            //STATUS:
            RenderStatus = function(data, cell, record, rowIndex, columnIndex, store) {
                if (data == "ongoing") {
                    cell.css = "bluecell";
                } 
                else if (data == "finished") {
                    cell.css = "greencell";
                }
                else if (data == "overdue") {
                    cell.css = "redcell";
                }    
                else if (data == "expiring") {
                    cell.css = "orangecell";
                }                    
                else if (data == "waiting for approval") {
                        cell.css = "browncell";
                };
                return data;
            };
                
             //LC/ IN TAB DATA TROUGH JSON
            MyInStoreProxy = new Ext.data.HttpProxy({
                        //where to retrieve data
                        url: 'listings/actions.cfc?method=GetActions&tab=in', //url to data object (server side script)
                        method: 'GET'
                    });
            
            
            MyInStore = new Ext.data.GroupingStore({
                    reader: MyReader,
                    //data: Ext.grid.dummyDataIN,
                    autoLoad:true,
                    //url:'listings/actions.cfc?method=GetActions&tab=in',
                    sortInfo:{field: 'Action', direction: "ASC"},
                    groupField:'source',
                    proxy:MyInStoreProxy
                    //root:'data'
                });
            MyInStore.load();        
            
            //GRILLE ACTIONS 
            //IN
            ActionsIn = new Ext.grid.GridPanel({
                title:'Inbox',
                tabTip:'assigned <b>to</b> you',            
                iconCls:'IconActionsIn',            
                store: MyInStore,
        
                columns: [
                    {id:'action',header: "Action", width: 60, sortable: true, dataIndex: 'Action'},
                    {header: "Status", width: 50, sortable: true, dataIndex: 'Status', renderer: RenderStatus},
                    {header: "Due date", width: 20, sortable: true, dataIndex: 'ExpireDate'},
                    {header: "Sub-actions", width: 20, sortable: true,  dataIndex: 'Assignements', tooltip:'Accomplished assignements <b>versus</b> total Assignements'},//renderer: Ext.util.Format.usMoney,
                    {header: "From", hidden: false, width: 20, sortable: true, dataIndex: 'From'},//, renderer: Ext.util.Format.usMoney
                    {header: "To", hidden: true, width: 20, sortable: true, dataIndex: 'To'},
                    {header: "Source", width: 20, sortable: true, dataIndex: 'source'},
                    {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
                ],
        
                view: new Ext.grid.GroupingView({
                    forceFit:true,
                    groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                })
            });
            //OUT
            ActionsOut = new Ext.grid.GridPanel({
                title:'Outbox',
                tabTip:'assigned <b>by</b> you',
                iconCls:'IconActionsOut',
                store: new Ext.data.GroupingStore({
                    reader: MyReader,
                    data: Ext.grid.dummyDataOUT,
                    sortInfo:{field: 'Action', direction: "ASC"},
                    groupField:'source'
                }),
                /*listeners:{
                    rowclick:function(){OpenFiche();}
                },*/    
                columns: [
                    {id:'action',header: "Action", width: 60, sortable: true, dataIndex: 'Action'},
                    {header: "Status", width: 50, sortable: true, dataIndex: 'Status', renderer: RenderStatus},
                    {header: "Due date", width: 20, sortable: true, dataIndex: 'ExpireDate'},
                    {header: "Sub-actions", width: 20, sortable: true,  dataIndex: 'Assignements', tooltip:'Accomplished assignements <b>versus</b> total Assignements'},//renderer: Ext.util.Format.usMoney,
                    {header: "From", hidden: true, width: 20, sortable: true, dataIndex: 'From'},//, renderer: Ext.util.Format.usMoney
                    {header: "To", width: 20, sortable: true, dataIndex: 'To'},
                    {header: "Source", width: 20, sortable: true, dataIndex: 'source'},
                    {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
                ],
        
                view: new Ext.grid.GroupingView({
                    forceFit:true,
                    groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                })
            });        
            //OUVERTURE DES FICHES ACTIONS
            ActionsOut.on('rowclick',function(){
                OpenFiche();
            });        
            ActionsIn.on('rowclick',function(){
                OpenFiche();
            });        
            
            //FENETRE DES ACTIONS
            function OpenFiche(){
                var MyTree = new Ext.tree.TreePanel({
                        //xtype:'treepanel',
                        region:'west',
                        width:155,
                        collapsible:false,
                        minSize:100,
                        maxSize:200,
                        title:'Actions Tree',
                        root: new Ext.tree.AsyncTreeNode({
                                    expanded: true,
                                    text:'IC',
                                    qtip:'This is the action You have been assigned acting as IC',
                                    cls:'IconActionsInT',
                                    listeners:{
                                        click:function(){
                                            AddActionTab('IC',true,'IC');
                                        }
                                    },
                                    //nodeSelected?:true,
                                    children: [{
                                        text: 'B',
                                        listeners:{
                                            click:function(){
                                                AddActionTab('IC &gt; B',false,'ICB');
                                            }
                                        },                                    
                                        qtip:'This is the sub-action You assigned to B',
                                        id:'Selected',
                                        selected:true,
                                        cls:'IconActionsOutT',
                                        leaf: false,
                                        expanded: true,
                                        children: [{
                                            text: 'B2',
                                            listeners:{
                                                click:function(){
                                                    AddActionTab('IC &gt; B &gt; B2',false,'ICBB2');
                                                }
                                            },                                        
                                            qtip:'This is the sub-action B assigned to B2',
                                            cls:'IconActionsOutT',                                    
                                            leaf: true
                                        }, {
                                            text: 'B3',
                                            listeners:[{
                                                click:function(){
                                                    AddActionTab('IC &gt; B &gt; B3',false,'ICBB3');
                                                }
                                            }],                                        
                                            cls:'IconActionsOutT',    
                                            qtip:'This is the sub-action B assigned to B3',                                
                                            leaf: true
                                        }]
                                    }, {
                                        text: 'C',
                                        listeners:{
                                            click:function(){
                                                AddActionTab('IC &gt; C',false,'ICC');
                                            }
                                        },                                    
                                        qtip:'This is the sub-action You assigned to C',
                                        cls:'IconActionsOutT',                                    
                                        leaf: true
                                    }, {
                                        text: 'D1',
                                        listeners:{
                                            click:function(){
                                                AddActionTab('IC &gt; D1',false,'ICD1');
                                            }
                                        },                                    
                                        qtip:'This is the sub-action You assigned to D1',
                                        cls:'IconActionsOutT',                                    
                                        leaf: true
                                    }]
                                })                    
                    })
                    
                //MyTree.getSelectionModel().select(MyTree.getNodeById('Selected'),null,true);
                
                //TABS DE LA ZONE CENTRALE DE LA FICHE GLOBALE DE L'ACTION
                ActionFicheTabs = new Ext.TabPanel({
                        enableTabScroll:true,
                        region:'center'
                        //activeTab:0
                });
                
                //FENETRE DE LA FICHE GLOBALE DE L'ACTION
                var ActionFiche    = new Ext.Window({
                    //layoutConfig:{renderHidden:true},
                    title:'Action 2008/1.1 B022',
                    iconCls:'IconActions',
                    layout:'border',
                    defaults: {
                        collapsible: false
                        //split: true
                    },                
                    width:725,
                    height:550,
                    items:[MyTree,ActionFicheTabs]
                });
                AddActionTab('IC',true,'IC');
                ActionFiche.show();
            };
            
            
            
            //SOUS ONGLETS DE L'ONGLET DE L'ACTION ASSIGNEE
            ActionsTabs=new Ext.TabPanel({
                activeTab: 0,
                //layout:'fit',                    
                items: [ActionsIn,
                        ActionsOut,{
                        title: 'Reports',
                        tabTip:'Export actions/sources reports',
                        iconCls:'IconObjectivesReport',        
                        deferredRender:false,
                        html:'<iframe id="amp_old" width="100%" height="100%" src="http://e-manager-dev/index.cfm?hide_headers=1&open_tab=0&sub_tab=2&<cfoutput>#session.urltoken#</cfoutput>"></iframe>'
                        }]
    
            });        
            
            //SOUS ONGLETS OBJECTIVES
            //LC: IF IC ONLY
            <cfif session.right.control EQ "1" OR session.role_officer EQ "1">
            ObjectivesTabs=new Ext.TabPanel({
                activeTab: 0,
                //layout:'fit',                    
                items: [{
                    title: 'AMP',
                    tabTip:'View/Edit the AMP report',
                    iconCls:'IconObjectivesAMP',
                    deferredRender:false,
                    html:'<iframe id="amp_old" width="100%" height="100%" src="http://e-manager-dev/index.cfm?hide_headers=1&open_tab=1&<cfoutput>#session.urltoken#</cfoutput>"></iframe>'
                },{
                    title: 'Reports',
                    tabTip:'Export AMP structure report',
                    iconCls:'IconObjectivesReport',        
                    deferredRender:false,
                    html:'<iframe id="amp_old" width="100%" height="100%" src="http://e-manager-dev/index.cfm?hide_headers=1&open_tab=1&sub_tab=1&<cfoutput>#session.urltoken#</cfoutput>"></iframe>'
                }]
    
            });    
            </cfif>
            
            //SOUS ONGLETS TOOLS/OPTIONS
            //LC: IF INTERNAL CONTROLER, TOOLS TAB ID DIFFER
            <cfif session.right.control EQ "1" OR session.role_officer EQ "1">
                <cfset ToolsTab=2>
            <cfelse>
                <cfset ToolsTab=1>
            </cfif>
            ToolsTabs=new Ext.TabPanel({
                activeTab: 0,
                //layout:'fit',                    
                items: [{
                    title: 'Deleguate your Profile',
                    tabTip:'Deleguate your profile to one or many collegues so they can act as if there where you',
                    iconCls:'IconToolsProfiles',
                    deferredRender:false,
                    html:'<iframe id="profiles_old" width="100%" height="100%" src="http://e-manager-dev/index.cfm?hide_headers=1&open_tab=<cfoutput>#ToolsTab#</cfoutput>&sub_tab=0&<cfoutput>#session.urltoken#</cfoutput>"></iframe>'
                }/*,{
                    title: 'Organigram',
                    //tabTip:'',
                    //iconCls:'IconObjectivesAMP',
                    //deferredRender:false,
                    html:'<iframe id="profiles_old" width="100%" height="100%" src="http://e-manager-dev/index.cfm?hide_headers=1&open_tab=<cfoutput>#ToolsTab#</cfoutput>&sub_tab=1&<cfoutput>#session.urltoken#</cfoutput>"></iframe>'
                }*/]
    
            });        
    
            //ONGLETS
            Tabs=new Ext.TabPanel({
                activeTab: 0,
                flex:1,
                items: [{
                    title: 'Your Actions',
                    tabTip:'Manage your Actions',
                    tabCls: 'Tabs24',                    
                    iconCls:'IconActions',                
                    layout:'fit',
                    items: ActionsTabs
                },
                //LC: IF IC ONLY
                <cfif session.right.control EQ "1" OR session.role_officer EQ "1">
                {
                    title: 'Objectives',
                    tabTip:'View/Edit AMP reports, Sources... And create root actions for the Internal Controler.',
                    tabCls: 'Tabs24',    
                    iconCls:'IconObjectives',                
                    layout:'fit',
                    items: ObjectivesTabs
                },
                </cfif>
                {
                    title: 'Tools / Options',
                    tabTip:'Useful tools (profile delegation, reports...)',
                    tabCls: 'Tabs24',    
                    iconCls:'IconTools',                
                    layout:'fit',
                    items: ToolsTabs
                }]
    
            });    
            
            <!--- LC: TEMP ADAPTATION OF PROFILE SELECTOR --->
            <cfset libQuery="getListProfile">
            <cfinclude template="pages/tools/profile/query.cfm">        
            ActingAsData = [
                <cfoutput>        
                ['#session.user_role#-#session.user_login#','#session.user_name# #session.user_fname# (myself)']
                <cfset ActingNow='#session.user_role#-#session.user_login#'>
                <cfloop list="#var_list_profile#" delimiters="," index="i">
                    <cfset profile_label      = #GetToken("#i#",1,"/")#>
                    <cfset profile_role_id    = #GetToken("#i#",2,"/")#>
                    <cfset profile_role_login = #GetToken("#i#",3,"/")#>
                ,['#profile_role_id#-#profile_role_login#','#profile_label#']
                    
                    <cfif #session.role#>
                           <cfif #profile_role_id# EQ #session.role_id#>
                        <cfset ActingNow='#profile_role_id#-#profile_role_login#'>
                        </cfif>
                    <cfelse>
                        <cfif #profile_role_id# EQ #session.role_id# and #profile_role_login# EQ #session.role_login#>
                        <cfset ActingNow='#profile_role_id#-#profile_role_login#'>
                        </cfif>
                       </cfif>            
                        
                </cfloop>
                </cfoutput>
            ];    
            <!--- /LC: TEMP ADAPTATION OF PROFILE SELECTOR --->    
            
        
            
            ActingAsStore = new Ext.data.ArrayStore({
                    fields: ['Id','Role'],
                data: ActingAsData
            });
    
            
            //MENU GENERAL
            Toolbar = new Ext.Toolbar({
                        //menu: menu,
                        //region: 'toolbar',
                        align:'right',
                        width:'100%',
                        height:50,
                        items: [
                                    ' ',
                                    {xtype: 'tbtext', text: 'DG Enlargement - <b>e-Manager</b> 2010'
                                    },
                                    ' ',' ',
                                    //{xtype: 'tbtext', text: '- Current user: Nefertiti'
                                    //},    
                                    '->',
                                    'Acting as: ',
                                    {
                                        xtype:'combo',
                                        id:'id_list_profile',
                                        width:350,
                                        typeAhead: true,
                                        store:ActingAsStore,
                                        mode:'local',
                                        editable:true,
                                        value:'<cfoutput>#ActingNow#</cfoutput>',
                                        displayField: 'Role',
                                        valueField: 'Id',
                                        triggerAction: 'all',
                                        forceSelection: true,
                                        selectOnFocus:true,
                                        listeners:{
                                            select: function(a){
                                                //LC:CHANGE PROFILE RELY ON ALI'S ar_profile_change.cfm
                                                Ext.Ajax.request({
                                                url: 'pages/tools/profile/ar_profile_change.cfm?profileSelected='+$('ActingAsId').value,
                                                success: function(){document.location.href='';},
                                                failure: function(){alert('Network error. Sorry, please try again.');}
                                                });
    
                                            }
                                        },
                                        hiddenName: 'ActingAsId'
                                        //disableKeyFilter:true
                                        
                                    },
                                    {
                                        xtype:'button',
                                        text:'Quit',
                                        handler:function(){document.location.href='?quit=1'},
                                        iconCls:'IconRemove'
                                    }
                                ]
                        });        
            
            //CANVAS GENERAL
            viewport = new Ext.Viewport({
                layout:'vbox',
                layoutConfig: {
                    align : 'stretch',
                    pack  : 'start'
                },
                items: [
                    Toolbar,
                    Tabs//,
                    //{title:'3',html:'panel 3', flex:1}
                ]
    
            });
            
            var FirstTime = new Ext.Window({
                    title:'Welcome into E-manager 2.0 "Live Preview"',
                    width:500,
                    iconCls:'IconInfo',
                    bodyStyle:'padding:5 5 5 5',
                    html:<cfoutput>#FirstTime#</cfoutput>
                });        
            FirstTime.show();
            
            //Main.show();
        });
        
    //Onglet Action
            function AddActionTab(Title,IsAssignee,Id){
                var tab=ActionFicheTabs.getItem(Id);
                if (tab) {
                    ActionFicheTabs.setActiveTab(Id);
                }
                else {
                    var IconToShow = 'IconActionsIn';
                    if (IsAssignee == false) {
                        IconToShow = 'IconActionsOut';
                    }
                    var NewActionTab = new Ext.TabPanel({
                        title: Title,
                        id: Id,
                        tabTip: 'This action has been assigned to ' + Title,
                        closable: true,
                        iconCls: IconToShow,
                        xtype: 'tabpanel',
                        activeTab: 0,
                        items: [{
                            title: 'Details',
                            iconCls: 'IconActionsIn',
                            tabTip: 'View information about what you\'ve been assigned',
                            xtype: 'tabpanel',
                            activeTab: 0,
                            items: [{
                                title: 'Definition',
                                layout: 'border',
                                iconCls: 'Search',
                                items: [{
                                    layout:'vbox',
                                    region: 'north',    
                                    items:[/*{
                                        xtype:'toolbar',    
                                        height:50,                                                            
                                        items:['->',{xtype:'button',text:'Save'}]
                                    },*/{
                                        xtype: 'panel',
                                        title: 'Title',
                                        height: 50,
                                        items: [{
                                            xtype: 'textfield',
                                            border: false,
                                            //fieldLabel:'Title',
                                            width: '100%',
                                            height: '100%',
                                            value: 'Recommandation for Ergonomics in web applications'
                                        }]
                                    }]
                                }, {
                                    title: 'Key values',
                                    iconCls: 'IconInfo',
                                    layout: 'form',
                                    //lazyRender:true,
                                    labelAlign: 'top',
                                    bodyStyle: 'padding:5 5 5 5',
                                    region: 'east',
                                    //collapsible:'true',
                                    width: 150,
                                    items: [{
                                        xtype: 'datefield',
                                        fieldLabel: 'Due Date',
                                        width: '100%',
                                        value: '31/12/2009'
                                    }, new Ext.form.ComboBox({
                                        typeAhead: true,
                                        triggerAction: 'all',
                                        lazyRender: false,
                                        mode: 'local',
                                        store: new Ext.data.ArrayStore({
                                            id: 0,
                                            fields: ['myId', 'PriorityName'],
                                            data: [[1, 'Desirable'], [2, 'Important'], [3, 'Very Important'], [4, 'Critical']]
                                        }),
                                        fieldLabel: 'Priority',
                                        width: 125,
                                        valueField: 'myId',
                                        displayField: 'PriorityName'
                                    }), {
                                        fieldLabel: 'Due Date',
                                        border: false,
                                        html: '01/01/2009'
                                    }, {
                                        fieldLabel: 'Last status',
                                        border: false,
                                        html: 'Updated'
                                    }]
                                }, {
                                    title: 'Description',
                                    xtype: 'panel',
                                    layout: 'fit',
                                    region: 'center',
                                    //border:false,
                                    //bodyStyle:'padding:10 10 10 10',
                                    items: [{
                                        xtype: 'htmleditor',
                                        border: false,
                                        enableAlignments: false,
                                        enableFont: false,
                                        enableFontSize: false,
                                        enableSourceEdit: false,
                                        //fieldLabel:'Description',
                                        //width:'100%',
                                        //height:'100%',
                                        //frames:false,
                                        value: 'With internet applications being such a pain in the ass, ExtJS seems to really bring to users the nice AND functionnal tools they need...'
                                    }]
                                }, {
                                    title: 'History',
                                    iconCls: 'IconAgenda',
                                    region: 'south',
                                    collapsible: 'true',
                                    height: 125
                                }]
                            }, {
                                title: 'Schedule',
                                iconCls: 'IconAgenda'
                            }, {
                                title: 'Links',
                                iconCls: 'IconLink'
                            }]
                        }, {
                            title: 'Assignements',
                            iconCls: 'IconActionsOut',
                            tabTip: 'Assign this action (or a part of it) to subordinates/colleagues'
                        }, {
                            title: 'Reporting',
                            iconCls: 'IconActionsReport',
                            tabTip: 'Report (give a status, mark as completed...) your actions regarding this assignement.'
                        }]
                    });
                    ActionFicheTabs.add(NewActionTab);
                    ActionFicheTabs.setActiveTab(Id);
                }
            };    
        </script>
    all:true

  2. #2
    Sencha User
    Join Date
    Jul 2009
    Posts
    60
    Vote Rating
    1
    ImShogun is on a distinguished road

      0  

    Default


    here is how it looks like with the dummy data in:
    all:true

  3. #3
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    Did you change the reader when using the Ajax call?


    PHP Code:
    //PRESENTATION DES DONNEES DES ACTIONS
            
    var MyReader = new Ext.data.ArrayReader({}, [
               {
    name'Action'},
               {
    name'Status'},
               {
    name'StatusClass'},
               {
    name'Assignements'},
               {
    name'From'},
               {
    name'To'},
               {
    name'lastChange'type'date'dateFormat'n/j h:ia'},
               {
    name'ExpireDate'},           
               {
    name'source'},
               {
    name'desc'}
            ]); 

  4. #4
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    677
    Vote Rating
    20
    carol.ext will become famous soon enough carol.ext will become famous soon enough

      0  

    Default


    I do not see where you explain what exactly is not working.

    Suggestion based on not knowing what is not working:

    You do not show the location/URL in your browser that you are using. Are you running it on a webserver where the location looks like http://<yourserver>/... or are you just loading the file? (webserver required).

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    60
    Vote Rating
    1
    ImShogun is on a distinguished road

      0  

    Default


    To aw1zard2: I didn't? ... Should I? I guess I'll not wait and start investigate what you are suggesting...

    To carol: You're right carol, I should've been more specific. When trying the url method, There is just no data displayed at all, but the structure, including the columns and their triggers, are correctly generated. About the url, it is just an intranet so I tought there is no use to display some url that you would be able to get to, but yes, it is trough http and firebug says that the correct response has been got from the ajax call.

    Thanks already to care,

    Laurent
    all:true

  6. #6
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    Most times when we see help questions like this there is 1-2 things off from the Ajax response that Ext didn't like so it doesn't display the data.

    In your first code snippet you had some things commented off. I just wondered if the MyReader had changed or if it was the same.

    You are talking about JSON data from ajax in your original post but yet posted an ArrayReader not a JsonReader.

    The data you posted coming from the Ajax call is in Array format.



    EDIT: LOL too much coffee and sugar makes you skip things...

    Looking at it give me a few minutes...

  7. #7
    Sencha User
    Join Date
    Jul 2009
    Posts
    60
    Vote Rating
    1
    ImShogun is on a distinguished road

      0  

    Default


    ok aw1zard2, here is the first attempt, in which I tried the url parameter as specified here:
    http://www.extjs.com/deploy/dev/docs....GroupingStore

    PHP Code:
        

            
            
    //PRESENTATION DES DONNEES DES ACTIONS
            
    var MyReader = new Ext.data.ArrayReader({}, [
               {
    name'Action'},
               {
    name'Status'},
               {
    name'StatusClass'},
               {
    name'Assignements'},
               {
    name'From'},
               {
    name'To'},
               {
    name'lastChange'type'date'dateFormat'n/j h:ia'},
               {
    name'ExpireDate'},           
               {
    name'source'},
               {
    name'desc'}
            ]);
            

            
    MyInStore = new Ext.data.GroupingStore({
                    
    readerMyReader,
                    
    //data: Ext.grid.dummyDataIN,
                    
    autoLoad:true,
                    
    url:'listings/actions.cfc?method=GetActions&tab=in',
                    
    sortInfo:{field'Action'direction"ASC"},
                    
    groupField:'source'
                
    });
            
    MyInStore.load();     
            
            
    //GRILLE ACTIONS 
            //IN
            
    ActionsIn = new Ext.grid.GridPanel({
                
    title:'Inbox',
                
    tabTip:'assigned <b>to</b> you',            
                
    iconCls:'IconActionsIn',            
                
    storeMyInStore,
        
                
    columns: [
                    {
    id:'action',header"Action"width60sortabletruedataIndex'Action'},
                    {
    header"Status"width50sortabletruedataIndex'Status'rendererRenderStatus},
                    {
    header"Due date"width20sortabletruedataIndex'ExpireDate'},
                    {
    header"Sub-actions"width20sortabletrue,  dataIndex'Assignements'tooltip:'Accomplished assignements <b>versus</b> total Assignements'},//renderer: Ext.util.Format.usMoney,
                    
    {header"From"hiddenfalsewidth20sortabletruedataIndex'From'},//, renderer: Ext.util.Format.usMoney
                    
    {header"To"hiddentruewidth20sortabletruedataIndex'To'},
                    {
    header"Source"width20sortabletruedataIndex'source'},
                    {
    header"Last Updated"width20sortabletruerendererExt.util.Format.dateRenderer('m/d/Y'), dataIndex'lastChange'}
                ],
        
                
    view: new Ext.grid.GroupingView({
                    
    forceFit:true,
                    
    groupTextTpl'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                
    })
            }); 
    ... and the second approach:


    PHP Code:
        

            
            
    //PRESENTATION DES DONNEES DES ACTIONS
            
    var MyReader = new Ext.data.ArrayReader({}, [
               {
    name'Action'},
               {
    name'Status'},
               {
    name'StatusClass'},
               {
    name'Assignements'},
               {
    name'From'},
               {
    name'To'},
               {
    name'lastChange'type'date'dateFormat'n/j h:ia'},
               {
    name'ExpireDate'},           
               {
    name'source'},
               {
    name'desc'}
            ]);

            
    MyInStoreProxy = new Ext.data.HttpProxy({
                        
    //where to retrieve data
                        
    url'listings/actions.cfc?method=GetActions&tab=in'//url to data object (server side script)
                        
    method'GET'
                    
    });
            

            
    MyInStore = new Ext.data.GroupingStore({
                    
    readerMyReader,
                    
    //data: Ext.grid.dummyDataIN,
                    
    autoLoad:true,
                    
    //url:'listings/actions.cfc?method=GetActions&tab=in',
                    
    sortInfo:{field'Action'direction"ASC"},
                    
    groupField:'source',
                    
    proxy:MyInStoreProxy
                
    });
            
    MyInStore.load();     
            
            
    //GRILLE ACTIONS 
            //IN
            
    ActionsIn = new Ext.grid.GridPanel({
                
    title:'Inbox',
                
    tabTip:'assigned <b>to</b> you',            
                
    iconCls:'IconActionsIn',            
                
    storeMyInStore,
        
                
    columns: [
                    {
    id:'action',header"Action"width60sortabletruedataIndex'Action'},
                    {
    header"Status"width50sortabletruedataIndex'Status'rendererRenderStatus},
                    {
    header"Due date"width20sortabletruedataIndex'ExpireDate'},
                    {
    header"Sub-actions"width20sortabletrue,  dataIndex'Assignements'tooltip:'Accomplished assignements <b>versus</b> total Assignements'},//renderer: Ext.util.Format.usMoney,
                    
    {header"From"hiddenfalsewidth20sortabletruedataIndex'From'},//, renderer: Ext.util.Format.usMoney
                    
    {header"To"hiddentruewidth20sortabletruedataIndex'To'},
                    {
    header"Source"width20sortabletruedataIndex'source'},
                    {
    header"Last Updated"width20sortabletruerendererExt.util.Format.dateRenderer('m/d/Y'), dataIndex'lastChange'}
                ],
        
                
    view: new Ext.grid.GroupingView({
                    
    forceFit:true,
                    
    groupTextTpl'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                
    })
            }); 
    Both ended with no data showing but all layout ok.
    all:true

  8. #8
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    Try this and see if this works.

    PHP Code:
    //PRESENTATION DES DONNEES DES ACTIONS
            
    var MyReader = new Ext.data.ArrayReader({}, [
               
    'Action',
               
    'Status',
               
    'StatusClass',
               
    'Assignements',
               
    'From',
               
    'To',
               {
    name'lastChange'type'date'dateFormat'n/j h:ia'},
               
    'ExpireDate',           
               
    'source'
            
    ]);
            
    MyInStore = new Ext.data.GroupingStore({
                    
    readerMyReader,
                    
    //data: Ext.grid.dummyDataIN,
                    
    autoLoad:true,
                    
    url:'listings/actions.cfc',
                    
    params: {
                      
    method'GetActions',
                      
    tab'in'
                    
    },
                    
    sortInfo:{field'Action'direction"ASC"},
                    
    groupField:'source'
                
    });
            
    MyInStore.load(); 

  9. #9
    Sencha User
    Join Date
    Jul 2009
    Posts
    60
    Vote Rating
    1
    ImShogun is on a distinguished road

      0  

    Default


    Thanks a lot aw1zard2, I'll test your code as soon as I get to my office tomorrow (no access from here), and keep you informed!

    Regards,

    Laurent
    all:true

  10. #10
    Sencha User
    Join Date
    Jul 2009
    Posts
    60
    Vote Rating
    1
    ImShogun is on a distinguished road

      0  

    Default


    Mmmm no luck so far.

    I tryed your code as is, first my component expected url parameters so "params:" where not giving him what was needed. Then I still tryed your reader, but without any luck. And last, I added 'desc' in it, but still nothing.

    And firebug still get the request done.

    running out of ideas.

    So far, I might just include the JSON in the page, but then what's ajax for eh?
    all:true