1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    16
    Vote Rating
    0
    garlapatikk is on a distinguished road

      0  

    Default Displaying Dynamic colums for Grid Panel

    Displaying Dynamic colums for Grid Panel


    I had tried the code displaying dynamic columns in gridpanel but i was not able to do the same.
    Please find the code below.can any body suggest how to do for the below code.along with static columns.
    demo.js.

    Code:
    Ext.require('Ext.grid.GridPanel');
     Ext.require('Ext.data.*'); 
     Ext.require('Ext.form.Panel');
     
    Ext.onReady(function(){
         
        
            var dstore = new Ext.data.JsonStore({
    
           proxy:{    
                type:'ajax',
                url:'getvalues.do?param=submitGrid',
          reader:{
               type:'json',    
               root: 'employee',
               totalProperty: 'total'
            }
           
               
                }  
            ,fields:[{name:'fu',type:'string'},{name:'plant',type:'string'},{name:'part',type:'string'},{name:'partname',type:'string'},{name:'duns',type:'string'}] ,  
                      autoLoad: true 
                      
                        
                      
        });
            
            
          
     
           
         
           
           var grid = new Ext.grid.GridPanel({
           store: dstore,
           columnLines: true,
               columns: [
              
               {id:'fu', locked:true,header: "F/U", width: 30,  sortable: true, dataIndex: 'fu'},
               {id: 'plant',locked:true, header: "PLANT", width: 40, sortable: true, dataIndex: 'plant'},
               {id: 'part',locked:true, header: "PART", width: 34, sortable: true, dataIndex: 'part' },
               {id: 'partname',locked:true, header: "PART NAME", width: 65, sortable: true, dataIndex: 'partname'},
               {id: 'duns', header: "DUNS", width: 40, sortable: true, dataIndex: 'duns'}
               ],
               viewConfig: {
                   stripeRows: true
               },
               stripeRows: true,
               autoExpandColumn: 'data',
               height:350,
               width: 896,
             
               title:'Demo Data'
           });
           
           var search =   Ext.create('Ext.form.Panel', {
                title: 'Simple Form',
                bodyPadding: 5,
                width: 350,
              standardSubmit: true, 
                // The form will submit an AJAX request to this URL when submitted
              //  url: 'http://localhost:8080/JsonEx/getvalues.do?param=submitGrid',
              //url: 'http://localhost:7001/JsonEx/getvalues.do?param=submitForm',
              url: 'getvalues.do?param=submitForm',
                // Fields will be arranged vertically, stretched to full width
                layout: 'anchor',
                defaults: {
                    anchor: '100%'
                },
    
                // The fields
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'Search Regular Expression',
                    name: 'pattern',
                    allowBlank: false
                } ],
               
                
               
                // Reset and Submit buttons
                buttons: [ 
                           {
                              text: 'Reset',
                              handler: function() {
                             this.up('form').getForm().reset();
                          }
                        },     
                           {
                    text: 'Submit',
                    formBind: false, //only enabled once the form is valid
                    disabled: false,
                   // handler: function(btn, evt) {
                            //search.getForm().submit();
                    handler: function() {
                        var form = this.up('form').getForm();
                        if (form.isValid()) {
                            
                            
                            form.submit({
                                success: function(form, action) {
                                  // Ext.Msg.alert('Success', action.result.msg);
                                 Ext.Msg.alert('Success');
                                },
                                failure: function(form, action) {
                                    //Ext.Msg.alert('Failed', action.result.msg);
                                    Ext.Msg.alert('Failed');
                                }
                                
                            });
                        }
                    }
                }]
                
               // renderTo: Ext.getBody()
            });
       
          
       
           search.render('search_form');
           grid.render('search_results');
       });
    Thanks
    Kiran
    Last edited by scottmartin; 5 Jul 2012 at 8:54 AM. Reason: Please format your code

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    In reviewing your code, it seems you are setting up a grid and a form with defined columns/fields

    Your title suggests you want dynamic columns. Can you be more specific to what you require?

    Scott.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    16
    Vote Rating
    0
    garlapatikk is on a distinguished road

      0  

    Default


    on the intial load of page the the grid will displays columns till DUNS will be displayed.On click of submit button ,other than getting the data for duns,i should also add dynamic columns(which are next 30 weeks are dates these should be displayed after duns ) when i click submit button.

    Thanks,
    Kiran

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    If you are adding new columns to your existing grid, it would be beneficial to create a new list of columns to an array and then use grid.reconfigure() to change the grid display.

    You can simply merge the 2 column arrays.

    Scott.

Thread Participants: 1