1

私はまだSTに慣れていないので、おそらくここでいくつか間違ったことをしていますが、問題がどこにあるのかわかりません。

問題1 プルを使用してプラグインを更新すると、データを更新するだけでなく、データが2倍になります。私はpropertyIdを使用するのを見たので、役に立たなかった。これは単純なはずなので、おそらく私が間違っているのはばかげたことです。

問題2 私はMVCアーキテクチャを使用する最も効率的な方法を見つけようとしており、ドキュメントと多くの例を読み通しました。ですから、私が明確に理解していないのか、より良い例が必要なのかはわかりません。今のところ、アイテムをタップしてそのアイテムの詳細を表示できるリストを使用して、簡単なアプリを作成しようとしています。後でそれをより頑丈なモンスターに進化させますが、今のところ私は基本を理解しようとしています。リストアイテムをクリックすると詳細ビューを閉じるための閉じるボタンがついに表示されましたが、別のアイテムをタップすると詳細ビューが表示されなくなりました。これは「autoDestroy:off」が存在しないためだと読みましたが、運が悪かったので試してみました。複数のビューに配置できる「閉じる」などの特定のボタンを作成できるようにしたいので、コントローラーにロジックを含める必要があります。

メインビュー

Ext.define('SenchaFirstApp.view.DistributorView', {
     //      extend: 'Ext.form.Panel',
     extend: 'Ext.Container',
       requires: ['SenchaFirstApp.store.DistributorStore', 'Ext.dataview.List', 'Ext.Toolbar', 'Ext.form.Panel'],
       model: 'SenchaFirstApp.model.Distributors',
       alias: 'widget.mainlist',
       xtype: 'mainlist',
       config:
       {
           layout: 'fit',
           border: 5,
           title: 'Distributors',
           html: 'My datalist',
           autoDestroy: false,
           items:[{

               xtype: 'toolbar',
               docked: 'top',
               title: 'Distributor List',
               height: 40,
               centered: true,
               items: [
                {
                    xtype: 'button',
                    text: 'Close',
                    width: 100,
                    height: 20, 
                    name: 'close',
            //      iconCls: 'delete',
                }]
               },
           {
           autoLoad: true,
           html: ['<div class="distr"><table><tr><th>Type</th><th>Distributor</th><th>Site</th><th>Status</th><th>Active</th><th>Assigned</th><th>State                             </th><th>Schedule</th><th>Finished</th></tr></table></div>'],
           itemTpl: [ '<div class="distr"><table><tr><td>{t}</td><td>{distr}</td><td colspan="2">{site}</td><td>{status}</td>                                                       <td>{active}</td><td>{assigned}</td> <td>{state}</td><td>{schedule}</td><td>{finished}</td></tr></table></div>' ],
           xtype: 'list',
           store: 'DistrID', 
            plugins: [
    {
        xclass: 'Ext.plugin.PullRefresh',
        pullRefreshText: 'Pull down to refresh Distributor List'
    }],
           ui: 'showDetails',
           id: 'mainlist',
           autoDestroy: false,
           }          
        ]
       },          
     });

詳細ビュー

Ext.define('SenchaFirstApp.view.DetailView',{
      extend: 'Ext.Panel',
      requires: ['Ext.Toolbar'],
      model: 'SenchaFirstApp.model.Distributors',
      alias: 'widget.detailview',
      xtype: 'detailview',
      name: 'detail',


    config:{
         html: 'This will contain detailed information',
          xtype: 'panel',
    //    fullscreen: false,
          centered: true,
          modal: false,
          scrollable: true,
          width: 300,
          height: 200,
      },
       });

Ext.define('SenchaFirstApp.store.DistributorStore', {
                        extend: 'Ext.data.Store',
                        requires: ['SenchaFirstApp.model.Distributors'],

                        config: {
                        //  xtype: 'distrlist',
                            storeId: 'DistrID',
                        model: 'SenchaFirstApp.model.Distributors',
                        autoLoad: true,
                        proxy: {
                            type: 'jsonp',
                            url:'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://gdata.youtube.com/feeds/api/users/hobbitin5/uploads&num=4',
                            reader: {
                                type: 'json',
                                rootProperty: 'responseData.feed.entries'
                            }
                        }
                            }

詳細ビューを取得するコントローラー

 Ext.define('SenchaFirstApp.controller.DistributorsController',{
       extend: 'Ext.app.Controller',
       config: 
       {
           refs: 
           {
               mainlist: '#mainlist',
           },
           control: 
           {
               mainlist: {
                   itemtap: 'dispDetail'
               },
           },

       //when item is tapped
         listeners: {
                itemtap: function(list, index, items, record)
               {
                   console.log('An item was tapped and the listener heard it');
               }
           }
        },
        dispDetail: function(view, record) {
                console.log('Item was tapped on the Data View');
                var oldView = this.getMainlist();       
                var curRecord = oldView.getStore(record);
                var newView = Ext.create('SenchaFirstApp.view.DetailView');
                console.log(curRecord);
                curRecord += 'other stuff';
                newView.setHtml(curRecord);
                newView.add(
        {
         xtype:  'toolbar',
         docked: 'top',
         title: 'Details',
         height: 40,
         items: [
        {
          xtype: 'button',
          text: 'Close',
          width: 100,
          height: 20,   
          name: 'close',
        }]

        }
      )
                oldView.add(newView);
            //  Ext.Viewport.add(newView)
            //  Ext.Viewport.setActiveItem(newView)
        }

       });

ボタンのコントローラー(今は閉じるだけ)

Ext.define('SenchaFirstApp.controller.NavController', {
       extend: 'Ext.app.Controller',
       config: 
       {
            refs: 
            {
                 mainlist: 'mainlist',
                 main: '#mainlist',
                closeBtn: 'button[name=close]',
                detaillist: {
                    selector: 'panel panel[name=detail] deetaillist',
                    xtype: 'detailview',
                }
            }, 
            control:
            {
                closeBtn: {
                    tap: 'closeView',
                },

                mainlist: {
                    tap: 'closeView',
                },
                detaillist: {
                    tap: 'closeView',
                }
            }
       },

       closeView: function(){

            var newView = this.getMainlist();
        //  var child = Ext.Viewport.getActiveItem();
            var child = this.getDetaillist();
            var instance = Ext.getCmp('mainlist');
            var activeIndex = instance.indexOf(instance.getActiveItem());
            var curIndex = activeIndex+1;
            var closeView = this.getDetaillist();
            console.log('Close btn clicked' + ' child: ' + this.child +  ' activeIndex: ' + activeIndex);
          // Ext.Viewport.destroy(closeView); //(child);
          newView.remove(child);
          newView.destroy();
          Ext.Viewport.add(Ext.create('SenchaFirstApp.view.DistributorView'));
`          }


})`;

モデル

Ext.define('SenchaFirstApp.model.Distributors', {
       extend: 'Ext.data.Model',
       config: {
           idProperty: 'DistrID',
             fields: [
                {name: 'DistrID'},
                {name: 't', type: 'string'},
                {name: 'distr', type: 'string'},
                {name: 'group', type: 'string'},
                {name: 'site', type: 'string'},
                {name: 'status', type: 'string'},
                {name: 'active', type: 'string'},
                {name: 'assigned', type: 'string'},
                {name: 'state', type: 'string'},
                {name: 'schedule', type: 'string'},
                {name: 'finished', type: 'string'},
                //{mapping: 't',
                // name: 'DistrID'}
                ],
       }
       });

私はそれがたくさんあることを理解していますが、どんな助けでもありがたいです...正しい方向に少しでも。前もって感謝します!また、私が達成しようとしていることの良い例を見つけるのに苦労したので、そこにある必要のないものがあると確信しています。一緒に素敵に遊ぶようになる:(

4

1 に答える 1

0

idPropertyを'id'に変更し、それをモデルフィールドリストに追加することで、更新の問題を解決しました。'DistrIDが機能しなかった理由はまだわかりませんが、スクリプトに' id'フィールドがあり、その部分を記述していなかったため、知らなかったサーバー応答を保持していました。だから、それがうまくいかなかった理由だと思います。

「autoDestroy:false」は2回目のクリックを許可するために必要なものであると読んだことがありますが、それは間違っていました。そのプロパティを取り出したとき、リストアイテムの詳細を開いたり閉じたりすることができました。

今、私はその特定のアイテムの詳細なビューを取得するためにクリックされたリストアイテムのIDを渡すことに取り組む必要があります。誰かがそれを手伝ってくれるなら、それは素晴らしいことだろうか、私は新しい質問を投稿します。ありがとう!

誰かに役立つ場合に備えて、リストアイテムIDを取得する方法を理解しました... Iny my DistributorController単純に、ストアとレコードIDを取得します。

var store = Ext.getStore('NodeStore');
            var id = record.get('id');

次に、パラメータを設定してストアをロードします

store.getProxy().setExtraParams({id: id});
            store.load();

また、コントローラーを介して参照を使用してストアを参照できないこともわかりました。代わりに、上記のようにvar store = Ext.getStore('StoreName');でストアを取得します。これはすべて非常に単純なものですが、私はまだ非常に知っているので、おそらくそれは別のn00bを助けることができます

于 2012-09-26T15:52:17.827 に答える