2

まず第一に、私はあなたに寛大であることをお願いします：私はただ貧弱なext-jsとjavascriptの初心者です...

私はext-jsの無限スクロールグリッドの例を自分のニーズに適応させようとしています。私はsenchaext-jsで次のストアを定義しました：

Ext.define('AM.store.M2MResources', {
    extend: 'Ext.data.Store',
    requires: 'Ext.direct.*', //  use ext-direct for binding
    model: 'AM.model.M2MResource',
    autoLoad: true,

    paramsAsHash:false,
    autoSave: false,

    pageSize: 25,
    // allow the grid to interact with the paging scroller by buffering
    buffered: true,

    proxy: {
        type: 'direct',
        api: {
            // create  : undefined,
            read    : M2MResourceServlet.getM2Mresources,
            // update  : undefined,
            // destroy : undefined 
        },      
        extraParams: {
              total: 100
        },
        root: 'data',
        fields: [{name:'label'}, {name:'address_unique'}, {name:'address_network'}, {name:'status'}],
        paramOrder: 'page, start, limit',
        reader: {       
            type: 'json',           
            root: 'data',
            successProperty: 'success',
            totalProperty: 'totalCount'
        },
        writer: new Ext.data.JsonWriter({
            encode: false,
            writeAllFields: true,
            listful: true
        }
        )
    }
});

このdirectJNgineサーバーの対応物で：

public class M2MResourceServlet {
    public static class ResourceData{       
        public String label;
        public String address_unique;
        public String address_network;
        public String status;
    }

    public static class DirectStoreResult{
        ResourceData[] data;
        public int totalCount;
        public boolean success = true;

        public DirectStoreResult(ResourceData[] data, int totalCount) {
            super();
            this.data = data;
            this.totalCount = totalCount;
        }
    }

    static int counter = 0;
    @DirectMethod
    public DirectStoreResult getM2Mresources( Integer page, Integer start, Integer limit ) {
        ArrayList<ResourceData> result = new ArrayList<ResourceData>();

        // fill result list...

        DirectStoreResult r = new DirectStoreResult(result.toArray(new ResourceData []{}),limit);
        return r;
    }
}

次に、次のモデルを指定しました。

Ext.define('AM.model.M2MResource', {
    extend: 'Ext.data.Model',
    fields: [
        {name:'label' },
        {name:'address_unique' },
        {name:'address_network' },
        {name:'status' }
     ]
});

それで、次のグリッドにデータをロードしたいと思います。

Ext.define('AM.view.resgrid.M2MResources', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.m2mresources',

    title: 'All Resources Here',    

    verticalScrollerType: 'paginggridscroller',

    store: 'M2MResources',

  initComponent: function() {

      console.log('initComponent function in View has been called...');

      this.columns = [
                      {header: 'friendly name',dataIndex: 'label',flex: 1, sortable: true},
                      {header: 'address unique', dataIndex: 'address_unique',flex: 1},
                      {header: 'address network', dataIndex: 'address_network', flex: 1},
                      {header: 'node status',dataIndex: 'status',flex: 1}
                      ];

      this.callParent(arguments);

      Ext.getStore('M2MResources').guaranteeRange(0, 100);
  }
});

残念ながら、ストアはデータをロードしないようです。グリッドパネルには「ロード中...」の記号が表示され、データ項目は表示されません。問題は、私の直接メソッドによって返されたjsonにあると思われます。クライアント側次のjsonデータレコードを取得します。

ext-directjavaメソッドによって返されるデータレコード

この問題を解決する方法を提案していただけますか？ありがとうございました！

4

2 に答える 2

0

応答データがリーダーの構成と一致しません。ルート「data」を使用してリーダーを構成しましたが、応答で確認できるのはデータノードがないことです。表示する展開されたノードは次のとおりです。root：'result.data'。プロパティsuccessPropertyもtotalPropertyも表示されません。

于 2012-12-21T18:29:24.637 に答える
0

わかりました、この問題に対する合理的な答えはここにあります。基本的に、サーバー側の直接メソッドは次の形式である必要があります

@DirectMethod
public PartialResult<ResourceData> getM2Mresources(int start, int limit) {
        ResourceData[] m2mResources = ...
    //...
        return new PartialResult<ResourceData>(Arrays.asList(m2mResources), 
    m2mResources.length);
}

ここで、PartialResultクラスは次のとおりです。

public class PartialResult<T> {

    /** the partial result set */
    private Collection<T> result;

    /** the size of the complete result set */
    private int total;

    public Collection<T> getResult() {
       return this.result;
    }

    public int getTotal() {
       return this.total;
    }

    public void setResult(Collection<T> result) {
       this.result = result;
    }

    public void setTotal(int total) {
       this.total = total;
    }

    public PartialResult(Collection<T> result, int total) {
       super();
       this.result = result;
       this.total = total;
    }

}

元の例のように、ResourceDataクラスにいくつかのゲッターを追加しました。

jsストアは

Ext.define('AM.store.M2MResources', {
    extend: 'Ext.data.DirectStore',
    requires: 'Ext.direct.*', //  use ext-direct for binding
    model: 'AM.model.M2MResource',

    autoLoad: true,
    buffered: true,
    pageSize: 20,
    purgePageCount: 0,
    leadingBufferZone: 60,
    trailingBufferZone: 0,

    constructor : function(config) {
        config = config || {};

        config.proxy = {
            type: 'direct',
            directFn : M2MResourceServlet.getM2Mresources,
            reader: {
                type: 'json',
                root: 'result'
            },
            paramOrder: 'start,limit',
            paramsAsHash: false
        };

        this.callParent([config]);
    },

    toString: function() {
        return 'M2MResources: count = ' + this.getCount() + ', totalCount = ' 
                + this.getTotalCount();
    }
});

どうやら、これはまさに私がやりたかったことをやっています。だからアダムデイビスありがとう！とにかく、誰かがdirectFn要素の代わりに要素を使用しなければならない理由を説明していただければ幸いapiです...

于 2012-12-27T17:54:19.170 に答える