0

ここに2つの簡単な質問...この例をどのように使用できますか

http://try.sencha.com/touch/2.0.0/examples/list-search/

検索可能なリストの、しかし新しいビューで開かれましたか?この例では、app.jsでメインアプリケーションとして定義されていますが、「FirstApp.view.searchlist」で使用したいと思います。

答えはとても簡単ですが、私はまだ若いグラスホッパであり、正しい方向に進む必要があります。

また、例のように埋め込みストアからデータをプルするのではなく、次のように定義されている外部/プロキシJSONストアからデータをプルするように変更したいと思います。

店:

Ext.define('FirstApp.store.StudentStore',{
extend:'Ext.data.Store',

config:{

    autoLoad:true,
    model:'FirstApp.model.people',
    sorters: 'lastName',
    proxy:{
        type:'ajax',
        url:'http://xxxyyyzzz.com/data/dummy_data.json',
        reader:{
            type:'json',
            rootProperty:'results'
        }
    }
}
});

モデル:

Ext.define('FirstApp.model.people', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['firstName', 'lastName' , 'image','status', 'phone','rank','attendance', 'discipline','recent']
    }
});

では、データストアとモデルを使用して、その例をアプリケーション内の「ビュー」に変換するにはどうすればよいでしょうか。

どんな助けでも大歓迎です!ありがとうございました!

ジェイク

- - - - - -アップデート - - - - - - -

素晴らしいですね。私が見つけた別のチュートリアルとあなたのメソッドを組み合わせることで、検索機能(ストーキング)を実装することができました。もう1つ質問があります...とても簡単に思えますが、難しいです!アイテムを選択/クリックした後、新しい「詳細」ビューを開くにはどうすればよいですか?

検索リスト:

Ext.define('FirstApp.view.MainPanel', {
extend: 'Ext.dataview.List',
alias : 'widget.mainPanel',

config: {
    store : 'Students',

    itemTpl:
        '<h1>{firstName:ellipsis(45} {lastName:ellipsis(45)}</h1>' ,
    itemCls:'place-entry',

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

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

詳細ビュー(検索リスト/メインパネルビューから名前をクリックしたときに開きたい):

Ext.define('FirstApp.view.Details',{
    extend:'Ext.Panel',
    xtype:'details',
    config:{
    layout:'fit',
    tpl:'<div class="image_container"><img src="{image}"></div>' +
        '<h1>{firstName:ellipsis(25)} {lastName:ellipsis(25)}</h1>'+
        '<div class="status_container">{status:ellipsis(25)}</div> '+
        '<div class="glance_container">    <div class="value_box"><div class="value_number"> {rank:ellipsis(25)}</div> <p class="box_name">Rank</p> </div>    <div class="value_box"><div class="value_number"> {attendance:ellipsis(25)}</div> <p class="box_name" style="margin-left: -10px;">Attendance</p> </div>  <div class="value_box"><div class="value_number">{discipline:ellipsis(25)}</div> <p class="box_name" style="margin-left: -4px;">Discipline</p> </div>    <div class="value_box"><div class="value_number"> {recent:ellipsis(25)}</div> <p class="box_name">Recent</p> </div> </div> '+
        '<h2>Phone:</h2> <div class="phone_num"><p><a href="tel:{phone:ellipsis(25)}">{phone:ellipsis(25)}</a></p></div>'+
        '<h3>Some info:</h3><p>Round all corners by a specific amount, defaults to value of $default-border-radius. When two values are passed, the first is the horizontal radius and the second is the vertical radius.</p>',

    scrollable:true,
    styleHtmlContent:true,
    styleHtmlCls:'details'
}

})

検索コントローラー:

Ext.define('FirstApp.controller.SearchController', {
    extend : 'Ext.app.Controller',

    config: {
        profile: Ext.os.deviceType.toLowerCase(),
        stores : ['StudentStore'],
        models : ['people'],
        refs: {
            myContainer: 'MainPanel',
            placesContainer:'placesContainer'
        },
        control: {
            'mainPanel': {
                activate: 'onActivate'
            },
            'mainPanel searchfield[itemId=searchBox]' : {
                clearicontap : 'onClearSearch',
                keyup: 'onSearchKeyUp'
            },
            'placesContainer places list':{
                itemtap:'onItemTap'
            }
        }

    },

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

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

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

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

    },

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



    init: function() {
        console.log('Controller initialized');
    },
    onItemTap:function(list,index,target,record){  // <-----NOT WORKING 
        this.getPlacesContainer().push({
            xtype:'details',
            store:'Students',
            title:record.data.name,
            data:record.data
        })

    }
});
4

1 に答える 1

0

良い質問。リストまたはデータビューを作成しようとしていると思います。ここで重要なのは、ストアに「storeId」を与えることです。私はあなたの店を以下に変更しました:

Ext.define('FirstApp.store.StudentStore',{
    extend:'Ext.data.Store',
    config:{
        storeId: 'Students', // Important for view binding and global ref
        autoLoad:true,
        model:'FirstApp.model.people',
        sorters: 'lastName',
        proxy:{
            type:'ajax',
            url:'http://xxxyyyzzz.com/data/dummy_data.json',
            reader:{
                type:'json',
                rootProperty:'results'
            }
        }
    }
});

次に、ビュー内で、バインドするストアを参照します。これは私のアプリケーションの1つからのリストビューの例です。configオブジェクトに上記のストアを参照する'store'があることに注意してください。

Ext.define('app.view.careplan.CarePlanTasks', {
    extend: 'Ext.dataview.List',
    xtype: 'careplanTasks',
    requires: [
        'app.view.template.CarePlan'
    ],
    config: {
        store: 'Students', // Important!  Binds this view to your store
        emptyText: 'No tasks to display',
        itemTpl: Ext.create('app.view.template.CarePlan'),
    },

    constructor : function(config) {
        console.log('CarePlan List');
        this.callParent([config]);
    }
});

これでstoreIdができたので、次のようにして、アプリケーションのどこからでもこのストアにアクセスできます。

Ext.getStore('Students')

loadメソッドを呼び出すことによって、サーバーからレコードをロードすることもできます。

Ext.getStore('Students').load();

これはアプリケーションのどこでも実行できますが、通常はコントローラーで実行するのが最適です。

お役に立てれば。

=======アップデートのアップデート======

したがって、コードを見ると、リストビューとコントローラーを変更する必要があると思います。'FirstApp.view.MainPanel'にxtype:'MainPanel'を指定します。次に、コントローラーの構成を次のように変更します。

config: {
    profile: Ext.os.deviceType.toLowerCase(),
    stores : ['StudentStore'],
    models : ['people'],
    refs: {
        mainPanel: 'MainPanel',    // set the object KEY to the name you want to use in the control object and set the VALUE to the xtype of the view
        placesContainer:'placesContainer'
    },
    control: {
        'mainPanel': {   //  this matches the key above, which points to your view's xtype
            activate: 'onActivate',
            itemtap: 'onItemTap'  //  listen for the item tap event on this List
        },
        'mainPanel searchfield[itemId=searchBox]' : {
            clearicontap : 'onClearSearch',
            keyup: 'onSearchKeyUp'
        },
        'placesContainer places list':{
            itemtap:'onItemTap'
        }
    }

},
于 2012-10-08T20:29:17.950 に答える