2

I am unable to display list in my view. It seems I am getting data back from my ajax call. I am definitely missing something here. Please help. Thanks

Below are details: data:

Stations.json

[
{
    "id": "129",
    "stop": "NY Station",
},
{
    "id": "13",
    "stop": "Newark Station",
}

]

model:

Ext.define('MyApp.model.Station', {
extend: 'Ext.data.Model',

config: {
    fields: [
         {name: 'id',  type: 'string'},
     {name: 'stop',  type: 'string'}

     ]
}

});

Store:

       Ext.define('MyApp.store.Stations', {
       extend  : 'Ext.data.Store',
       requires: ['MyApp.model.Station'],
    id: 'stations',
    xtype: 'stations',
    config  : {
        model : 'MyApp.model.Station',
        storeId: 'stationsStore',
        autoLoad : true,
        //sorters: 'stop',
        proxy: {
                type: 'ajax',
                url: 'Stations.json'

     }
     });

View:

Ext.define('MyApp.view.MyService', {
extend: 'Ext.Panel',
xtype: 'stationsformPage',
fullscreen: true,
layout: 'vbox',
requires: [
    'MyApp.store.Stations',    
    'Ext.form.FieldSet',
    'Ext.field.Password',
    'Ext.SegmentedButton',
    'Ext.List'
  ],

config: {
    iconCls: 'settings',
    title: 'My Service',
   items: [
        {
            docked: 'top',
            xtype: 'toolbar',
            title: 'My Service'
        },

        {
            xtype: 'list',
            title: 'Stations',
            store: 'stationsStore',
            styleHtmlContent: true,
            itemTpl: '<div><strong>{stop}</strong> {id}</div>'

        },

    ]
   },
   initialize: function() {

        /*
        Ext.Ajax.request({
            scope : this,
            url: 'StationLocator.json',
            callback : function(options, success, response){
                    var json =   Ext.decode(response.responseText);
                    alert(response.responseText); //this works
                    alert(json[0].stop); //this works
            }
        });
        */

  }//initialize

  });
4

1 に答える 1

2

TabPanelに入れました。これは役に立ちますか？次のようになります。

ここに画像の説明を入力

これが私の見解です：

Ext.define('MyApp.view.MyService', {
    拡張: 'Ext.tab.Panel',
    xtype: 'stationsformPage',
    フルスクリーン: 真、
    レイアウト： {
        パック：「センター」
    }、
    必要： [
        'MyApp.store.Stations',
        'Ext.form.FieldSet',
        'Ext.field.Password',
        'Ext.SegmentedButton',
        「拡張リスト」
    ]、
    構成: {
      tabBarPosition:'下',
        レイアウト： {
            タイプ: 'カード',
            アニメーション: {
                持続時間: 300,
                イージング: 'イーズインアウト',
                タイプ: 'スライド',
                方向: 「左」
            }
        }、
        フルスクリーン: 真、
        タイトル: '私のサービス',
        項目: [
            {
                ドッキング: 'トップ',
                xtype: 'ツールバー',
                タイトル：「私のサービス」
            }、

            {
                xtype: 'リスト',
                タイトル: 'ステーション',
                ストア: 'stationsStore',
// 高さ: 600,
// 幅: 400,
// スタイル: '背景色: #c9c9c9;',
                styleHtmlContent: 真、
                itemTpl: ' {停止} {id}'

            }

        ]
    }

});




リストを通常のパネルに配置するバージョンを次に示します。

ここに画像の説明を入力

Ext.define('MyApp.view.MyService', {
    拡張: 'Ext.Panel',
    xtype: 'stationsformPage',
    フルスクリーン: 真、
    レイアウト： {
        パック：「センター」
    }、
    必要： [
        'MyApp.store.Stations',
        'Ext.form.FieldSet',
        'Ext.field.Password',
        'Ext.SegmentedButton',
        「拡張リスト」
    ]、
    構成: {

        フルスクリーン: 真、
    layout: 'fit', // フィットの指定は重要です。それなしではリストが表示されません
        タイトル: '私のサービス',
        項目: [
            {
                ドッキング: 'トップ',
                xtype: 'ツールバー',
                タイトル：「私のサービス」
            }、

            {
                xtype: 'リスト',
                ストア: 'stationsStore',

                styleHtmlContent: 真、
                itemTpl: ' {停止} {id}'

            }
        ]
    }
});
于 2012-05-10T22:24:35.027 に答える