title: Rows hidden in a grid JS EXT
body: <p>I need to simply add a function in my grid that hide the rows when the user makes the first access. After that, by the icon of minimize/expand that already appears in my grid, the user can expand the group and see the rows. My code is that:</p>
  
  <pre><code>// create the grid
  var grid = Ext.create('Ext.grid.Panel', {
      store: store,
      hideHeaders: true,
      features: [groupingFeature],
  
      columns: [
          {text: "Questions",groupable: false, flex: 1, dataIndex: 'species',  sortable: true}
      ],
      width: 250,
      height:260,
      split: true,
      region: 'west'
  });
  
  // define a template to use for the detail view
  
  var bookTplMarkup = [
      '{resposta}&lt;br/&gt;'
  ];
  
  var bookTp1 = Ext.create('Ext.Template', bookTplMarkup);
  Ext.create('Ext.Panel', {
      renderTo: 'binding-example',
      frame: true,
      width: 720,
      height: 570,
      layout: 'border',
      items: [
          grid, {
              id: 'detailPanel',
              autoScroll: true,
              region: 'center',
              bodyPadding: 7,
              bodyStyle: "background: #ffffff;",
              html: 'Select one option'
      }]
  });
  </code></pre>
  
  <p>Where I add the nedded functions?</p>