extjs4 - extjs 4 ग्रिड में पेजिंग काम नहीं कर रहा है




(4)

आपको सर्वर की तरफ पेजिंग को संभालना होगा, आप दो मापदंडों पेज और रिक्सपरपेज भेज सकते हैं। फिर एसक्यूएल सर्वर पर आप इन दो मापदंडों के आधार पर पहले रिकार्ड और अंतिम रिकॉर्ड सेट कर सकते हैं।

@ फ्रीस्टेक = (@ पृष्ठ - 1) * @ रेक्सपरपाज); @LastRec = (@ पृष्ठ * @ रीसेपियरपेज + 1);

तो आपकी एसक्यूएल क्वेरी = जैसे होगी

select top (@LastRec -1)* from

(का select cast(ROW_NUMBER() OVER(ORDER BY ID) as numeric)

ROWID, * from TempResult
    WHERE ROWID > @FirstRec   AND ROWID < @LastRec     
    order by temp.ID desc                                 
    ) temp                                

TempResult आपके पूरे टेबल डेटा होगा

प्रति पृष्ठ आइटम 10 पर सेट कर दिए गए हैं और मैंने सामने वाले हिस्से में डॉक किए गए आइटम्स में xtype के रूप में पेजिंग टूलबार बनाया है।

ओरेकल क्वेरी में कोई प्रारंभ और सीमा पैरामीटर नहीं है। मैं ओरेकल डेटाबेस से रिकॉर्ड कैसे लाऊँ?

कृपया सहायता कीजिए!

यहां मेरा कोड है:

 Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'ux/');

Ext.require(['*']);

 Ext.onReady(function()
 {
     var itemsPerPage = 10;
     var store=Ext.create('Ext.data.Store',
       {
           autoload: true,
           autosync: true,
           pageSize: itemsPerPage,
           data: [],
           fields:
                   [
                        {name: 'firstname', id:'firstname'},
                        {name: 'email', id:'email'},
                        {name: 'mobileno', id:'mobileno'}
                   ]
       });  

     var panel = Ext.create('Ext.grid.Panel',
       {
            layout: 'fit',
            store:store,
            id: 'grid1',
            dockedItems:
                    [
                        {
                            xtype: 'pagingtoolbar',
                            store:store,
                            dock:'bottom',
                            displayInfo:true
                        }
                    ],
            renderTo: Ext.getBody(),
                        columns:
                    [
                        {
                            header:'Firstname',
                            id:'firstname',
                            dataIndex:'firstname',
                            //autoSizeColumn : true,
                            flex: 1, 
                            editor: {
                                        xtype: 'textarea'
                                    }
                        },
                        {
                            header:'Action',
                            id:'action',
                            align:'center',
                            xtype:'actioncolumn',
                            autoSizeColumn : true,
                            //flex: 1, 
                            sortable:false,

                            items:
                                    [
                                        {
                                            icon:'images/view_icon.gif',
                                            tooltip:'View',
                                            handler: function(grid,rowIndex,colIndex)
                                            {
                                                var rec= grid.getStore().getAt(rowIndex);
                                                var email=rec.get('email');
                                                location.href="RegistrationFormGridView.jsp?email="+email;
                                            }
                                        },
                                        {
                                            icon:'images/edit_icon.gif',
                                            tooltip:'Edit',
                                            handler: function(grid,rowIndex,colIndex,e)
                                            {
                                                var rec= grid.getStore().getAt(rowIndex);
                                                var email = rec.get('email');
                                                location.href="GetRecords.jsp?email="+email; 
//                                                alert(JSON.stringify(rec.get('email')));
//                                                window.location='GetFormData?key1='+email;                                               
                                            }
                                        },
                                        {
                                            icon:'images/icons/cancel.png',
                                            tooltip:'Delete',
                                            handler: function(grid,rowIndex,colIndex)
                                            {   
                                                var rec= grid.getStore().getAt(rowIndex);
                                                var email = rec.get('email');
                                                Ext.Ajax.request(
                                                {
                                                    url:'./deleteRecords',
                                                    params:{email:email},
                                                    method:'GET',

                                                    success: function(response)
                                                    {
                                                        Ext.Msg.alert("successfully deleted" +" " + response.status);
                                                        window.location.reload();
                                                    },
                                                    failure: function(response)
                                                    {
                                                        Ext.Msg.alert("failed" + response.status);
                                                    }
                                                });
                                            }
                                        }
                                    ]
                        }
                    ],

                   listeners: 
                    {
                        afterrender:function()
                         {
                             Ext.Ajax.request(
                           {
                               params:{email:email},
                               url:'./RetrieveRecords',
                               success: function(response)
                               {  
                                   data = [];
                                   data = Ext.JSON.decode(response.responseText);
                                   Ext.getCmp('grid1').getStore().loadData(data);
                               },
                               failure: function(response)
                               {
                               }
                           });
                         }
                    }           
       });
 });

आप यह भी कर सकते हैं कि डेटाबेस से सभी रिकॉर्ड प्राप्त करें और इसे सरणी में रखें। इसके बाद आप ऑरेंज पर रिकॉर्ड प्राप्त करने के लिए प्रारंभ और समाप्ति बिंदु सेट कर सकते हैं।


आपको सर्वर साइड पर पेजिंग को संभालना होगा, एक्सटेंशन जेएस केवल आपको पेजिंग के लिए आवश्यक एनकेसीरी चीज प्रदान करता है।

अगले या पिछले पर हर क्लिक के लिए, एक्सटेंशन जेएस स्वचालित रूप से दो मापदंडों को शुरू और सीमाएं भेजते हैं, जहां पृष्ठ के अंतिम पुनःसंदेश की शुरुआत और सीमा (आइटम पीपरपृष्ठ) है, प्रति पृष्ठ रिकॉर्ड की संख्या।

उदाहरण के लिए मान लें कि आपके पास 100 रिकॉर्ड हैं और आपने ग्रिड में पेजिंग लागू की है और प्रति पृष्ठ आइटम 10 हैं

इंटिटल से शुरू करें = 0 और सीमा 10 होगी, यदि आप अगले पर क्लिक करेंगे और 11 की शुरुआत करेंगे और सीमा 10 हो जाएगी। यदि आप पिछले शुरुआत पर क्लिक करेंगे तो 0 हो जाएगी और सीमा 10 होगी

इन दो मापदंडों का उपयोग करके आपको अभिलेख लोड करने और रिकॉर्ड को जवाब के रूप में भेजने के लिए अपनी क्वेरी तैयार करनी होगी।


मेरी समस्या थी: मेरे पास एक स्टोर है जो प्रॉक्सी पर डेटा को बैक-एंड पर अनुरोध करेगा। इस अनुरोध में filter नामक एक पैरामीटर होगा, जो यह तय करने के लिए बैक-एंड की सहायता करेगा कि क्लाइंट में रुचि रखने वाले परिणाम का सेट कौन सा है। यह पैरामीटर एक Combobox या किसी अन्य घटक से लोड किया गया है जिसे उपयोगकर्ता फ़िल्टर करने के लिए उपयोग कर सकते हैं इस्तेमाल किया जाएगा।

मेरे दृष्टिकोण से पैरामीटर को स्टोर पर सेट नहीं किया जाना चाहिए और न ही लोड पैरामीटर का उपयोग करना चाहिए। मैं समझाऊंगा क्यों:

  1. स्टोर में पैरामीटर को कॉन्फ़िगर करने से यह संकेत मिलेगा कि एक ही स्टोर का उपयोग करने वाले प्रत्येक अन्य घटक में यह पैरामीटर कॉन्फ़िगर किया जाएगा, जिसका अर्थ है कि आपको समवर्ती समस्याएं हो सकती हैं।
  2. और दूसरे मामले में, यह लोड विधि पर कॉन्फ़िगर करने योग्य नहीं है, क्योंकि आप अपने स्वयं द्वारा load विधि का उपयोग करने के लिए हर बार स्पष्ट रूप से नहीं चाहते हैं, याद रखें कि पहले से ही कुछ घटक जैसे पेजिंग और कस्टम घटक हैं जो इस विधि को ट्रिगर करता है।

मेरे दृष्टिकोण से सही तरीका क्या होगा:

प्रत्येक बार जब load ट्रिगर होता है, तो हम अतिरिक्त पैरामीटर को एक गैर-घुसपैठ तरीके से संलग्न करते हैं। इसका अर्थ यह है कि ट्रिगर को कोई बदलाव करने की आवश्यकता नहीं होगी (याद रखें कि ट्रिगर store.load() निष्पादित करने store.load() कोई भी घटक हो सकता है) और स्टोर को इस नए पैरामीटर के बारे में पता नहीं होगा।

आप यहां स्पष्ट रूप से देख सकते हैं कि प्रॉक्सी के अनुरोध के अनुरोध से पहले यह एक ऑपरेशन किया जाएगा, और मेरे मामले में मैंने पहले beforeload ईवेंट के लिए श्रोता के रूप में लागू किया था। जब beforeload को निष्पादित किया जाता है, तो मैं श्रोता के ऑपरेशन पैरामीटर में नए पैरामीटर को beforeload( store, operation, eOpts ) जो documentation अनुसार है: पहले beforeload( store, operation, eOpts ) । अंतिम कार्यान्वयन कुछ ऐसा है:

store.on({
    beforeload: function (store, operation, opts) {
        Ext.apply(operation, {
            params: {
                filterName: Ext.getCmp('filterCombo').getValue()
            }
       });
    }
});