1. #1
    Ext User
    Join Date
    May 2007
    Posts
    6
    Vote Rating
    0
    novocent is on a distinguished road

      0  

    Default grid.getView.refresh()

    grid.getView.refresh()


    I have been trying in vain to refresh this grid based on a JSON response to the form in the east panel.

    The only success I have gotten is setting up the grid as a function and re-creating it with the response data. Does someone know how to incorporate the grid.getView.refresh()?

    Code:
    var subLayout = function(){ 
         var ds;
         var grid;
         var colModel;
         var gridFoot;
         var paging;
         var layout;
         var previewPane;
         var queryText;
         var tb;
         
         var lciType = [
            ['1', 'Lead'],
            ['2', 'Complaint'],
            ['3', 'Inquiry']
         ];
    
         var sType = [
            ['1', 'Any Type'],
            ['2', 'Leads only'],
            ['3', 'Complaints only'],
            ['4', 'Inquiries only']
         ];
         
        var sStatus = [
            ['1', 'Any Status'],
            ['2', 'Any Open Status'],
            ['3', 'Any Closed Status'],
            ['4', 'Open only'],
            ['5', 'Open - Escalated only'],
            ['6', 'Closed only'],
            ['7', 'Closed - Sale Made only'],
            ['8', 'Closed - Lost Sale only'],
            ['9', 'Closed - Referred only']
         ];
    
    
        
        function setupDataSource(query) {
             ds = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({url: 'sqlget2.php?'+query, method:'GET'}),        
            reader: new Ext.data.JsonReader({root: 'results', totalProperty: 'total', id: 'ID' }, 
                [
                {name: 'id', mapping: 'ID', type: 'int'},
                {name: 'full_name', mapping: 'FullName'},
                {name: 'category', mapping: 'Category'},
                {name: 'status', mapping: 'Status'},
                {name: 'type', mapping: 'InquityType'},
                {name: 'facility', mapping: 'Facility'},
                {name: 'time_entered', mapping: 'Time_Entered', type: 'date', dateFormat: 'm-d-Y'},
                {name: 'edited', mapping: 'Edited', type: 'date', dateFormat: 'm-d-Y'},
                {name: 'hours', mapping: 'Hours'},
                {name: 'actions', mapping: 'Actions'},
                {name: 'needs_view', mapping: 'Needs_View'}
                    ])
            // , remoteSort: true
            });
         
        ds.setDefaultSort('id', 'desc');
        ds.load({params:{start:0, limit:50}});
        }
            
            
        function getColumnModel() {
           colModel = new Ext.grid.ColumnModel([
                    {header: "Unique ID", width:70, dataIndex: 'id'},
                    {id: 'slicName',header: "Name", width:150, dataIndex: 'full_name'},
                    {id: 'slicCat', header: "Category", width:190, dataIndex: 'category'},
                    {header: "Status", width:100, dataIndex: 'status'},
                    {header: "Type", width:70, dataIndex: 'type'},
                    {header: "CSC Name", width:170, dataIndex: 'facility'},
                    {header: "Entered", width:65, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'time_entered'},
                    {header: "Updated", width:65, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'edited'}
                    ]);
            
            colModel.defaultSortable = true;
            return colModel;
        }
    
        function rowClicked(grid, rowClicked, e) {
            var selectionModel = grid.getSelectionModel();
            var record = selectionModel.getSelected(); 
            var south = layout.getRegion('south'); 
        
            south.expand(); 
            previewPanel.load({url: 'sqlget2.php?start=0&limit=50&ID='+record.data['id']}); 
        }
        
        function buildGrid() {
            grid = new Ext.grid.Grid('mygrid',
                    {
                    ds: ds,
                    colModel: getColumnModel(),
                    selModel: new Ext.grid.RowSelectionModel(),
                    enableColLock:false,
                    enableColumnMove: false,
                    monitorWindowResize : true
                    }
                );
            
            grid.addListener("rowclick", rowClicked);
            grid.render();
            gridFoot = grid.getView().getFooterPanel(true);
               
            paging = new Ext.PagingToolbar(gridFoot, ds, {
                pageSize: 50,
                displayInfo: true,
                displayMsg: 'Displaying records {0} - {1} of {2}',
                emptyMsg: "No records to display"
                });
    
        }
    
    function buildtb() {
        var menu = new Ext.menu.Menu({
                id: 'basicMenu',
                items: [
                    {   text: 'Send to New CSC',
                        handler: clickHandler
                        }, 
                    {   text: 'Assign to New CSR',
                        handler: clickHandler
                        }, 
                    {    text: 'Send to a Stratic Partner',
                        handler: clickHandler
                        }
                    ]
            });
        
        var tb = new Ext.Toolbar('toolbar');
        tb.add({
                cls: 'x-btn-text-icon bmenu', // icon and text class
                text:'Reassign',
                menu: menu  // assign menu by instance
                }, '-'    
                );
        
        tb.addButton({
                text:'Inquiry Actions',
                handler: clickHandler
                });
    }
    
    function onItemToggle(item, pressed){
           alert('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
        }
    
    function clickHandler(item, e) {
        alert('Clicked on the menu item: ' + item.text);
    }
    
    function checkHandler(item, e) {
        alert('Checked the item: ' + item.text);
    }
        
        return {
            init : function() {
                setupDataSource();
                buildGrid();
                buildtb();
                
                layout = new Ext.BorderLayout(document.body, {
                          north: {
                                split:false,
                                initialSize: 27,
                                titlebar: false
                            },
                            west: {
                                split:false,
                                initialSize: 200,
                                minSize: 175,
                                maxSize: 400,
                                titlebar: true,
                                collapsible: true,
                                animate: true
                            },
                            east: {
                                split:true,
                                initialSize: 310,
                                minSize: 175,
                                maxSize: 310,
                                titlebar: true,
                                collapsible: true,
                                animate: true, 
                                floatable: false
                            },
                            south: {
                                split:true,
                                initialSize: 300,
                                minSize: 100,
                                maxSize: 300,
                                titlebar: true,
                                collapsible: true,
                                collapsed: true,
                                animate: true,
                                floatable: false,
                                collapsedTitle: 'Detailed View'
                            },
                            center: {
                                split:false,
                                 titlebar: false,
                                alwaysShowTabs: true, 
                                tabPosition:'top'
                            }
                     });  //end layout
    
                previewPanel = new Ext.ContentPanel('south', {title: 'Record Details',  closable: false}); 
    
                layout.beginUpdate();
                        layout.add('north', new Ext.ContentPanel('north', 'North'));                    
                        layout.add('south', previewPanel); 
                        layout.add('west', new Ext.ContentPanel('west', {title: 'Help'}));
                        layout.add('east', new Ext.ContentPanel('east', {title: 'Search Criteria', closable: false}));
                        layout.add('center', new Ext.GridPanel (grid, {title: 'Suburban Propane', closable: false}));        
                        layout.add('center', new Ext.ContentPanel('center2', {title: 'Strategic Partners', closable: false}));
                        layout.getRegion('west').hide();    
                        layout.getRegion('center').showPanel('mygrid');
                layout.endUpdate();     
    
        
                   var searchFrm = new Ext.form.Form({
                       labelAlign: 'right',
                    labelWidth: 75
                   });
       
                  searchFrm.fieldset(
                    {legend:'Location Information'},
                    
                       new Ext.form.ComboBox({
                        fieldLabel: 'Region',
                        hiddenName:'sRegion',
                        store: new Ext.data.Store({
                                baseParams: {              
                                    comboQry: 'SELECT ID, Number FROM Regions ORDER BY Number'
                                },
                                proxy: new Ext.data.HttpProxy({
                                        method:'GET', 
                                        url:'combo.php'
                                     }),
                                    reader: new Ext.data.JsonReader(
                                        {
                                            root: 'results'
                                        },
                                        [
                                            {name:'regID', mapping:'ID'},
                                            {name:'regNum', mapping:'Number'}
                                        ]
                                    )
                                }
                            ),                    
                        displayField:'regNum',
                        typeAhead: false,
                        mode: 'remote',
                        triggerAction: 'all',
                        emptyText:'Select a Region...',
                        selectOnFocus:true,
                        width:175
                    }),
                    
                    new Ext.form.ComboBox({
                        fieldLabel: 'CSC',
                        hiddenName:'sCSC',
                        store: new Ext.data.Store({
                                baseParams: {              
                                    comboQry: 'SELECT ID, Name FROM CSC ORDER BY Name'
                                },
                                proxy: new Ext.data.HttpProxy({
                                        method:'GET', 
                                        url:'combo.php'
                                     }),
                                    reader: new Ext.data.JsonReader(
                                        {
                                            root: 'results'
                                        },
                                        [
                                            {name:'cscID', mapping:'ID'},
                                            {name:'cscName', mapping:'Name'}
                                        ]
                                    )
                                }
                            ),                    
                        displayField:'cscName',
                        typeAhead: false,
                        mode: 'remote',
                        listWidth:225,
                        triggerAction: 'all',
                        emptyText:'Select a CSC...',
                        selectOnFocus:true,
                        width:175
                    }),
    
                    new Ext.form.ComboBox({
                        fieldLabel: 'CSR Name',
                        hiddenName:'sCSR',
                        store: new Ext.data.Store({
                                baseParams: {              
                                   comboQry: 'SELECT UserName, CONCAT(LastName, \', \', FirstName) AS \'FullName\' FROM Reps ORDER BY \'FullName\''
                                },
                                proxy: new Ext.data.HttpProxy({
                                        method:'GET', 
                                        url:'combo.php'
                                     }),
                                    reader: new Ext.data.JsonReader(
                                        {
                                            root: 'results'
                                        },
                                        [
                                            {name:'repUsr', mapping:'UserName'},
                                            {name:'repName', mapping:'FullName'}
                                        ]
                                    )
                                }
                            ),                    
                        displayField:'repName',
                        typeAhead: false,
                        mode: 'remote',
                        triggerAction: 'all',
                        emptyText:'Select a CSR...',
                        selectOnFocus:true,
                        width:175
                    })
                ); 
    
                   searchFrm.fieldset(
                    {legend:'Inquiry Information'},
    
                    new Ext.form.TextField({
                    fieldLabel: 'ID',
                    name: 'SearchID',
                    width:175
                    }),
                
                       new Ext.form.ComboBox({
                        fieldLabel: 'Inquiry Type',
                        hiddenName:'sType',
                        store: new Ext.data.SimpleStore({
                            fields: ['id', 'type'],
                               data :  sType
                         }),               
                        displayField:'type',
                        typeAhead: false,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a Type...',
                        selectOnFocus:true,
                        width:175
                    }),
                    
                    new Ext.form.ComboBox({
                        fieldLabel: 'Status',
                        hiddenName:'sStatus',
                        store: new Ext.data.SimpleStore({
                            fields: ['id', 'status'],
                               data :  sStatus
                         }),               
                        displayField:'status',
                        typeAhead: false,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a Status...',
                        selectOnFocus:true,
                        width:175
                    }),
                       
                    new Ext.form.DateField({
                        fieldLabel: 'After this Date',
                        name: 'sDateAfter',
                        width:175,
                        allowBlank:false
                    }),
    
                    new Ext.form.DateField({
                        fieldLabel: 'Before this Date',
                        name: 'sDateBefore',
                        width:175,
                        allowBlank:false
                    })
                );
            
                searchFrm.fieldset(
                    {legend:'Customer Information'},
    
                    new Ext.form.TextField({
                    fieldLabel: 'Customer Name',
                    name: 'sCName',
                    width:175
                    }),
                    new Ext.form.TextField({
                    fieldLabel: 'Account #',
                    name: 'sAccount',
                    width:175
                    }),
                    new Ext.form.TextField({
                    fieldLabel: 'Address',
                    name: 'sAddress',
                    width:175
                    }),
                    new Ext.form.TextField({
                    fieldLabel: 'Zip',
                    name: 'sZip',
                    width:175
                    }),
                    new Ext.form.TextField({
                    fieldLabel: 'Phone',
                    name: 'sPhone',
                    width:175
                    })              
                ); 
                
                searchFrm.addButton('Search').on('click', function(){                
                    //Ext.MessageBox.alert('Success', 'You have filled out the form correctly.');    
                    queryText = 'SearchID=' + searchFrm.findField('SearchID').getValue();
                    
                    /* Collapse Search Panel After first search
                    var east = layout.getRegion('east');
                        if(east.isVisible()){
                            east.collapse();
                        }
                     */
                    setupDataSource(queryText);
                    buildGrid();
                    });
                
                searchFrm.addButton('Cancel');
    
                searchFrm.render('form-ct');
    
        /*
         * ================  Edit Form  =======================
         */
        var editFrm = new Ext.form.Form({
            labelAlign: 'right',
            labelWidth: 60
        });
    
        editFrm.column({width:225}); // open column, without auto close
    
        editFrm.fieldset(
            {legend:'Customer Details'},
            new Ext.form.TextField({
                fieldLabel: 'ID #',
                name: 'idNum'
            }),
    
            new Ext.form.TextField({
                fieldLabel: 'Frist Name',
                name: 'firstName'
            }),
    
            new Ext.form.TextField({
                fieldLabel: 'Last Name',
                name: 'lastName'
            }),
    
            new Ext.form.TextField({
                fieldLabel: 'Account #',
                name: 'accountNum'
            }),
            
            new Ext.form.TextField({
                fieldLabel: 'Email',
                name: 'email'
            }),
            
            new Ext.form.ComboBox({
                    fieldLabel: 'Usage Type',
                    hiddenName:'usagetype',
                    store: new Ext.data.SimpleStore({
                        fields: ['abbr', 'state'],
                        data : Ext.exampledata.states // from states.js
                        }),
                    displayField:'abbr',
                    typeAhead: true,
                    maxHeight: 50,
                    mode: 'local',
                    triggerAction: 'all',
                    emptyText:'state...',
                    selectOnFocus:true
                })
    
        );
        editFrm.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
    
           editFrm.column({width:225, style:'margin-left:10px'});
    
        editFrm.fieldset(
            {legend:'Address Info'});
        editFrm.add (
            new Ext.form.TextField({
                fieldLabel: 'Address 1',
                name: 'address1'
            }),
    
            new Ext.form.TextField({
                fieldLabel: 'Address 2',
                name: 'address2'
            }),
    
            new Ext.form.TextField({
                fieldLabel: 'City',
                name: 'city'
            }),
            new Ext.form.TextField({
                fieldLabel: 'Phone #',
                name: 'phone'
            }),
            new Ext.form.TextField({
                fieldLabel: 'Alt. Phone #',
                name: 'altPhone'
            })
    
            );
        
            editFrm.container( { width:215 });
    
            editFrm.column( {width:120  },
                new Ext.form.ComboBox({
                    fieldLabel: 'State',
                    hiddenName:'state',
                    store: new Ext.data.SimpleStore({
                        fields: ['abbr', 'state'],
                        data : Ext.exampledata.states // from states.js
                        }),
                    displayField:'abbr',
                    typeAhead: true,
                    maxHeight: 150,
                    mode: 'local',
                    triggerAction: 'all',
                    emptyText:'ST...',
                    selectOnFocus:true,
                    labelWidth: 75,
                    width:40
                })
             );
        
            editFrm.column( {width:80, labelWidth:15 },
                new Ext.form.TextField({
                    fieldLabel: 'Zip',
                    name: 'zip',
                    width:50
                })
            );
    
        editFrm.end(); //close container
        editFrm.end(); // closes column
    
        editFrm.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
    
           editFrm.column({width:225,  style:'margin-left:10px'});
    
        editFrm.fieldset(
            {legend:'Inquiry Details'},
            
                    new Ext.form.ComboBox({
                        fieldLabel: 'Type',
                        hiddenName:'lciType',
                        store: new Ext.data.SimpleStore({
                            fields: ['id', 'type'],
                               data :  lciType
                         }),               
                        displayField:'type',
                        typeAhead: false,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a type...',
                        selectOnFocus:true
                    }),
    
                    new Ext.form.ComboBox({
                        fieldLabel: 'Source',
                        hiddenName:'sType',
                        store: new Ext.data.SimpleStore({
                            fields: ['id', 'type'],
                               data :  sType
                         }),               
                        displayField:'type',
                        typeAhead: false,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a source...',
                        selectOnFocus:true
                    }),
                    
                    new Ext.form.ComboBox({
                        fieldLabel: 'Status',
                        hiddenName:'sStatus',
                        store: new Ext.data.SimpleStore({
                            fields: ['id', 'status'],
                               data :  sStatus
                         }),               
                        displayField:'status',
                        typeAhead: false,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a status...',
                        selectOnFocus:true
                    }),
                    
                    new Ext.form.DateField({
                        fieldLabel: 'Come-up',
                        name: 'comeUpDate',
                        allowBlank:true
                    })
        );
        editFrm.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
    
           editFrm.column({width:280,  style:'margin-left:10px', labelAlign: 'top', clear:true});
    
        editFrm.fieldset(
            {legend:'Comments'},
            
            new Ext.form.TextArea({
                fieldLabel: 'Comments',
                name: 'comments',
                grow: false,
                width: 255,
                height: 135,
                value: 'Detailed comments'
            })
            /*, new Ext.form.TextArea({
                fieldLabel: 'New Action',
                name: 'action',
                grow: false,
                width: 255,
                preventScrollbars:false
            })*/
    
        );
        editFrm.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
    
        editFrm.applyIfToFields({
            width:125
        });
    
        editFrm.addButton('Save');
        editFrm.addButton('Cancel');
    
        editFrm.render('form-ct4');
    
            }, // END init
            
            getDataSource: function() {
                return ds;
            }
            
            , toggleWest : function(link){
                        var west = layout.getRegion('west');
                        if(west.isVisible()){
                            west.hide();
                            link.innerHTML = 'Show Help';
                        }else{
                            west.show();
                            link.innerHTML = 'Hide Help';
                        }
                   } // end toggleWest
                   
                  
            , expandSouth : function(link){
                        var south = layout.getRegion('south');
                        south.resizeTo(350);                 
                        south.expand();
    
                    } // end expandSouth
                    
            , collapseSouth : function(link){
                         var south = layout.getRegion('south');
                        south.resizeTo(150);
                        south.collapse();
                    }  //end collapseSouth
            
        } // END return
    }(); // END sublayout
    
    Ext.EventManager.onDocumentReady(subLayout.init, subLayout, true);

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    That's too much code to read without being paid, which is probably why you have no replies!

    But the GridView's refresh won't load any new data. Is that what you want to do? Because if so, this might help: http://extjs.com/deploy/ext-1.1-beta...re.html#reload

  3. #3
    Ext User
    Join Date
    May 2007
    Posts
    6
    Vote Rating
    0
    novocent is on a distinguished road

      0  

    Default Thanks.

    Thanks.


    Thanks. That helped. I was able to fix the problem.

  4. #4
    Ext User
    Join Date
    Sep 2007
    Posts
    29
    Vote Rating
    0
    august is on a distinguished road

      0  

    Default


    could you post the html code?just want to test a bit

Thread Participants: 2