2

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

看法：

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”的单词。如何解决这个问题呢？

任何想法！

代码源链接

4

1 回答 1

1

我不知道您为什么使用两个模型，但只需要在 AutoSearchStore 中指定一件事：

reader:
        {
                rootProperty:'data'
        }

代替

reader:
        {
                rootProperty:''
        }

获得列表中的预期结果。

希望这会有所帮助:)

于 2015-07-16T12:37:07.487 回答