list、list-horizontal、list-search的理解

•         var store = Ext.create('Ext.data.Store', {
              //give the store some fields
              fields: ['firstName', 'lastName'],
  
              //filter the data using the firstName field
              //过滤数据使用firstName字段,
              sorters: 'firstName',
  
              //autoload the data from the server
              autoLoad: true,
  
              //setup the grouping functionality to group by the first letter of the firstName field
              //设置分组功能组的第一个字母firstName字段
              grouper: {
                  groupFn: function(record) {
                      return record.get('firstName')[0];
                  }
              },
  
              //setup the proxy for the store to use an ajax proxy and give it a url to load
              //the local contacts.json file
              proxy: {
                  type: 'ajax',
                  url: 'contacts.json'
              }
          }

  这则例子主要自动加载数据源，延后对数据源里的数据排序和整理

• {
              //give it an xtype of list for the list component
              xtype: 'list',
  
              //set the itemtpl to show the fields for the store
              //设定每层数据的模型
              itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
  
              //enable disclosure icons
              //能否使用左侧的图标按钮
              disclosure: true,
  
              //group the list
              //是否在头部用数据数列，也就是将所有的数据分组，在数据源时我们用的grouper在此起到了作用
              grouped: true,
  
              //enable the indexBar
              //左侧添加英文字符选择组器
              indexBar: true,
  
              //set the function when a user taps on a disclsoure icon
              //添加对组的事件点击触发，  e.stopEvent();函数主要防止冒泡事件上的传递
              onItemDisclosure: function(record, item, index, e) {
                  //show a messagebox alert which shows the persons firstName
                  e.stopEvent();
                  Ext.Msg.alert('Disclose', 'Disclose more info for ' + record.get('firstName'));
              },
  
              //bind the store to this list
              store: store
          };

   

    Ext.data.JsonP.request({
              url: url,
              callbackName: 'feedCb',
  
              success: function(data) {
                  Ext.Array.each(data.proposals, function(proposal) {
                      Ext.Array.each(proposal.speakers, function(speaker) {
                          // don't add duplicates or items with no photos.
                          if (speakerIds.indexOf(speaker.id) == -1 && speaker.photo) {
                              speakerIds.push(speaker.id);
  
                              speakerModel = Ext.create('Oreilly.model.Speaker', speaker);
                              speakerStore.add(speakerModel);
                          }
                      });
                  });
              }
          });

  这是一个简单的jsonp请求，jsonp请求主要运用与跨域请求，请求的数据中包含协定好的字符返回格式：Ext.data.JsonP.feedCb()，主要有callbackName定义

•     {
                      //give it an xtype of list for the list component
                      xtype: 'dataview',
  
                      height: 205,
                      //设置数据水平滚动
                      scrollable: 'horizontal',
                      //inline设置内联，如果没有设置inline所有的元素会聚集在一起，如果设置了，所有的数据元素将水平平铺，如果wrap设置为false，所有的元素可以左右拉动
                      inline: {
                          wrap: false
                      },
  
                      //set the itemtpl to show the fields for the store
                      itemTpl: '<img src="{photo}"><div>{first_name} {last_name}</div>',
  
                      //bind the store to this list
                      store: store
                  }

   

  {
              //give it an xtype of list
              xtype: 'list',
              //设置边框外形
              ui: 'round',
              //设置头部分组名称是否固定
              pinHeaders: false,
  
              //itemTpl defines the template for each item in the list
              itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
  
              //give it a link to the store instance
              store: this.getStore(),
              grouped: true,
              //数据为空时的显示
              emptyText: '<div style="margin-top: 20px; text-align: center">No Matching Items</div>',
              //数据选项是否可以被选择
              disableSelection: false,
  
              items: [
                  {
                      xtype: 'toolbar',
                      docked: 'top',
  
                      items: [
                          { xtype: 'spacer' },
                          {
                              xtype: 'searchfield',
                              placeHolder: 'Search...',
                              listeners: {
                                  scope: this,
                                  //搜索按钮右侧清空按钮事件的绑定
                                  clearicontap: this.onSearchClearIconTap,
                                  //监听键盘数据事件
                                  keyup: this.onSearchKeyUp
                              }
                          },
                          { xtype: 'spacer' }
                      ]
                  }
              ]
          };

  function(field) {
          //get the store and the value of the field
          var value = field.getValue(),
              store = this.getStore();
  
          //first clear any current filters on thes tore
          store.clearFilter();
  
          //check if a value is set first, as if it isnt we dont have to do anything
          if (value) {
              //the user could have entered spaces, so we must split them so we can loop through them all
              var searches = value.split(' '),
                  regexps = [],
                  i;
  
              //loop them all
              for (i = 0; i < searches.length; i++) {
                  //if it is nothing, continue
                  if (!searches[i]) continue;
  
                  //if found, create a new regular expression which is case insenstive
                  regexps.push(new RegExp(searches[i], 'i'));
              }
  
              //now filter the store by passing a method
              //the passed method will be called for each record in the store
              store.filter(function(record) {
                  var matched = [];
  
                  //loop through each of the regular expressions
                  for (i = 0; i < regexps.length; i++) {
                      var search = regexps[i],
                          didMatch = record.get('firstName').match(search) || record.get('lastName').match(search);
  
                      //if it matched the first or last name, push it into the matches array
                      matched.push(didMatch);
                  }
  
                  //if nothing was found, return false (dont so in the store)
                  if (regexps.length > 1 && matched.indexOf(false) != -1) {
                      return false;
                  } else {
                      //else true true (show in the store)
                      return matched[0];
                  }
              });
          }
      },

  sencha官方的有关数据源和输入的寻找和匹配方法

•    onSearchClearIconTap: function() {
          //call the clearFilter method on the store instance
          this.getStore().clearFilter();
      }

  清空store中查找匹配的数据源