title: ExtJS 4.2 - Bind Date Picker to Grid - Newbie Q
body: <p>I am new to ExtJS 4 and struggling at times with the learning curve.  I have followed the documentation on sencha's site for MVC concept for basic structure of my app, however I am having difficulty determining where/how to implement certain components/handlers/listeners as I don't quite have the feel for this frame work yet.</p>
  
  <p>So, here is my question.... (Yes I did look at other posts on SO but I think at this point I am too stupid to identify and apply what similar posters may have come accross to solve my issues)</p>
  
  <p>How do I bind a date field in my grid to the date picker date that is selected and vice versa? If I select a date in my date picker I would like to have my grid load relevant rows from my db.  If I select a row in my grid I would like to see the date picker reflect the date in the selected row.</p>
  
  <p>Can someone give me a narrative of the approach i should be taking? I have seen some code examples but I don't clearly see an obvious preferred method or the way it should be done. If there is a link someone can give me to look at I will be happy to study.</p>
  
  <p>This is my first post on SO so please forgive me for any etiquette I am lacking as well as other annoying things.  Thanks in advance!</p>
  
  <p>Store:</p>
  
  <pre><code>Ext.define('AM.store.Users', {
  extend: 'Ext.data.Store',
  model: 'AM.model.User',
  autoLoad: true,
  autoSync:true,
  pageSize:50,
  proxy:
  {
      type: 'ajax',
      api:
      {
          read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
          update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
      },
      reader:
      {
          type: 'json',
          root: 'data',
          successProperty: 'success',
          totalProperty : 'dataset'
      }}
  </code></pre>
  
  <p>});</p>
  
  <p>model:</p>
  
  <pre><code>Ext.define('AM.model.User', {
  extend: 'Ext.data.Model',
  fields: [
          {name: 'message_id',type: 'textfield'},
          {name: 'recip_email',type: 'textfield'},
          {name: 'unix_time_stamp',type:'datefield'}
          ]
  </code></pre>
  
  <p>});</p>
  
  <p>View:</p>
  
  <pre><code>Ext.define('AM.view.user.List' ,{
  extend: 'Ext.grid.Panel',
  alias: 'widget.userlist',
  title: 'All Users',
  store: 'Users',
  plugins:[Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 1})],
  dockedItems: [{ xtype: 'pagingtoolbar',
                  store: 'Users',
                  dock: 'bottom',
                  displayMsg: 'Displaying Records {0} - {1} of {2}',
                  displayInfo: true}],
  
  
  initComponent: function() {
  
      this.columns = [
                      Ext.create('Ext.grid.RowNumberer',
                          {
                          resizable: true,
                          resizeHandles:'all',
                          align: 'center',
                          minWidth: 35,
                          maxWidth:50
                          }),
                      {
                      header: 'Name',
                      dataIndex: 'message_id',
                      flex: 1,
                      editor:'textfield',
                      allowBlank: false,
                      menuDisabled:true
                      },
                      {
                      header: 'Email',
                      dataIndex: 'recip_email',
                      flex: 1,
                      editor:'textfield',
                      allowBlank: false,
                      menuDisabled:true
                      },
                      {
                      header: 'Date Time',
                      dataIndex: 'unix_time_stamp',
                      width: 120,
                      menuDisabled:true,
                      renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                          field:{ xtype:'datefield',
                                  autoSync:true,
                                  allowBlank:false,
                                  editor: new Ext.form.DateField(
                                          {format: 'm/d/y'})  }
                      }];
  
  
  
      this.callParent(arguments);
  
  
  },
  </code></pre>
  
  <p>});</p>
  
  <p>Viewport:</p>
  
  <pre><code>Ext.Loader.setConfig({enabled:true});
  </code></pre>
  
  <p>// This array is for testing.
  dateArray = ["12/14/2013","12/16/2013","12/18/2013","12/20/2013"];</p>
  
  <p>Ext.application({
      requires: ['Ext.container.Viewport'],
      name: 'AM',
      appFolder: 'app',
      controllers: ['Users'],</p>
  
  <pre><code>launch: function() {
  
      Ext.create('Ext.container.Viewport', {
  
      layout: 'border',
  
       items:
          [
              {
  
              region: 'center',
              //layout:'fit',
              title:'The Title',
              xtype: 'tabpanel', // TabPanel itself has no title
              activeTab: 0,      // First tab active by default
              items:
              [{
                  xtype: 'userlist',
                  listeners:
                  {
                      select: function(selModel, record, index, options)
                      {
                          // do something with the selected date
                          // Ext.Msg.alert(record.data.message_id, record.data.recip_email +'&lt;br&gt; ' + record.data.unix_time_stamp);
                      }
                  }
              }]
  
              },
              {
              region: 'west',
              layout:'fit',
              xtype: 'tabpanel',
              activetab:0,
              collapsible:false,
              split: false,
              title: 'The Title',
  
              width:178,
              maxWidth:400,
              height: 100,
              minHeight: 100,
              items:
              [
              {
                  title: 'Tab 1',
                  xtype:'panel',
                  items:
                      [{
                      xtype: 'datepicker',
                      title: 'mydate',
                      minDate: new Date('12/15/2013'),
                      maxDate: new Date(),
  
                      // Disable dates is set to invert dates in array
                      disabledDates:["^(?!"+dateArray.join("|")+").*$"],
                      // disabledDates:["^("+dateArray.join("|")+").*$"],
  
                      handler: function(picker, date)
                              {
                              // do something with the selected date
                              Ext.Msg.alert('date picker example in init2.js');
                              }
                      }]
              },
              {
                  title: 'Tab 2',
                  html: 'ers may be added dynamically  - Others may be added dynamically',
              }
  
              ]
  
              }
          ]
  
      });
  }
  </code></pre>
  
  <p>});</p>
  
  <p>Update to Datepicker in Viewport:</p>
  
  <p>One additional note is that i notice a property attribute in the JSON packet that has the date included even without making you suggested changes to the store.  I notice there may be a bug in the link you provided?? If i set to false or remove it altogether from my store it has same behavior and is included in my JSON packet.</p>
  
  <p>Do I need to encode the url also? when I click on a row in my grid and hit the update button i recive the grid row on my server side with what appears to be already url encoded by extjs perhaps?</p>
  
  <pre><code>Ext.Loader.setConfig({enabled:true});
  </code></pre>
  
  <p>// This array is for testing.
  dateArray = ["12/14/2013","12/16/2013","12/18/2013","12/20/2013"];</p>
  
  <p>Ext.application({
      requires: ['Ext.container.Viewport'],
      name: 'AM',
      appFolder: 'app',
      controllers: ['Users'],</p>
  
  <pre><code>launch: function() {
  
      Ext.create('Ext.container.Viewport', {
  
      layout: 'border',
  
       items:
          [
              {
  
              region: 'center',
              //layout:'fit',
              title:'The Title',
              xtype: 'tabpanel', // TabPanel itself has no title
              activeTab: 0,      // First tab active by default
              items:
              [{
                  xtype: 'userlist',
                  listeners:
                  {
                      select: function(selModel, record, index, options)
                      {
                          // do something with the selected date
                          // Ext.Msg.alert(record.data.message_id, record.data.recip_email +'&lt;br&gt; ' + record.data.unix_time_stamp);
                      }
                  }
              }]
  
              },
              {
              region: 'west',
              layout:'fit',
              xtype: 'tabpanel',
              activetab:0,
              collapsible:false,
              split: false,
              title: 'The Title',
  
              width:178,
              maxWidth:400,
              height: 100,
              minHeight: 100,
              items:
              [
              {
                  title: 'Tab 1',
                  xtype:'panel',
                  items:
                      [{
                      xtype: 'datepicker',
                      minDate: new Date('12/15/2013'),
                      maxDate: new Date(),
                      // Disable dates is set to invert dates in array
                      disabledDates:["^(?!"+dateArray.join("|")+").*$"],
                      // disabledDates:["^("+dateArray.join("|")+").*$"],
  
                      handler: function(picker, date)
                              {
  
                              // do something with the selected date
                              // Ext.Msg.alert('date picker example in init2.js' + '&lt;br&gt;' + Ext.Date.format(date,'m/d/Y'));
  
                              console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
  
                              // get store by unique storeId
                              var store = Ext.getStore('Users');
  
                              // clear current filters
                               store.clearFilter(true);
  
                              // filter store
                              store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y'));
  
                              // store.proxy.extraParams = { key:'test'};
                               store.load();
                              }
                      }]
              },
              {
                  title: 'Tab 2',
                  html: 'ers may be added dynamically  - Others may be added dynamically',
              }
  
              ]
  
              }
          ]
  
      });
  }
  </code></pre>
  
  <p>});</p>