2

itemtap のビューを変更したいのですが、それを行いました

itemtap : function(list, index, target, record, event) {
 var id = index + 1;
if(id == '1'){
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);  
Ext.Viewport.add([

 { xtype: 'publishedword' }

 ]);  
}

今、私は下の写真に示すように、ビューに適用しようとしています。ここで、最初のビューにはアイテムが取り込まれたメニューが含まれており、それらのアイテムのオンクリックで、ホームページビューを置き換えてホームページで新しいビューを開きたいです。どうすればこれを達成できますか?

下の写真のコンテナ:

 Ext.define('myprj.view.Main', {
 extend: 'Ext.Container',
 alias: 'widget.mainmenuview',

 config: {

 width: 710,
 margin: '10px auto 0',
 layout: {
 type: 'hbox'
 },
defaults: {
  flex: 1
},
activeItem: 1,
items: [{
flex: 1,
xtype: 'container',
cls:'wholeMenuWrap',
margin: '65px 0 0 0',
width: 170,
layout: 'vbox', 

  items: [
  {
    xtype:'menupage',
    cls: 'menuPage',
    docked: 'left',    
  },
   {
    xtype:'homepage',
    cls: 'homePage', 
    //docked: 'center',
  },

  {
    xtype:'categorypage',
    cls: 'categoryPage',
    docked: 'right',
  },]
}]
}
});

上記のコードでは、ホームページを変更し、itemtap に関して別のビューを表示したいだけです。![firstscreen][1] この状況で上記のコードを使用すると、ビュー全体が変更されますが、itemTap に関して 2 番目のビューを変更したいだけです。ありがとうございました。

編集済み

  if(id == '1'){
console.log("Value of Click--"+id);
var publishedword = { xtype: 'publishedword' }; 

   // I am assuming active item is container, here i am getting Container object
   var outerContainer = Ext.Viewport.getActiveItem(1);

   // removing the second item (index start with 0) 
   outerContainer.down('panel').removeAt(1);

   // replacing second item into publishedword
   outerContainer.down('panel').insert(1, publishedword);
   outerContainer.getAt(1).setActiveItem(publishedword);
  }

このコードの後、下の図に示すように、公開された単語を読み込むことができます![result2][2] 今、私の単語をメニューとカテゴリの間に配置したいと考えています。上の写真では、ホームページが破壊されておらず、公開された単語の後ろに来ていることがわかります。

4

2 に答える 2

1

ホームページ コンポーネントを のように動作させることができますExt.Viewport。

ドキュメントから：

Ext.Viewport は、Ext.setup を使用するときに作成されるインスタンスです。Ext.Viewport は Ext.Container から拡張されるため、as レイアウト (デフォルトは Ext.layout.Card) を持ちます。これは、コードのどこからでも、いつでも項目を追加できることを意味します。Ext.Viewport フルスクリーン構成はデフォルトで true になっているため、画面全体を占有します。

基本的に、ホームページにlayout: 'card'. 次に、メイン ビューポートのようにビューを追加できます。

[編集] 便宜上、ホームページ コンテナーに ID を付けます。

{
    id: 'homepage',
    xtype:'homepage',
    cls: 'homePage',
    //docked: 'center',
    layout: 'card'
},

var view = Ext.getCmp("viewId");          // replace this code with the code to
                                          // get the view you actually want
                                          // to add

var homepage = Ext.getCmp("homepage");    // get it by the id we set before
homepage.animateActiveItem(view, 'fade'); // you can animate a transition
homepage.add(view);                       // or just add it

[編集] 前に行っていたように、その場でインスタンス化を追加することもできます。

homepage.add([
    { xtype: 'publishedword' }
]);
于 2013-07-31T06:55:27.230 に答える
1

これはあなたがしていることですが、理解する必要があることがあります

    itemtap : function(list, index, target, record, event) {
     var id = index + 1;
     if(id == '1'){

        //This line will remove the whole container, but that's not you want
        Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true); 

        //This line will add publishedword conponent into viewport not carousel
        Ext.Viewport.add({ xtype: 'publishedword' });  
     }
   }

あなたがする必要があるのは

    itemtap : function(list, index, target, record, event) {
     var id = index + 1;
     if(id == '1'){
       var publishedword = { xtype: 'publishedword' }; 

       // I am assuming active item is container, here i am getting Container object
       var outerContainer = Ext.Viewport.getActiveItem();

       // removing the second item (index start with 0) 
       outerContainer.down('carousel').removeAt(1);

       // replacing second item into publishedword
       outerContainer.down('carousel').insert(1, publishedword);
     }
   }
于 2013-07-31T07:08:18.767 に答える