Results 1 to 4 of 4

Thread: repition of grids in Extjs4 mvc

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    5
    Vote Rating
    0
      0  

    Exclamation repition of grids in Extjs4 mvc

    Json Format :
    -------------


    {
    "vehicleStockString": "123",
    "eventDescription": "red",
    "bodyStyleDesc": "AWD"
    },
    {
    "vehicleStockString": "456",
    "eventDescription": "blue",
    "bodyStyleDesc": "SWD"
    }


    I want to display this data in two grids 1st grid should have first object data and second grid should have the 2nd object data


    in below format in attachmentrepeats.jpg

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    64
    Answers
    2
    Vote Rating
    0
      0  

    Default

    wow.. i would like to learn this. post your code as u complete this.

    Thanks
    Punith

  3. #3
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
      0  

    Default

    This should be cleaned up for MVC usage:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Repitition of Grids</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    
    <script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
    <script type="text/javascript">
    Ext.onReady(function() {
       
       Ext.define('VehicleGrid', {
         extend: 'Ext.grid.Panel',
         alias: 'widget.vehiclegrid',
         columns: [
           {header: 'Veh. Stock', dataIndex: 'vehicleStockString', sortable: true, width: 60},
           {header: 'Desc.', dataIndex: 'eventDescription', sortable: true, width: 80},
           {header: 'Body Style', dataIndex: 'bodyStyleDesc', sortable: true, flex: 1},
         ],
         margin: 5,
         store: {
           fields: [
             {name: 'vehicleStockString', type: 'string'},
             {name: 'eventDescription', type: 'string'},
             {name: 'bodyStyleDesc', type: 'string'}
           ],
           data: []
         }
       });
       
       Ext.create('Ext.window.Window', {
         height: 300,
         layout: {
           type: 'vbox',
           align: 'stretch'
         },
         listeners: {
           afterrender: function(component, eOpts) {
             //
             // Use an Ajax request to retrieve your data and populate the grids in the 
             // 'success' method.
             // Ext.Ajax.request({
             //   url: 'someJsonUrl',
             //   success: function(result, request) {
             //      var jsonData = Ext.JSON.decode(result.responseText);
             //      // populate grids here.
             //   }
             //
             // });
              
             // Dummy up data array for demo.
             var jsonData = [{
               "vehicleStockString": "123",
               "eventDescription": "red",
               "bodyStyleDesc": "AWD"
               },
               {
               "vehicleStockString": "456",
               "eventDescription": "blue",
               "bodyStyleDesc": "SWD"
             }];
             
             var grids = component.query('grid');
             
             // note that loadData() requires an Array as its input argument, hence
             // the brackets around the jsonData.
             grids[0].getStore().loadData([jsonData[0]]);
             grids[1].getStore().loadData([jsonData[1]]);
           }
         },
         title: 'Repitition of Grids',
         width: 400,
         items: [{
           xtype: 'vehiclegrid',
           flex: 1
         },{
           xtype: 'vehiclegrid',
           flex: 1
         }]
       }).show();
    });
    
    </script>
    </head>
    
    <body>
    </body>
    </html>

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    51
    Vote Rating
    0
      0  

    Default

    Hi,
    This code is repeating the grid but not able to put the data using extjs 4.0.7a. Please let us know if something else is required in the code which is specific to extjs 4.0.7a.

    Thanks,
    Shrinivas

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •