1

我还是 ST 的新手,所以我可能在这里做错了几件事,但我不知道问题出在哪里。

问题1 当我使用拉取刷新插件时,我得到双倍的数据,而不是仅仅刷新数据。我已经看到使用 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'是允许第二次点击所需的,但这是错误的。当我取出该属性时,它允许我继续打开和关闭列表项的详细信息。

现在我只需要传递单击的列表项的 id 即可获得该特定项的详细视图。如果有人可以提供帮助,那就太好了,否则我会发布一个新问题。谢谢!

我想出了如何获取列表项 ID 以防万一它可以帮助任何人...在我的 DistributorController 中,我只需获取商店和记录 ID

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

然后设置参数并加载商店

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

我还发现您无法通过带有 refs 的控制器引用您的商店。而是像上面那样使用 var store = Ext.getStore('StoreName'); 获取商店。这都是非常简单的东西,但我仍然非常了解,所以也许它可以帮助另一个 n00b

于 2012-09-26T15:52:17.827 回答