0

ページング バーが表示され、10 件中 1 - 5 件を表示しています。しかし、10 件のレコードすべてが表示されています。私はそれを理解できないようです。

ここに私のList.jsファイルがあります

Ext.define('MyApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',

require: [ 'MyApp.view.student.StudentForm' ],
title: 'Student Records',
scrollable: true,
margin: 20,
layout: {
    type: 'vbox',
    align: 'stretch'
},

reference: 'studentGrid',
frame: true,
collapsible: true,
store: 'StudentStore',
collapsible: true,
columns: [
    { 
        text: 'Name', 
        dataIndex: 'name',
        flex: 1 
    },

    { 
        text: 'Address', 
        dataIndex: 'address', 
        flex: 1 
    },
    { 
        text: 'Phone', 
        dataIndex: 'phone', 
        flex: 1
    },
    { 
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    },
    { 
        text: 'Faculty',
        dataIndex:'faculty',
        flex: 1
    }
],

dockedItems: [
    {
        xtype: 'toolbar',
        dock: 'top',
        items: [
            {
                xtype: 'button',
                text: 'Add',
                iconCls: 'fa fa-plus',
                listeners: {
                click: 'onAdd'
            }
            },
            {
                xtype: 'button',
                text: 'Edit',
                iconCls: 'fa fa-edit',
                id: 'editButton',
                bind: {
                    disabled: '{ !mainList.selection }'
                },
                listeners: {
                   click: 'onEdit'
                }
            },
            {
                xtype: 'button',
                text: 'Delete',
                iconCls: 'fa fa-trash-o',
                bind: {
                    disabled: '{ !mainlist.selection }'
                },
                listeners: {
                    click: 'onDelete'
                }
            }]
        },
        {
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            displayInfo: true,
            store: 'StudentStore'
        }
    ],
// toolbar for our store filter field
tbar: [{
    xtype: 'textfield',
    fieldLabel: 'Search Student',
    emptyText: '...type to filter',
    width: 300,
    listeners: {
        change: 'onSearch'
    }
}]
});

そして、これが私の StudentStore.js ファイルです

Ext.define('MyApp.store.StudentStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Student',
sorters: ['name'],
autoLoad: true,
pageSize: 5,
autoSync: false,
proxy: {
    method: 'GET',
    type: 'ajax',
    url: 'http://localhost:8080/extServlet/StudentController?action=listStudent',
    reader: {
        type: 'json',
        rootProperty: 'StudentStore',
        totalProperty: 'total'
    }
}
});

それで、何か提案はありますか？

4

2 に答える 2

0

グリッド パネルで 2 つの異なるストアを使用しています。1 つはグリッド用、もう 1 つはページング ツールバー用です。

grid/pagingtoolbar の構成では、「store: 'StudentStore'」を設定しています。これにより、2 つの StudentStores が作成されますが、2 つの異なるものです。(アプリをデバッグして、2 つのストアの ID を比較してみてください)。

グリッドの Store とページングバーは同一である必要があります。

どのように問題を解決できますか?

1) グリッドの initComponent メソッドでストアを定義し、それをグリッドとツールバーに割り当てることができます。

2) (推奨): ViewModel でストアを定義し、グリッドとツールバーでストアをバインドできます。

ビューモデル:

...
stores: {
    studentStore: {
        type: 'studentstore'
    }
}
...

店：

Ext.define('MyApp.store.StudentStore', {
    extend: 'Ext.data.Store',
    alias: 'store.studentstore',
    ....

グリッド：

...,
collapsible: true,
bind: {
    store: '{studentStore}'
},
collapsible: true,
...,

よろしく、

于 2015-07-31T15:19:46.183 に答える
0

最後にこの問題を解決しました。

総数 レコードの数は 100 です。ストアで pageSize: 10 を設定しました。初めてグリッドがロードされるとき、10 レコードのみが表示されます。次に次のページに移動すると、次の 10 件のレコードが表示されます。

この問題を解決するには、サーバー側のコードを記述する必要があります。

JS コード -

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Libraries/ext-all.js"></script>
    <script src="Libraries/ext-all-debug.js"></script>
    <link href="Libraries/ext-theme-crisp-all-debug.css" rel="stylesheet" />
    <script type="text/javascript">

        Ext.onReady(function () {
            var studentStore = Ext.create('Ext.data.Store',
                {
                    autoLoad: true,
                    pageSize: 10,
                    fields: ['ID', 'Invoice', 'Date', 'Vendor', 'ProductCode', 'ClientNumber', 'ClientName', 'Amount', 'Type'],
                    proxy:
                    {
                        type: 'ajax',
                        url: 'Handler2.ashx',
                        actionMethods: {
                            read: 'POST'
                        },
                        reader: {
                            type: 'json',
                            root: 'data',
                            totalProperty: 'total'
                        }
                    }
                });
            var window = new Ext.Window({
                id: 'grdWindow',
                width: 400,
                title: 'Grid Samples',
                items: [
                    {
                        xtype: 'panel',
                        layout: 'fit',
                        renderTo: Ext.getBody(),
                        items: [
                            {
                                xtype: 'grid',
                                id: 'grdSample',
                                height: 300,
                                store: studentStore,
                                    columns: [
                                    {
                                        header: 'Name',
                                        dataIndex: 'Name',
                                    },
                                    {
                                        header: 'Age',
                                        dataIndex: 'Age'
                                    },
                                    {
                                        header: 'Fee',
                                        dataIndex: 'Fee'
                                    }
                                    ],
                                    dockedItems:
                                        [   
                                            {
                                                xtype: 'pagingtoolbar',
                                                store:studentStore,
                                                dock:'bottom',
                                                displayInfo:true
                                            }
                                        ]
                            }
                        ]
                    }
                ]
            }).show();
        });
    </script>
</head>
<body>

</body>
</html>

Handler2.ashx.cs (サーバー側コード)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Data.SqlClient;
namespace InsertionByExtJS
{
    /// <summary>
    /// Summary description for Handler2
    /// </summary>
    public class Handler2 : IHttpHandler
    {
        public int Id {get; set;}
        public String Invoice { get; set; }
        public String Date { get; set; }
        public String Vendor { get; set; }
        public String ProductCode { get; set; }
        public String ClientNumber { get; set; }
        public String ClientName { get; set; }
        public String Amount { get; set; }
        public String Type { get; set; }
        public String Name { get; set; }
        public String Profile { get; set; }
        public String Email { get; set; }

        List<Handler2> ListData;

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            ListData = new List<Handler2>();
            int i = 100;
            int j = 1;
            while (j <= i)
            {
                ListData.Add(new Handler2 { Name = "Puneet" + j, Profile = "Puneet" + j, Email = "Email" });
                j++;
            }

            string start1 = context.Request["start"];
            string limit1 = context.Request["limit"];

            int start = Convert.ToInt32(start1);
            int limit = Convert.ToInt32(limit1);


            List<Handler2> range = ListData.GetRange(start, limit);
            JavaScriptSerializer JSS = new JavaScriptSerializer();
            string result;

            result = string.Format("{{total:{1},'data':{0}}}", JSS.Serialize(range), ListData.Count);
            context.Response.Write(result);

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

ほとんどすべてをテストしましたが、システムで正しく動作しています。確認して、このコードをアプリケーションに追加してみてください。うまくいきますように。それでも問題が解決しない場合は、私に知らせてください。

于 2015-08-01T07:12:45.043 に答える