एक्स्ट्रीम जेएस में ट्रिविया गाइड

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

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

इसलिए, इस लेख में मैं उन समस्याओं का वर्णन करना चाहता हूं जो मैंने एक सामग्री प्रबंधन प्रणाली विकसित करने और इन समस्याओं को हल करते समय सामना किया था। सभी उदाहरण एक्सट जेएस संस्करण 3.4 पर परीक्षण किए गए हैं।

1. खिड़की की सामग्री का स्वचालित आकार।
कार्य: Ext.Window (Ext.form.FormPanel) में एक फ़ॉर्म एम्बेड करें। पहली बात जो मन में आती है:

Ext.onReady(function(){ var win = new Ext.Window({ title: "title", border: false, width: 400, height: 400, items: [{ width: 390, height: 380, items: [new Ext.form.FormPanel({ frame: true, items: {xtype: 'textfield'} })] }] }); win.show(); }); 

इस मामले में, डेवलपर को खिड़की को फिट करने के लिए फ़ॉर्म के आकार को "फिट" करना होगा। यदि इसे गलत तरीके से फिट किया जाता है, तो नीचे एक परेशान सफेद पट्टी दिखाई देती है:



इस स्थिति के लिए, एक्सट जेएस डेवलपर्स ने एक्स्ट.विंडो कॉन्फ़िगरेशन में लेआउट पैरामीटर प्रदान किया है। विशेष रूप से, लेआउट: 'फिट' का उपयोग इस मामले के लिए किया जाता है:

 Ext.onReady(function(){ var win = new Ext.Window({ title: "title", border: false, width: 400, height: 400, layout:'fit', items: [ new Ext.form.FormPanel({ frame: true, items: {xtype: 'textfield'} }) ] }); win.show(); }); 

2. फॉर्म फील्ड को 2 या अधिक कॉलम में अलग करना (या एक लाइन पर कई फॉर्म फील्ड का प्लेसमेंट)।
यदि आप बस फॉर्म फॉर्म में कई फॉर्म फील्ड रजिस्टर करते हैं, तो वे एक दूसरे के बिल्कुल नीचे होंगे, कुछ इस तरह से:

 Ext.onReady(function(){ var win = new Ext.Window({ title: "title", border: false, width: 400, height: 200, layout:'fit', items: [ new Ext.form.FormPanel({ frame: true, items: [{ xtype: 'textfield', fieldLabel: 'field1' },{ xtype: 'textfield', fieldLabel: 'field2' },{ xtype: 'textfield', fieldLabel: 'field3' },{ xtype: 'textfield', fieldLabel: 'field4' }] }) ] }); win.show(); }); 

हमें इसकी आवश्यकता कुछ इस तरह से होनी चाहिए:



यह इस तरह किया जाता है:
(सावधानी) कोड के अगले टुकड़े को समझना थोड़ा तार्किक सोच की आवश्यकता है)

 Ext.onReady(function(){ var win = new Ext.Window({ title: "title", border: false, width: 400, height: 200, layout:'fit', items: [ new Ext.form.FormPanel({ frame: true, //       layout: 'column', defaults: { xtype: 'form', columnWidth:0.5, labelAlign: 'top', anchor: '100%' }, //   // 1 items: [{ // 2,  1 items:[{ xtype: 'textfield', fieldLabel: 'field1' },{ xtype: 'textfield', fieldLabel: 'field2' }] },{ // 3,  2 items:[{ xtype: 'textfield', fieldLabel: 'field3' },{ xtype: 'textfield', fieldLabel: 'field4' }] }] }) ] }); win.show(); }); 

So. कोड विश्लेषण शुरू करते हैं। प्रपत्र को कॉलम में अलग करने के लिए आपको सबसे पहले लेआउट पैरामीटर की आवश्यकता होती है: 'कॉलम', जो उस फॉर्म को बताता है कि फॉर्म को कॉलम में विभाजित किया जाना चाहिए। इसके बाद, डिफॉल्ट्स पैरामीटर आता है, जो चाइल्ड आइटम के लिए डिफ़ॉल्ट सेटिंग्स की रिपोर्ट करता है। इस सरणी (ऑब्जेक्ट आइटम 2, आइटम 3) में ये ऑब्जेक्ट प्रत्येक ऑब्जेक्ट को पास किए जाते हैं।

डिफॉल्ट में इतने सारे पैरामीटर क्यों हैं और फॉर्म को केवल कॉलम में विभाजित करने की आवश्यकता क्यों है? मैं जवाब देता हूं:
xtype: 'form' - इस पैरामीटर के बिना, प्रत्येक फ़ील्ड के लिए फ़ील्डलेबल प्रदर्शित नहीं किया जाएगा,
कॉलमविद - डिफ़ॉल्ट कॉलम चौड़ाई निर्धारित करता है (ऑब्जेक्ट 2 और 3 में, आप कॉलम की चौड़ाई को ओवरराइड कर सकते हैं),
LabelAlign - फ़ील्डबेल की स्थिति को परिभाषित करता है (शीर्ष - शीर्ष),
लंगर - 2 और 3 वस्तुओं के प्रतिशत में चौड़ाई।

इस तथ्य पर भी ध्यान दें कि, पिछले उदाहरण के विपरीत, ऑब्जेक्ट 1 के आइटम में नेस्टिंग का एक और स्तर जोड़ा गया है।

3. ग्रिड में अभिलेखों के प्रतिपादन का प्रबंधन करना।
अक्सर ऐसा होता है कि आप इस सामग्री के भविष्य के मूल्य के आधार पर किसी तरह ग्रिड सेल की सामग्री को बदलना चाहते हैं। ग्रिड पैरामीटर - रेंडरर बचाव के लिए आता है।

मान लें कि हमारे पास शुरुआत में एक ग्रिड है:



स्रोत कोड:

 var data = { totalCount : 3, banners: [{"is_active": 0,"ID": 1},{"is_active": 0,"ID" : 3},{"is_active": 1,"ID": 4}] } var view = new Ext.Viewport({ layout: 'fit', items: [{ xtype: 'grid', columns: [ {header: "ID", align : 'left', width: 30, sortable: true, dataIndex: 'ID'}, { header: "", align : 'left', width: 100, sortable: true, dataIndex: 'is_active' } ], store: new Ext.data.GroupingStore({ data: data, fields: [{name: 'ID'},{name: 'is_active'}], reader: new Ext.data.JsonReader({ root: 'banners', totalProperty: 'totalCount', id: 'ID' }, Ext.data.Record.create([ {name: 'ID'}, {name: 'is_active'} ]) ) }), view: new Ext.grid.GridView({ forceFit: false, }), listeners: {} }] }); view.render(Ext.getBody()); }); 

आप यह कर सकते हैं:


स्रोत कोड:

 var renderActivity = function(val) { if(val == 1) return "<span style='color: green'>"+val+"</span>"; else return "<span style='color: red'>"+val+"</span>"; } var data = { totalCount : 3, banners: [{"is_active": 0,"ID": 1},{"is_active": 0,"ID": 3},{"is_active": 1,"ID": 4}] } var view = new Ext.Viewport({ layout: 'fit', items: [{ xtype: 'grid', columns: [ {header: "ID", align : 'left', width: 30, sortable: true, dataIndex: 'ID'}, { header: "", align : 'left', width: 100, sortable: true, dataIndex: 'is_active', renderer: renderActivity } ], store: new Ext.data.GroupingStore({ data: data, fields: [{name: 'ID'},{name: 'is_active'}], reader: new Ext.data.JsonReader({ root: 'banners', totalProperty: 'totalCount', id: 'ID' }, Ext.data.Record.create([ {name: 'ID'}, {name: 'is_active'} ]) ) }), view: new Ext.grid.GridView({ forceFit: false, }), listeners: {} }] }); view.render(Ext.getBody()); }); 

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

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

लगभग एक साल से एक्सट जेएस पर विकसित होने के बाद, मैंने "एक से अधिक कुत्तों को खाया।" मैंने इस तरह की बहुत सारी ट्राइफल्स जमा की हैं। इसलिए, यदि हेबरसोसाइटी एक्सटी जेएस पर मेरे लेखों को पढ़ना जारी रखना चाहती है, तो मुझे उन्हें लिखने में खुशी होगी।

इस पर, यदि आप कृपया, मेरा पहला लेख समाप्त करते हैं, मुझे आशा है कि आपको यह पसंद आया।