1

自 2 天以来，我正在尝试使用所需数据创建无限轮播，但无法获得。我也试过厨房水槽（触摸式）。我的主题也与触摸风格相同。我有类别，如果我单击一个类别，则显示相关的各个 Words ，这是更多不同的轮播项目。

不知道有多少字。但我想在一个滑动视图中显示 7 个单词（如果我有 35 个，那么我需要 5 个视图），这是轮播项目，就像厨房水槽（触摸式）。

来源：http ://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html 并单击Dress，你必须展示dressess。我只想这样显示。

我只是显示了类别，但无法显示类别相应的单词。

到目前为止我所做的： View/CategoryPage.js

 Ext.define('MyApp.view.CategoryPage', {
      extend: 'Ext.Container',  
      alias: "widget.categorypage",   
      config: {    
       layout: 'vbox',   
       items: [
       {
        xtype:'globalmenu',
      },
      {
        xtype: 'toolbar',
        //docked: 'top',
        cls:'roundedToolbar',      
        title: 'Categories',
      },

      {  
        xtype:'panel',      
        flex: 1,  
        layout: 'fit', 
        cls: 'category-data',
        items:[          
        {
          scrollable: {  
            direction: 'vertical',
            directionLock: true,
          },
          xtype: 'list',        
          layout: 'fit',        
          itemHeight: 20,
          store: 'CategoryStore',
          itemTpl: [

          '<div class="categoryListings">',
          '<tpl for="data">',
          '<span onClick="catOption({cat_id})">{category_name}</span> ',
          //'<span >{category_name}</span> ',         
          '</tpl>',
          '</div>',

          ].join(''),
          listeners: {
                itemtap : function(list, index, target, record, event,cat_id) {
         //var id = index;
         var id = index + 1;
        console.log( "iOS" + id);

        catOption(id);

      }
    }
        }
        ]
      },
        ]
      }
    });

     function catOption(id){
          console.log("ID--"+id);
      var  token= '650773253e7f157a93c53d47a866204dedc7c363';

        var url = 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words_with_definition/catID/'+id+'/SDSILLYTOKEN/'+token;

        var stProxy = Ext.StoreMgr.get("CategoryWordDisplayStore").getProxy();
        stProxy.setUrl(url);
        Ext.getStore("CategoryWordDisplayStore").load();

         Ext.Viewport.remove(Ext.Viewport.animateActiveItem({ xtype: 'categorywordsdisplay' },{type:'slide'}), true);  

      }

如果类别之一单击然后显示相应的单词，

Ext.define("MyApp.view.CategoryWordDisplayMain", {
  extend: 'Ext.Container',  
  alias: "widget.categorywordsdisplay", 
  requires:"Ext.dataview.List",

  config: {

   layout: 'vbox',   
   items: [
   {
    xtype: 'globalmenu',
    flex: 1,
    },//end of top menu     
    {  
      xtype:'panel',      
      scrollable: false, 
      flex: 3,  
      layout: 'fit',   
      items:[

      {
        flex: 1,
        xtype: 'toolbar',
        /* title: "Help", */
         cls:'roundedToolbar',
         title: 'value',
          docked: 'top',
          itemId:'titleid',
          id:'titleid',
      },     
      {      

       xtype: 'list',
       scrollable: true,       
       itemId: 'demolist', 
      // html:'Test',
       loadingText:"Loading ....",
       emptyText: "<div class=\"words-list-empty-text\">No Words found.</div>",
            //onItemDisclosure: true,
          //  grouped: true,      
          itemTpl: [
           '<div>',                
           '<tpl for="data">',
           '<ul class="parabox">',
           '<li><h2 class="noStar" onclick = "addtofavourite({word_id})"><b>{name}</b> </h2>',                          
           '<tpl for="definitions">',
           '<ul class="para-box-wrapper">',
           '<li class="{rating}"><div class="paragraph-def" onclick =            "ratingStar({def_id})">','{defintion}',
           '<span class="authorBox"><i>Author: {author}</i></span>',

           '</li>' ,
        '</div>',
        '</ul></li>', 
        '</tpl>',
        '<div class="yesStar" ></div>',
        '</ul>',
        '</tpl>',
        '</div>'
        ].join(''),

          store: 'CategoryWordDisplayStore',
        }
        ]
      },//end of menuitems
      ]
    },
   initialize : function(){
    this.callParent();
    var store = Ext.getStore('CategoryWordDisplayStore');
    console.log("category ----"+store.getAt(0).getData().name);
     this.down('toolbar').setHtml(store.getAt(0).getData().category);
  },
  });

function home(){
  console.log("Home CategoryPage CLick");
  Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);  
  Ext.Viewport.add([
   { xtype: 'mainmenuview' }
   ]);  
}

类别展示模型

模型/CagegoryModel.js

Ext.define('MyApp.model.CategoryModel', {
  extend: 'Ext.data.Model',
  requires: ['MyApp.model.CategoryModelMenu'],
  config: {
    fields: [
    {name:'data', mapping: 'data'},
    {name: 'cat_id'},
    {name: 'category_name'}, 
    ],       
  },
});

和

Ext.define('MyApp.model.CategoryModelMenu', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
           /*'cat_id',*/
           'category_name',
          ],

        belongsTo: "MyApp.model.CategoryModel"
    }
});

点击类别后的文字显示模型：

Ext.define('MyApp.model.CategoryDisplayModel', {
    extend: 'Ext.data.Model',
    requires: ['MyApp.model.CategoryDisplayModelMenu'],
    config: {
        fields: [
         {name:'data', mapping: 'data'},
            {name:'name'},
            {name: 'category'},
            {name: 'author'},
        ],
    }
});

和 

Ext.define('MyApp.model.CategoryDisplayModelMenu', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
           /*'cat_id',*/
           'category',
           'name',
        ],

        belongsTo: "MyApp.model.CategoryDisplayModel"
    }

商店：

分类展示店：

Ext.define('MyApp.store.CategoryStore',{
extend: 'Ext.data.Store', 
config:
{
    model: 'MyApp.model.CategoryModel',
    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.store.CategoryWordDisplayStore',{
extend: 'Ext.data.Store', 

config:
{
    model: 'MyApp.model.CategoryDisplayModel',
    autoLoad:true,
    id:'Category',
    proxy:
    {
        type: 'ajax',
         url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words/',

        reader:
        {
                rootProperty:''
        }
    },
}
});

我还没有创建任何控制器。

JSON：类别 Json和 第一个类别（catID = 1）Word Json 如果我向右滑动，则 cat id 更改 2 并再次向右滑动，然后 3 依此类推。如果我从 3 cat id 向左滑动，则转到 cat id 2。

请帮帮我。在此先感谢。

4

0 回答 0