0

アホイ、

私は、sencha docsやインターネット上で利用可能な他の例を調べて、ネストされたリストのデモを開発しようとしています。今までこれは私が達成したことです：

煎茶アプリモデルフォルダ

ファイル名：item.js

Ext.define('firstApp.model.item', {
     extend: 'Ext.data.Model',
        config: {
            fields: [{
                name: 'text',
                type: 'string'
            }]
        }
});

煎茶アプリストアフォルダー

ファイル名：nList.js（リストされているアイテムはsencha docsからのものです）

var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'item',
defaultRootProperty: 'items',
root: {
    items: [
        {
            text: 'Heavy Metal',
            items: [
                {
                    text: 'NWOBHM',
                    items: [
                        { text: 'Iron Maiden', leaf: true },
                         ]
                },
                { text: 'MetalCore', leaf: true }
            ]
        },
        {
            text: 'Extreme Metal',
            items: [
                { text: 'Children Of Bodom', leaf: true },
                { text: 'Cannibal Corpse', leaf: true },
                { text: 'Cradle Of Filth', leaf: true  }
            ]
        }
    ]
 }
});


Ext.create('firstApp.store.nList',{
  extend:'Ext.NestedList',
  requires: {'Ext.dataview.NestedList'},
  config:{
     fullscreen: false,
     store: treeStore
    }
 });

Senchaアプリビューフォルダ

ファイル名：Main.js

Ext.define('firstApp.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
   'Ext.TitleBar',
   'Ext.Button',
   //'firstApp.model.item',
  // 'firstApp.store.nList',
   //'Ext.dataview.NestedList',
   //'Ext.data.TreeStore'
   //'Ext.ToolBar'
] ,
config: {
//store: 'firstApp.store.Main',
    items: [

            {

            xtype: "toolbar",
            docked: "top",
            title: "List View",
            items: [
                    {
                        xtype: "spacer"
                    }, 
                    {
                        xtype: "button",
                        text: "Tab View",
                        ui: "action",
                        handler: function(){                    
                              Ext.Viewport.animateActiveItem((
                                          Ext.create('firstApp.view.view2')),
                                          {type: 'slide', direction:'left'}).show();
                            }                           
                    }
                    ]
            },
            {
                xtype: 'nestedlist',
                displayField: 'text',
                model: 'item',
                store: 'nList'
                }


            ]

            }




});

Console.log

これらは私が受けている警告です

1. [WARN] [Ext.dataview.NestedList＃applyStore]指定されたストアが見つかりません。

2.[警告][匿名][Ext.Loader]同期ロード'Ext.dataview.NestedList'; 対応するクラスの要件として、「Ext.dataview.NestedList」を明示的に追加することを検討してください。

これがスナップショットです

ネストされたリストのないSenchaビュー

何がうまくいかない可能性がありますか？

  1. ネストされたリストにはタイトルバーが付属していることは知っていますが、ネストされたリストをアイテムとして追加したい場合はどうすればよいですか。

  2. アプリのMain.jsにコンテンツをコピーして貼り付け、それに応じて残りのコードをコメントアウトすることで、ネストされたリストのGitHubデモを実行したところ、例は機能しました。しかし、例と私の例の主な違いは、ストア、モデル、ビューが1つのjsにあるのに対し、私の場合は別々のjsと別々のフォルダーにあることです。

親切に、私を導き/助けてください。

どうもありがとう。

4

1 に答える 1

1

まず、layout: 'fit'プロパティをnestedListに追加します。

Main.js

Ext.define('firstApp.view.Main', {
    extend : 'Ext.Container',
    xtype : 'main',
    config : {
        fullscreen : true,
        layout : 'fit',
        items : [{
            xtype : "toolbar",
...

次に、ストアを次のように変更します。

nList.js

Ext.define('firstApp.store.nList', {
    extend : 'Ext.data.TreeStore',
    config : {
        model : 'firstApp.model.Item',
        defaultRootProperty : 'items',
        data : {
            items : [{
                text : 'Heavy Metal',
                items : [{
                    text : 'NWOBHM',
                    items : [{
                        text : 'Iron Maiden',
                        leaf : true
                    }]
                }, {
                    text : 'MetalCore',
                    leaf : true
                }]
            }, {
                text : 'Extreme Metal',
                items : [{
                    text : 'Children Of Bodom',
                    leaf : true
                }, {
                    text : 'Cannibal Corpse',
                    leaf : true
                }, {
                    text : 'Cradle Of Filth',
                    leaf : true
                }]
            }]
        }
    }
});

問題は、ストアだけでなく、ストアにネストされたリストを定義したことでした。これは、「メイン」ビューのリストに追加する必要があります。次に、ストア内のデータにはタグが必要ではありdataませんroot

実用的な例を参照してください：http ：//www.senchafiddle.com/#ERFUC

編集

app.jsに次の部分を追加します

Ext.application({
    name: 'firstApp',
    views:['Main'],
    stores:['nList'],
    models:['Item'],

上記のフィドルでapp.js全体を見つけることができます。

于 2013-02-21T08:10:53.700 に答える