2

sencha Search List を作成する際に必要な正確な結果を得るのに問題があります。リストだけを作成することはできましたが、実際に必要な結果はhttp://docs.sencha.com/touch/2-0/のようなものです。 #!/example/search-list例に従って似たようなものを構築しましたが、検索が機能していません。これを達成する方法について誰かが詳細な回答をくれることを願っています. 以下は、コントローラーから最後までの私のコードです。

これは私のコントローラーです Ext.define('List.controller.Main', { extends: 'Ext.app.Controller',

config: {
    refs: {
        main: 'mainpanel'
    },
    control: {
        'presidentlist': {
            disclose: 'showDetail'
        }
    }
},

showDetail: function(list, record) {
    this.getMain().push({
        xtype: 'presidentdetail',
        title: record.fullName(),
        data: record.getData()
    })
}

}); これは私のモデルです

Ext.define('List.model.President', {
extend: 'Ext.data.Model',
config: {
    fields: ['firstName', 'middleInitial', 'lastName']
},

fullName: function() {
    var d = this.data,
    names = [
        d.firstName,
        (!d.middleInitial ? "" : d.middleInitial + "."),
        d.lastName
    ];
    return names.join(" ");
}

});

これは私の店です

Ext.define('List.store.Presidents', {
extend: 'Ext.data.Store',

config: {
    model: 'List.model.President',
    sorters: 'lastName',
    grouper : function(record) {
        return record.get('lastName')[0];
    },
    data: [
        { firstName: "George", lastName: "Washington" },
        { firstName: "John", lastName: "Adams" },
        { firstName: "Thomas", lastName: "Jefferson" },
        { firstName: "James", lastName: "Madison" },


    ]
}

}); これは私のビューで、私のビュー フォルダの下にあります。

Ext.define('List.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'mainpanel',
requires: [
    'List.view.PresidentList',
    'List.view.PresidentDetail'
],

config: {
    items: [{
        xtype: 'presidentlist'
    }]
}

});

まだ私のビューフォルダーPresidentDetailの下にあります

Ext.define('List.view.PresidentDetail', {
extend: 'Ext.Panel',
xtype: 'presidentdetail',

config: {
    title: 'Details',
    styleHtmlContent: true,
    scrollable: 'vertical',
    tpl: [
        'Why Not Work {firstName}  {lastName}!'
    ]
}

});

まだビューフォルダーの下に、PresidentListという別のファイルがあります

Ext.define('List.view.PresidentList', {
extend: 'Ext.List',
xtype: 'presidentlist',
requires: ['List.store.Presidents'],

config: {
     xtype:'container',
    title: 'Why Not Work',
    grouped: true,
    itemTpl: '{firstName} {lastName}',
    styleHtmlContent: true,
    store: 'Presidents',
    onItemDisclosure: true,

     items: [

            {

            xtype: 'searchfield',
                name:'searchfield',
                placeHolder:'Search',
            },

         {

            xtype: 'spacer',
               height: 25
            },
           ] 
}

});

これは私の App.js ファイルです

Ext.application({ name: 'リスト',

requires: [
    'Ext.field.Search'
],

controllers: ['Main'],
views:  ['Main'],
stores: ['Presidents'],
models: ['President'],

launch: function() {
    Ext.Viewport.add({
        xtype: 'mainpanel'
    });
}

});

申し訳ありませんが、アプリ全体をここに投稿する必要があります。できるだけ詳細な質問を取得しようとしています。現在、私の現在のアプリはこのように表示されますが、検索フィールドは機能していません。助けが必要です よろしくお願いします

私の現在の出力

私は真剣に助けが必要です。私が達成したい結果は次のようなものです。ユーザーがフィールドを検索しようとすると、R から始まる保存された名前のリストがすべて表示されます。 これは私が必要なものです

ご協力ありがとうございます。

4

1 に答える 1

2

実際には、検索フィールドの変更をリッスンし、値に基づいてストアをフィルター処理する必要があります。

これは、コントローラーに行う必要がある種類の変更です。

config: {
    refs: {
        main: 'mainpanel'
    },
    control: {
        'presidentlist': {
            disclose: 'showDetail'
        },

        'searchfield': {
            keyup: 'doSearch'
        }
    }
},

showDetail: function(list, record) {
    this.getMain().push({
        xtype: 'presidentdetail',
        title: record.fullName(),
        data: record.getData()
    })
},

doSearch: function(field) {
    var value   = field.getValue(),
        store   = this.getPresidentList().getStore(),
        query   = new RegExp(value, 'i');

    store.filter('firstName', query)
}

また、姓と名を組み合わせた別のフィールド (例: fullName) をモデルに追加し、それに対して検索します。

于 2012-05-15T08:35:43.477 に答える