शुभ दोपहर, प्रिय Habrausers।

हाल ही में, मैं एक्सट जेएस 4 और ज़ेंड फ्रेमवर्क 2 पर विकास कर रहा हूं।

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

तो ग्रिड, भाग 1

ग्रिड घटक आपको पेजिंग, सॉर्टिंग, फ़िल्टरिंग, असीमित घोंसले के शिकार, टेम्पलेट्स, कस्टम रेंडरर्स, कई प्लग-इन, एक इवेंट मॉडल, साथ ही साथ अजाक्स, आराम, एचटीएमएल 5, कुकीज़, सत्र और बहुत अधिक का उपयोग करके सभी सीआरयूडी संचालन के साथ बहुत लचीली और कार्यात्मक टेबल बनाने की अनुमति देता है।

पहले लेख में, मैं ग्रिड के साथ काम करने के सभी बुनियादी सिद्धांतों पर विचार करने जा रहा हूं (मैंने सभी उदाहरणों को यथासंभव सरल बनाने की कोशिश की, यह सुनिश्चित करने की कोशिश की कि उनमें से एक भी लाइन को हटाना असंभव था)।

सबसे आसान तालिका Ext.grid और Ext.data.ArrayStore

Ext.onReady(function() { var myData = [ ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], //.................. ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'], ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am'] ]; var store = Ext.create('Ext.data.ArrayStore', { fields: ['company','price','change','pctChange','lastChange'], data: myData }); Ext.create('Ext.grid.Panel', { store: store, columns: [ { text : 'Company', dataIndex: 'company' }, { text : 'Price', dataIndex: 'price' }, { text : 'Change', dataIndex: 'change' }, { text : '% Change', dataIndex: 'pctChange' }, { text : 'Last Updated', dataIndex: 'lastChange' } ], height: 350, width: 600, title: '   grid', renderTo: 'grid1' }); });

यह डेवलपर्स साइट से सबसे सरल उदाहरण पर आधारित है।

इस कोड को काम करने के लिए, निम्न सामग्री के साथ एक index.html फ़ाइल (या कोई अन्य) बनाएँ:

 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="/resources/css/ext-all.css" type="text/css" /> <script src="/ext-all.js" type="text/javascript"></script> <script src="/examples/grid1.js" type="text/javascript"></script> </head> <body> <p>  grid   Ext.data.ArrayStore</p> <div id="grid1"></div> </body> </html>

मैं इस कदम पर ध्यान केंद्रित नहीं करूंगा। आप हब पर संरचना से परिचित हो सकते हैं

कोड पर वापस!
लगभग हर Ext JS 4 एप्लिकेशन Ext.onReady (फ़ंक्शन () {...} से शुरू होता है। जो लोग jQuery का उपयोग करते हैं या उपयोग करते हैं, वे अपने एप्लिकेशन को कुछ इस तरह से शुरू करते हैं जैसे: jQuery (दस्तावेज़) पहले से ही (फ़ंक्शन () {। ..}), - दोनों प्रविष्टियों का लक्ष्य एक ही है - DOM और फ्रेमवर्क फ़ाइलों के लोड होने तक प्रतीक्षा करना।

सबसे पहले, हमने कोड में सीधे डेटा के साथ सामान्य गैर-सहयोगी दो-स्तरीय सरणी myData बनाया।

फिर, Ext.create निर्माण का उपयोग करते हुए, हमने Ext.data.ArrayStore वर्ग का एक ऑब्जेक्ट बनाया, एक साधारण रिपॉजिटरी, जो हमें हमारे जावास्क्रिप्ट जैसे साधारण जावास्क्रिप्ट सरणियों के साथ काम करने की अनुमति देता है।

नए ऑपरेटर का उपयोग करके एक ऑब्जेक्ट को अधिक परिचित तरीके से बनाया जा सकता है, उदाहरण के लिए, नए Ext.data.ArrayStore (...), लेकिन तब हमें मैन्युअल रूप से Ext.data.ArrayStore वर्ग के साथ फ़ाइल अपलोड करनी होगी।

सौभाग्य से इस मामले के लिए, Ext JS, Ext.require के निर्माण का प्रावधान करता है:

 Ext.require([ 'Ext.grid.*', 'Ext.data.*', ]);

इसलिए, उदाहरण के लिए, आप Ext.grid और Ext.data स्कोप के लिए सभी वर्ग फ़ाइलों को लोड कर सकते हैं।

स्टोर ऑब्जेक्ट का उद्देश्य खेतों को परिभाषित करना है, एक निश्चित डेटा संरचना और डेटा को स्वयं लोड करना है।

अंतिम चरण Ext.grid.Panel ऑब्जेक्ट को परिभाषित करना है।

हम स्टोर ऑब्जेक्ट को Ext.grid.Panel कंस्ट्रक्टर के पास देते हैं, डेटा के साथ काम करने के लिए, इसमें हम ग्रिड टेबल कॉलम और पैनल पैरामीटर परिभाषित करते हैं:

ऊंचाई (ऊंचाई), चौड़ाई (चौड़ाई), शीर्षक (शीर्षक) और आईडी-कंटेनर (रेंडरटॉ) की आईडी, जहां एक्सट जेएस हमारी मेज को प्रस्तुत करेगा।

वह सब है!

हमने जो कुछ भी किया है वह एक साधारण ग्रिड तालिका बनाने के लिए पर्याप्त है जो केवल डेटा और डिफ़ॉल्ट सॉर्टिंग के साथ कई पंक्तियों को प्रदर्शित करता है।

आगे देखते हुए, मैं ध्यान देता हूं कि भंडारण में फ़ील्ड्स की संख्या ग्रिड में स्तंभों की संख्या के बराबर नहीं होती है - वे केवल उस डेटा की संरचना निर्धारित करते हैं जिसे आप की तरह प्रदर्शित किया जा सकता है।

इस स्क्रिप्ट के परिणामस्वरूप, हमें सबसे सरल स्थैतिक ग्रिड लेबल मिलता है:

लाइव डेमो

हम डेटा के साथ काम करने के लिए इसे और अधिक सुविधाजनक बनाने के लिए Ext.data.ArrayStore को Ext.data.Store से बदल देंगे।

ग्रिड और Ext.data.Store

 Ext.onReady(function() { var myData = [ { company: 'Alcoa Inc', price: 71.72, change: 0.02, pctChange: 0.03, lastChange: '9/1 12:00am' }, { company: 'Altria Group Inc', price: 83.81, change: 0.28, pctChange: 0.34, lastChange: '9/1 12:00am' }, { company: 'American International Group, Inc.', price: 81.82, change: 0.12, pctChange: 0.63, lastChange: '9/1 12:00am' } ]; var store = Ext.create('Ext.data.Store', { fields: ['company','price','change','pctChange','lastChange'], data: myData }); var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ { text : 'Company', dataIndex: 'company' }, { text : 'Price', dataIndex: 'price' }, { text : 'Change', dataIndex: 'change' }, { text : '% Change', dataIndex: 'pctChange' }, { text : 'Last Updated', dataIndex: 'lastChange' } ], height: 350, width: 600, title: '   grid', renderTo: 'grid2' }); });

अब myData में डेटा ऑब्जेक्ट्स (हैश) का एक संग्रह है, जिसके साथ हम आगे काम करने जा रहे हैं।

स्क्रीन पर हम एक ही टेबल देखते हैं (सिवाय इसके कि इसमें डेटा कम है और इसका अलग हेडर है)।

अब हमारे आवेदन में डेटा मॉडल जोड़ें।

ग्रिड, Ext.data.Store और Ext.data.Model

 Ext.onReady(function() { var myData = [ { company: 'Alcoa Inc', price: 71.72, change: 0.02, pctChange: 0.03, lastChange: '9/1 12:00am' }, { company: 'Altria Group Inc', price: 83.81, change: 0.28, pctChange: 0.34, lastChange: '9/1 12:00am' }, { company: 'American International Group, Inc.', price: 81.82, change: 0.12, pctChange: 0.63, lastChange: '9/1 12:00am' } ]; Ext.define('Model', { extend: 'Ext.data.Model', fields: ['company','price','change','pctChange','lastChange'] }); var store = Ext.create('Ext.data.Store', { model: 'Model', data: myData }); var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ { text : 'Company', dataIndex: 'company' }, { text : 'Price', dataIndex: 'price' }, { text : 'Change', dataIndex: 'change' }, { text : '% Change', dataIndex: 'pctChange' }, { text : 'Last Updated', dataIndex: 'lastChange' } ], height: 350, width: 600, title: '   grid', renderTo: 'grid3' }); });

मॉडल के बारे में कुछ शब्द: यदि स्टोर डेटा का संग्रह है, तो मॉडल इस डेटा का एक उदाहरण है। पहली नज़र में, मॉडल निरर्थक लग सकता है, लेकिन इसके बिना, हम सरल तरीके से बहु-स्तरीय एम्बेडेड डेटा के साथ काम नहीं कर पाएंगे।

यह कोड में डेटा संग्रहीत करने से छुटकारा पाने का समय है, इसके लिए हमें प्रॉक्सी की आवश्यकता है।

ग्रिड और प्रॉक्सी

 Ext.onReady(function() { Ext.define('myModel', { extend: 'Ext.data.Model', fields: ['company','price','change','pctChange','lastChange'] }); var store = Ext.create('Ext.data.Store', { model: 'myModel', proxy: { type: 'ajax', url: '/examples/data/data.json', reader: { type: 'json', root: 'data' } }, autoLoad: true }); var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ { text : 'Company', dataIndex: 'company' }, { text : 'Price', dataIndex: 'price' }, { text : 'Change', dataIndex: 'change' }, { text : '% Change', dataIndex: 'pctChange' }, { text : 'Last Updated', dataIndex: 'lastChange' } ], height: 350, width: 600, title: '   grid', renderTo: 'grid4' }); });

इस क्षण से, मज़ा शुरू होता है - हमने अपनी ग्रिड तालिका से हार्ड-कोडित डेटा को हटा दिया और अपनी रिपॉजिटरी में समीपस्थ परिभाषित किया।

प्रॉक्सी ऑब्जेक्ट आपको एग्रैक्स स्तर पर ऐजैक्स, बाकी या स्थानीय भंडारण का उपयोग करके बहुत आसानी से किसी भी सीआरयूडी प्रक्रिया को करने की अनुमति देता है, विशेष पाठकों का उपयोग डेटा (अगले लेख में) को डिक्रिप्ट करने के लिए करता है।

हम ajax प्रॉक्सी का उपयोग करेंगे, जो स्वचालित रूप से (autoLoad: true) निर्दिष्ट url पर डेटा लोड करता है (अनुरोध डिफ़ॉल्ट रूप से GET विधि द्वारा निष्पादित होता है), और निर्दिष्ट रीडर उन्हें json प्रारूप से डिक्रिप्ट करने का प्रयास करेगा। रूट: 'डेटा' पाठक को इंगित करता है कि डेटा के साथ रूट नोड में कुंजी "डेटा" है।

एक महत्वपूर्ण बिंदु - डिफ़ॉल्ट रूप से, ग्रिड केवल 25 लाइनें प्रदर्शित करता है। इसे ठीक करने के लिए, आपको इस तरह से हमारे भंडारण के आरंभ में पेजसाइज संपत्ति को जोड़ना होगा:

  var store = Ext.create('Ext.data.Store', { model: 'myModel', pageSize: 50, proxy: { type: 'ajax', url: '/examples/data/data.json', reader: { type: 'json', root: 'data' } }, autoLoad: true });

ग्रिड तालिका में पृष्ठांकन को सक्षम करने के लिए, बस कुछ "टूलबार" में ग्रिड आरंभीकरण के लिए Ext.PagingToolbar ऑब्जेक्ट जोड़ें, उदाहरण के लिए, bbar में :

  var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ { text : 'Company', dataIndex: 'company' }, { text : 'Price', dataIndex: 'price' }, { text : 'Change', dataIndex: 'change' }, { text : '% Change', dataIndex: 'pctChange' }, { text : 'Last Updated', dataIndex: 'lastChange' } ], height: 350, width: 600, title: '   grid', renderTo: 'grid5', bbar: Ext.create('Ext.PagingToolbar', { store: store }) });

अब हमारे पास पेजिनेशन है:

लाइव डेमो

मैं यह बताना चाहता हूं कि ग्रिड टेबल के सभी कॉलम डिफ़ॉल्ट रूप से स्थानीय छँटाई का समर्थन करते हैं, जब तक कि अन्यथा संकेत न दिया जाए। यदि आपको सर्वर पर डेटा को सॉर्ट करने की आवश्यकता है, तो आपको "रिमोटसोर्ट: ट्रू" प्रॉपर्टी का उपयोग करके इसे हमारे रिपॉजिटरी में निर्दिष्ट करना होगा:

 Ext.onReady(function() { Ext.define('myModel', { extend: 'Ext.data.Model', fields: ['company','price','change','pctChange','lastChange'] }); var store = Ext.create('Ext.data.Store', { model: 'myModel', proxy: { type: 'ajax', url: '/examples/data/data.json', reader: { type: 'json', root: 'data' } }, autoLoad: true, remoteSort: true }); var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ { text : 'Company', dataIndex: 'company' }, { text : 'Price', dataIndex: 'price' }, { text : 'Change', dataIndex: 'change' }, { text : '% Change', dataIndex: 'pctChange' }, { text : 'Last Updated', dataIndex: 'lastChange' } ], height: 350, width: 600, title: '   grid', renderTo: 'grid6', bbar: Ext.create('Ext.PagingToolbar', { store: store }) }); });

अब जब आप क्रमबद्ध करने की कोशिश करते हैं, तो आप फायरबग में निम्न चित्र देख सकते हैं:

अब देखते हैं कि डेटा फ़िल्टरिंग को कैसे लागू किया जा सकता है।

ग्रिड टेबल में फिल्टर

 Ext.Loader.setPath('Ext.ux', '/public/ux'); Ext.require([ 'Ext.ux.grid.FiltersFeature', ]); Ext.onReady(function() { Ext.define('myModel', { extend: 'Ext.data.Model', fields: ['company','price','change','pctChange','lastChange'] }); var store = Ext.create('Ext.data.Store', { model: 'myModel', proxy: { type: 'ajax', url: '/public/examples/data/data.json', reader: { type: 'json', root: 'data' } }, autoLoad: true, remoteSort: true }); var filters = { ftype: 'filters', encode: true, local: false }; var grid = Ext.create('Ext.grid.Panel', { store: store, features: [filters], columns: [ { text : 'Company', dataIndex: 'company', filter: { type: 'string' } }, { text : 'Price', dataIndex: 'price', filter: { type: 'int' } }, { text : 'Change', dataIndex: 'change', filter: { type: 'float' } }, { text : '% Change', dataIndex: 'pctChange', filter: { type: 'float' } }, { text : 'Last Updated', dataIndex: 'lastChange', filter: { type: 'date' } } ], height: 350, width: 600, title: '  grid  ', renderTo: 'grid8', bbar: Ext.create('Ext.PagingToolbar', { store: store }) }); });

पहली बार, हमारे ग्रिड तालिका के कोड में एक प्रविष्टि दिखाई दी:

 Ext.Loader.setPath('Ext.ux', '/public/ux'); Ext.require([ 'Ext.ux.grid.FiltersFeature', ]);

यह प्रविष्टि Ext JS को Ext.ux.grid.iltersFeature वर्ग को / public / ux / ग्रिड निर्देशिका से लोड करने के लिए मजबूर करती है, जो कि ग्रिड तालिका में काम करने के लिए फ़िल्टर के लिए आवश्यक है।

एक अन्य नवीनता है फिल्टर ऑब्जेक्ट की इनिशियलाइज़ेशन जिसमें हमारे फ़िल्टर का कॉन्फ़िगरेशन है:

 var filters = { ftype: 'filters', encode: true, local: false };

यहाँ हम सांकेतिक शब्दों में बदलना और स्थानीय गुणों में रुचि रखते हैं। जैसा कि आप शायद पहले से ही अनुमान लगा चुके हैं, स्थानीय: झूठी संपत्ति आपको सर्वर पर फ़िल्टर मान भेजने के लिए मजबूर करती है, और सांकेतिक शब्दों में बदलना: सच्चा आपको सर्वर पर फ़िल्टर डेटा प्राप्त करने की अनुमति देता है, न कि एक स्ट्रिंग स्ट्रिंग के रूप में।

इसलिए, फ़िल्टरिंग कॉन्फ़िगर किया गया है, यह तालिका के स्तंभों में इंगित करने के लिए बना हुआ है: कॉलम में उपयोग करने के लिए कौन सा फ़िल्टर:

 filter: { type: 'string' }

हमारे उदाहरण में, फिल्टर का उपयोग किया जाता है: स्ट्रिंग, इंट, फ्लोट और तिथि, - उनमें से प्रत्येक का संचालन तालिका में कॉलम शीर्षक पर क्लिक करके देखा जा सकता है, फ़िल्टर तत्व का चयन करें
और इसके मूल्य को निर्दिष्ट करें, जिसके बाद ऑनकॉन्ग इवेंट में आग लग जाएगी; टेबल डेटा अपडेट हो जाएगा। आप फ़ायरबग में देख सकते हैं कि कैसे जेएस सर्वर के लिए एक अजाक्स अनुरोध करता है।

लाइव डेमो (क्षमा करें, फ़िल्टर का उपयोग करते समय डेटा नहीं बदलता है, - कूड़ेदान में सामने वाले हिस्से को कैश किया गया है, क्योंकि मैं हबल प्रभाव से डरता हूं)

लेख को छोड़कर, मैं अपनी तालिका को थोड़ा सजाना चाहता हूं।

सबसे पहले, हम मॉडल में फ़ील्ड के प्रकारों को इंगित करते हैं:

 fields: [ {name: 'weight', type: 'int'}, {name: 'company', type: 'string'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'string'} ]

दूसरे, GET के साथ डेटा मांगना बंद करें:

 Ext.create('Ext.data.Store', { pageSize: 10, model: 'myModel', proxy: { type: 'ajax', url: '/examples/data/data2.json', actionMethods: { read: 'POST' }, reader: { type: 'json', root: 'data', totalProperty: 'totalCount' } }, autoLoad: true, remoteSort: true });

टेबल कॉलम को रबर बनाएं:

 { text : '% Change', flex:1, dataIndex: 'pctChange' },

चलिए एक भंडारण वस्तु बनाने की कोशिश करते हैं:

 store: Ext.data.StoreManager.lookup('gridStore'),

चलो ग्रिड कॉलम प्रदर्शित करने के लिए सबसे सरल हैंडलर बनाते हैं - इसे भोला-भाला लगता है।

 renderer: function(value){ if(value > 75){ value = '<span style="color:#ff0000;">' + value + '</span>'; } else { value = '<span style="color:#00ff00;">' + value + '</span>'; } return value; }

और अंत में, हमारे पेजिनेटर में टेबल प्रविष्टियों की कुल संख्या के बारे में जानकारी जोड़ें:

 bbar: Ext.create('Ext.PagingToolbar', { store: store, displayInfo: true, displayMsg: 'Displaying topics {0} - {1} of {2}', emptyMsg: "No topics to display" })

(कुल संख्या पर डेटा json में आता है, जैसा कि हमारी रिपॉजिटरी में टोटलप्रॉपर्टी में दर्शाया गया है)।

इसे एक साथ रखना:

 Ext.Loader.setPath('Ext.ux', '/ux'); Ext.require([ 'Ext.ux.grid.FiltersFeature', ]); Ext.onReady(function() { Ext.define('myModel', { extend: 'Ext.data.Model', fields: [ {name: 'weight', type: 'int'}, {name: 'company', type: 'string'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'string'} ] }); Ext.create('Ext.data.Store', { pageSize: 10, model: 'myModel', proxy: { type: 'ajax', url: '/examples/data/data2.json', actionMethods: { read: 'POST' }, reader: { type: 'json', root: 'data', totalProperty: 'totalCount' } }, autoLoad: true, remoteSort: true }); var filters = { ftype: 'filters', encode: true, local: false }; var grid = Ext.create('Ext.grid.Panel', { store: Ext.data.StoreManager.lookup('gridStore'), features: [filters], columns: [ { text : 'Weight', dataIndex: 'weight', width: 50, sortable: false, filter: { type: 'int' } }, { text : 'Company', dataIndex: 'company', flex:1, filter: { type: 'string' } }, { text : 'Price', dataIndex: 'price', flex:1, renderer: function(value){ if(value > 75){ value = '<span style="color:#ff0000;">' + value + '</span>'; } else { value = '<span style="color:#00ff00;">' + value + '</span>'; } return value; } }, { text : 'Change', flex:1, dataIndex: 'change' }, { text : '% Change', flex:1, dataIndex: 'pctChange' }, { text : 'Last Updated', flex:1, dataIndex: 'lastChange', filter: { type: 'date' } } ], height: 350, width: 600, title: ' ...', renderTo: 'grid9', bbar: Ext.create('Ext.PagingToolbar', { store: store, displayInfo: true, displayMsg: 'Displaying topics {0} - {1} of {2}', emptyMsg: "No topics to display" }) }); });

और हम सर्वर, पेजिनेशन और सरलतम कस्टम-रेंडरर पर छँटाई और छानने के साथ एक सुंदर ग्रिड टेबल देखते हैं:

उपसंहार।

प्रिय उपयोगकर्ताओं, मैं वास्तव में आपकी वफादारी की आशा करता हूं - यह मेरा पहला लेख है। प्रिय यूएफओ, मैं अपने लेख की पश्चाताप के लिए माफी मांगता हूं, मैंने मूल रूप से हैबर के लिए लिखा था, लेकिन मैं डेमो (और कुछ और) के लिए एक लिंक फेंकना चाहता था। अशुद्धियों, जाम, टिप्पणियों, अनुरोधों आदि के बारे में। मैं एक व्यक्तिगत में लिखने के लिए कहता हूं। यदि यह लेख किसी को भी रुचिकर लगे, तो मुझे एक्सएस जेएस 4 पर लिखना जारी रखने में खुशी होगी, - मैं एक्सटी जेएस ग्रिड (प्लगइन्स, टेम्प्लेट, ईवेंट्स, प्रॉपर्टीग्रिड का एक गुच्छा, सीआरयूडी और पाठकों ...) पर एक निरंतरता लेख लिखने की योजना बना रहा हूं, साथ ही साथ हाइलाइट भी करता हूं। एक्सट जेएस 4 ढांचे के अन्य पहलू। आपका ध्यान के लिए धन्यवाद।

जेएस 4 ग्रिड "उंगलियों पर"