navigationview的理解

•   xtype: 'mainview',
  
      config: {
          //如果设置为自动销毁，那么原来绑定的事件会消失，不会重新绑定
          autoDestroy: false,
  
          navigationBar: {
              ui: 'sencha',
              items: [
                  {
                      xtype: 'button',
                      id: 'editButton',
                      text: 'Edit',
                      //控制按钮在最右侧
                      align: 'right',
                      hidden: true,
                      //在android上按钮消失的官方方法
                      hideAnimation: Ext.os.is.Android ? false : {
                          type: 'fadeOut',
                          duration: 200
                      },
                       //在android上按钮出现的官方方法
                      showAnimation: Ext.os.is.Android ? false : {
                          type: 'fadeIn',
                          duration: 200
                      }
                  },

  //这是一个很常用的sencha的mvc用法
  Ext.define('AddressBook.controller.Application', {
      extend: 'Ext.app.Controller',
  
      config: {
       //定义别名替代引用，就是用一个字符串替代应用程序上控件的名字
          refs: {
              //xtype引用，就是使用xtype寻找，导航面板用main代替
              main: 'mainview',
               //id引用，就是使用id寻找
              editButton: '#editButton',
              contacts: 'contacts',
              showContact: 'contact-show',
              editContact: 'contact-edit',
              saveButton: '#saveButton'
          },
  
          control: {
             //事件绑定，,对导航面板的push和pop触发时的引用
              main: {
                  push: 'onMainPush',
                  pop: 'onMainPop'
              },
              editButton: {
                  tap: 'onContactEdit'
              },
             //list列表选项事件绑定
              contacts: {
                  itemtap: 'onContactSelect'
              },
              saveButton: {
                  tap: 'onContactSave'
              },
              //文本框改变事绑定
              editContact: {
                  change: 'onContactChange'
              }
          }
      },
  
      onMainPush: function(view, item) {
          var editButton = this.getEditButton();
  
          if (item.xtype == "contact-show") {
              this.getContacts().deselectAll();
  
              this.showEditButton();
          } else {
              this.hideEditButton();
          }
      },
  
      onMainPop: function(view, item) {
          if (item.xtype == "contact-edit") {
              this.showEditButton();
          } else {
              this.hideEditButton();
          }
      },
  
      onContactSelect: function(list, index, node, record) {
          var editButton = this.getEditButton();
          //实例化展示面板，然后加入导航面板中
          if (!this.showContact) {
              this.showContact = Ext.create('AddressBook.view.contact.Show');
          }
  
          // Bind the record onto the show contact view
          this.showContact.setRecord(record);
  
          // Push the show contact view into the navigation view
          //导入导航面板中的方法
          this.getMain().push(this.showContact);
      },
  
      onContactEdit: function() {
          if (!this.editContact) {
              this.editContact = Ext.create('AddressBook.view.contact.Edit');
          }
  
          // Bind the record onto the edit contact view
          this.editContact.setRecord(this.getShowContact().getRecord());
  
          this.getMain().push(this.editContact);
      },
  
      onContactChange: function() {
          this.showSaveButton();
      },
  
      onContactSave: function() {
          var record = this.getEditContact().saveRecord();
  
          this.getShowContact().updateRecord(record);
          //导航面板中返回上层的方法
          this.getMain().pop();
      },
  
      showEditButton: function() {
          //组件在控制器中寻找的方法，用get+大写字母开头的替代名
          var editButton = this.getEditButton();
  
          if (!editButton.isHidden()) {
              return;
          }
  
          this.hideSaveButton();
  
          editButton.show();
      },
  
      hideEditButton: function() {
          var editButton = this.getEditButton();
  
          if (editButton.isHidden()) {
              return;
          }
  
          editButton.hide();
      },
  
      showSaveButton: function() {
          var saveButton = this.getSaveButton();
  
          if (!saveButton.isHidden()) {
              return;
          }
  
          saveButton.show();
      },
  
      hideSaveButton: function() {
          var saveButton = this.getSaveButton();
  
          if (saveButton.isHidden()) {
              return;
          }
  
          saveButton.hide();
      }
  });

   

•  //listeners一般在config中，一般处理事件的监听和绑定，
  //这则例子是对'textfield'的委托，'onKeyUp'的监听和绑定
   listeners: {
              delegate: 'textfield',
              keyup: 'onKeyUp'
          },
  //还有例外一种写法
   {
                  fn: 'onKeyUp',
                  event: 'keyup',
                  delegate: 'textfield'
              },

   

   //一般所有的组件中都有fireEvent这个方法，方便立即触发所有的事件监听
  onKeyUp: function() {
          this.fireEvent('change', this);
      }