Ext.js - डेटा
डेटा पैकेज का उपयोग एप्लिकेशन के सभी डेटा को लोड करने और सहेजने के लिए किया जाता है।
डेटा पैकेज में कई वर्ग होते हैं लेकिन सबसे महत्वपूर्ण वर्ग हैं -
- Model
- Store
- Proxy
नमूना
मॉडल के लिए आधार वर्ग है Ext.data.Model। यह एक एप्लिकेशन में एक इकाई का प्रतिनिधित्व करता है। यह देखने के लिए स्टोर डेटा को बांधता है। यह दृश्य dataIndex के लिए बैकएंड डेटा ऑब्जेक्ट की मैपिंग है। डेटा को स्टोर की मदद से प्राप्त किया जाता है।
एक मॉडल बनाना
एक मॉडल बनाने के लिए, हमें Ext.data.Model वर्ग का विस्तार करना होगा और हमें फ़ील्ड्स, उनके नाम और मैपिंग को परिभाषित करने की आवश्यकता है।
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
]
});
यहां, नाम डेटाइंडेक्स के समान होना चाहिए, जिसे हम दृश्य में घोषित करते हैं और मैपिंग को डेटाबेस से स्थिर या गतिशील डेटा से मेल खाना चाहिए, जिसे स्टोर का उपयोग करके लाया जाना है।
दुकान
स्टोर के लिए बेस क्लास है Ext.data.Store। इसमें स्थानीय रूप से कैश किया गया डेटा होता है, जिसे मॉडल ऑब्जेक्ट की मदद से दृश्य पर प्रदान किया जाना है। स्टोर प्रॉक्सिस का उपयोग करके डेटा प्राप्त करता है, जिसमें बैकेंड डेटा को लाने के लिए सेवाओं के लिए परिभाषित पथ है।
स्टोर डेटा को दो तरीकों से प्राप्त किया जा सकता है - स्थिर या गतिशील।
स्थैतिक दुकान
स्थिर स्टोर के लिए, हमारे पास स्टोर में मौजूद सभी डेटा होगा जैसा कि निम्नलिखित कोड में दिखाया गया है।
Ext.create('Ext.data.Store', {
model: 'StudentDataModel',
data: [
{ name : "Asha", age : "16", marks : "90" },
{ name : "Vinit", age : "18", marks : "95" },
{ name : "Anand", age : "20", marks : "68" },
{ name : "Niharika", age : "21", marks : "86" },
{ name : "Manali", age : "22", marks : "57" }
];
});
गतिशील स्टोर
प्रॉक्सी का उपयोग करके गतिशील डेटा प्राप्त किया जा सकता है। हमारे पास प्रॉक्सी हो सकती है जो अजाक्स, रेस्ट और जसन से डेटा प्राप्त कर सकती है।
प्रतिनिधि
प्रॉक्सी के लिए बेस क्लास Ext.data.proxy.Proxy है। मॉडल डेटा के लोडिंग और बचत को संभालने के लिए मॉडल और स्टोर्स द्वारा प्रॉक्सी का उपयोग किया जाता है।
दो प्रकार के समीप हैं
- ग्राहक प्रॉक्सी
- सर्वर प्रॉक्सी
ग्राहक प्रॉक्सी
क्लाइंट प्रॉक्सी में HTML5 लोकल स्टोरेज का उपयोग करके मेमोरी और लोकल स्टोरेज शामिल है।
सर्वर प्रॉक्सी
सर्वर प्रॉक्सी, अजाक्स, जोंस डेटा और रेस्ट सर्विस का उपयोग करके रिमोट सर्वर से डेटा को संभालता है।
Defining proxies in the server
Ext.create('Ext.data.Store', {
model: 'StudentDataModel',
proxy : {
type : 'rest',
actionMethods : {
read : 'POST' // Get or Post type based on requirement
},
url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path
// which fetches data from database or Json file path where the data is stored
reader: {
type : 'json', // the type of data which is fetched is of JSON type
root : 'data'
},
}
});