使用searchfield在Sencha Touch中获取搜索值

时间:2013-07-30 05:58:25

标签: search sencha-touch-2 predicate

我想在搜索字段中显示预测文本,来自服务器的预测文本的值。到目前为止,这是我的代码:

查看:

Ext.define('MyApp.view.AutoSearch', {
    extend: 'Ext.dataview.List',
    alias : 'widget.mainPanel',

    config: {
     store : 'AutoSearchStore',



     itemTpl:  '<div class="myWord">'+
         '<div>Word is --<b>{name}</b>--- after search!!!</div>' +
         '</div>',

     emptyText: '<div class="myWord">No Matching Words</div>',

  items: [
                 {
                     xtype: 'toolbar',
                     docked: 'top',

                     items: [
                         {
                             xtype: 'searchfield',
                             placeHolder: 'Search...',
                             itemId: 'searchBox'
                         }
                     ]
                 }
             ]  

    }
});

商品

Ext.define('MyApp.store.AutoSearchStore',{
extend: 'Ext.data.Store', 

config:
{
    model: 'MyApp.model.AutoSearchModel',
    autoLoad:true,
    id:'Contacts',
    proxy:
    {
        type: 'ajax',
      url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363', 

        reader:
        {
                rootProperty:''
        }
    }
}
});

型号:

Ext.define('MyApp.model.AutoSearchModel', {
    extend: 'Ext.data.Model',
    requires: ['MyApp.model.AutoSearchModelMenu'],
    config: {
        fields: [
        {name:'data', mapping: 'data'},
        {name: 'name'},
        ],       
    },
});

Ext.define('MyApp.model.AutoSearchModelMenu', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'name',
        ],
       belongsTo: "MyApp.model.AutoSearchModel"
    }
});

控制器:

Ext.define('MyApp.controller.SearchAutoComplete', {
 extend : 'Ext.app.Controller',

 config: {
  profile: Ext.os.deviceType.toLowerCase(),
  stores : ['MyApp.store.AutoSearchStore'],
  models : ['MyApp.model.AutoSearchModel'],
  refs: {
   myContainer: 'mainPanel'
  },
  control: {
   'mainPanel': {
    activate: 'onActivate'
   },
   'mainPanel searchfield[itemId=searchBox]' : {
    clearicontap : 'onClearSearch',
    keyup: 'onSearchKeyUp'
   }
  } 

 },

 onActivate: function() {
  console.log('Main container is active--Search');
 },

 onSearchKeyUp: function(searchField) {
  queryString = searchField.getValue();
  console.log(this,'Please search by: ' + queryString);

  var store = Ext.getStore('AutoSearchStore');
  store.clearFilter();

  if(queryString){
   var thisRegEx = new RegExp(queryString, "i");
   store.filterBy(function(record) {
    if (thisRegEx.test(record.get('name'))) {
     return true;
    };
    return false;
   });
  }

 },

 onClearSearch: function() {
  console.log('Clear icon is tapped');
  var store = Ext.getStore('AutoSearchStore');
  store.clearFilter();
 },

 init: function() {
  console.log('Controller initialized for SearchAutoComplete');
 }

});

Json数据看起来像:

"data":[
{
    "name":"paint",
    "author":"admin",
    "word_id":"1",
    "category":"Business",
    "is_favourite":"yesStar"
},
{
    "name":"abacus",
    "author":"admin",
    "word_id":"2",
    "category":"Education",
    "is_favourite":"yesStar"
},
{
    "name":"abate",
    "author":"admin",
    "word_id":"3",
    "category":"Education",
    "is_favourite":"noStar"
},
{
    "name":"testing adsf",
    "author":"admin",
    "word_id":"7",
    "category":"Education",
    "is_favourite":"noStar"
},
{
    "name":"sprite",
    "author":"admin",
    "word_id":"6",
    "category":"Business",
    "is_favourite":"noStar"
},
{
    "name":"newword",
    "author":"admin",
    "word_id":"8",
    "category":"Architecture",
    "is_favourite":"noStar"
}
]
})

如果我输入“A”,那么它会显示No Matching Words,但我在服务器上的json上有来自“A”的单词。如何解决这个问题呢?

任何想法!

代码来源Link

1 个答案:

答案 0 :(得分:1)

我不知道你为什么要使用两个模型,但只需要在AutoSearchStore中指定一个:

nbline=1
        while read -r content
        do
                line=$content
                if [ "${line:0:1}" != "#" ]; then #if this is not a comment
                        line=$(echo -e "$line" | grep "$user") #$line keep only lines with the $user choose
                        if [ ! -z "$line" ];then #if this is not a void $line
                                minute=$(echo -e "$line" | awk '{print $1}') #0-59
                                hour=$(echo -e "$line" | awk '{print $2}')   #0-23
                                dom=$(echo -e "$line" | awk '{print $3}')    #1-31
                                month=$(echo -e "$line" | awk '{print $4}')  #1-12
                                dow=$(echo -e "$line" | awk '{print $5}')    #0-6 (0=Sunday)
                                cmd=$(echo -e "$line" | awk '{$1=$2=$3=$4=$5=$6=""; print $0}')    #command
                                cmd=$(echo -e "$cmd" | tr ' ' _) #replace space by '_' because it's annoying later
                                str=$str' "'$nbline'" "'$minute'" "'$hour'" "'$dom'" "'$month'" "'$dow'" "'$user'" "'$cmd'" '
                        fi
                fi
                nbline=$(($nbline+1))
        done < /etc/crontab

而不是

reader:
        {
                rootProperty:'data'
        }

在列表中获得预期结果。

希望这会有所帮助:)