🕛 ⛺️ 💘 पाठ 2. एक्स्ट.नेट पर अपना आवेदन बनाना, भाग 1 ✊🏼 🏌️ 🅰️

कंटेनर (कंटेनर, पैनल, टैबपैनल, व्यूपोर्ट) और लेआउट (बॉर्डरलेआउट, एकॉर्डियन लयआउट, कार्डलैट)

परिचय

अच्छा, चलिए शुरू करते हैं। हमारा अंतिम लक्ष्य Microsoft Outlook 2010 के समान एक इंटरफ़ेस बनाना होगा। वास्तव में यह इंटरफ़ेस क्यों? कारण सरल है - क्योंकि Ext.NET अक्सर कॉर्पोरेट क्षेत्र में या उसके करीब उपयोग किया जाता है और इस दर्शकों का उपयोगकर्ता अक्सर आउटलुक के समान कुछ देखना चाहता है। साथ ही, यह मार्कअप काफी जटिल है और इसलिए दिलचस्प है। चिंता न करें, आप कई अन्य इंटरफेस बना सकते हैं, लेकिन यह किसी भी तरह बाद में है। मैं तुरंत एक आरक्षण करूंगा कि हम आउटलुक इंटरफेस की पूरी नकल नहीं करेंगे, हम खुद को केवल सबसे आवश्यक तक ही सीमित रखेंगे ।

सबसे पहले, एक खाली ASP.NET एप्लिकेशन बनाएं और इसे " OutlookInterfaceWithExtNet " कहें ।

"पैकेज प्रबंधक कंसोल ( उपकरण -> लाइब्रेरी पैकेज प्रबंधक -> पैकेज प्रबंधक कंसोल ) चलाएं।" और निम्न कमांड " पीएम -> इंस्टाल-पैकेज एक्सट्रीम.प्रे" टाइप करें । NuGet का उपयोग करके हम Ext.NET आयात करते हैं और लगभग वही एप्लिकेशन प्राप्त करते हैं जो पिछले पाठ में था

हम "Web.config" को ट्वीक करेंगे ताकि हम हर जगह Ext.NET घटकों के साथ एक असेंबली लिंक न जोड़ें।

"Ext.NET.Default.aspx" फ़ाइल को प्रोजेक्ट से हटा दें, हमें इस प्रोजेक्ट में इसकी आवश्यकता नहीं होगी।

ViewPort, BorderLayout और AccordionLayout

अब जब सभी तैयारियां पूरी हो गई हैं, तो मार्कअप को निम्न उदाहरण http://examples.ext.net/#/ViewPort/Basic/Built_in_Markup/ पर नई फ़ाइल "Default.aspx" से कॉपी करें। आइए विधानसभा पंजीकरण हटा दें, यह पहले से ही Web.config में हमारे साथ पंजीकृत है। हम निम्नलिखित मार्कअप प्राप्त करते हैं:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Viewport with BorderLayout - Ext.NET Examples</title> </head> <body> <ext:ResourceManager runat="server" /> <ext:Viewport runat="server" Layout="BorderLayout"> <Items> <ext:Panel runat="server" Title="North" Region="North" Split="true" Height="150" BodyPadding="6" Html="North" Collapsible="true" /> <ext:Panel runat="server" Title="West" Region="West" Layout="AccordionLayout" Width="225" MinWidth="225" MaxWidth="400" Split="true" Collapsible="true"> <Items> <ext:Panel runat="server" Title="Navigation" Border="false" BodyPadding="6" Icon="FolderGo" Html="West" /> <ext:Panel runat="server" Title="Settings" Border="false" BodyPadding="6" Icon="FolderWrench" Html="Some settings in here" /> </Items> </ext:Panel> <ext:TabPanel runat="server" Region="Center"> <Items> <ext:Panel runat="server" Title="Center" Border="false" BodyPadding="6" Html="<h1>Viewport with BorderLayout</h1>" /> <ext:Panel runat="server" Title="Close Me" Closable="true" Border="false" BodyPadding="6" Html="Closeable Tab" /> </Items> </ext:TabPanel> <ext:Panel runat="server" Title="East" Region="East" Collapsible="true" Split="true" MinWidth="225" Width="225" Layout="Fit"> <Items> <ext:TabPanel runat="server" ActiveTabIndex="1" TabPosition="Bottom" Border="false"> <Items> <ext:Panel runat="server" Title="Tab 1" Border="false" BodyPadding="6" Html="East Tab 1" /> <ext:Panel runat="server" Title="Tab 2" Closable="true" Border="false" BodyPadding="6" Html="East Tab 2" /> </Items> </ext:TabPanel> </Items> </ext:Panel> <ext:Panel runat="server" Title="South" Region="South" Split="true" Collapsible="true" Height="150" BodyPadding="6" Html="South" /> </Items> </ext:Viewport> </body> </html>

हम इस पृष्ठ पर निम्नलिखित मार्कअप ट्री देखते हैं, हमारे लिए महत्वपूर्ण गुण कोष्ठक में दर्शाए गए हैं :

व्यूपोर्ट
- पैनल ( क्षेत्र = "उत्तर" )
- पैनल ( लेआउट = "AccordionLayout", क्षेत्र = "पश्चिम )
  - पैनल
  - पैनल
- TabPanel ( क्षेत्र = "केंद्र" )
  - पैनल ( शीर्षक = "केंद्र" )
  - पैनल ( शीर्षक = "मुझे बंद करें" )
- पैनल ( क्षेत्र = "पूर्व" )
  - TabPanel ( TabPosition = "निचला" )
    - पैनल ( शीर्षक = "टैब 1" )
    - पैनल ( शीर्षक = "टैब 2" )
- पैनल ( क्षेत्र = "दक्षिण" )

जुदा करना शुरू करने से पहले, आइए देखें कि ब्राउज़र में क्या प्रदर्शित किया गया है। इस पृष्ठ को डिफ़ॉल्ट पृष्ठ बनाएं और इसे चलाएं। हम 5 भागों में चिह्नित एक क्षेत्र देखेंगे, और यह पृष्ठ के पूरे क्षेत्र में व्याप्त है।

अब समझते हैं कि यह सब कैसे हुआ। आइए सबसे महत्वपूर्ण नोड के साथ शुरू करें - व्यूपोर्ट के साथ। Ext.NET में कंटेनरों की एक विस्तृत विविधता है। मुख्य भूमिका, जो कई अन्य नियंत्रण रखती है। उनमें से सभी AbstractContainer वर्ग से विरासत में मिले हैं और एक विशेष आइटम संग्रह है जिसमें बाल नियंत्रण शामिल हैं।
हमारे मार्कअप में, हम पेड़ के मूल में एक विशेष कंटेनर देखते हैं, इसे " व्यूपोर्ट " कहा जाता है, इसकी एक दिलचस्प संपत्ति है जो इसे बाकी कंटेनरों से अलग करती है, यह पृष्ठ पर पूरे उपलब्ध क्षेत्र पर कब्जा कर लेता है। आप अपनी ब्राउज़र विंडो को अपनी इच्छानुसार आकार दे सकते हैं और ViewPort हमेशा इसके साथ-साथ खिंचाव करेगा, सभी उपलब्ध स्थान को ऊपर ले जाएगा। इसलिए, मार्कअप में इसे मूल तत्व के रूप में उपयोग करना सुविधाजनक है। लेकिन इसमें एक प्रतिबंध है, पृष्ठ पर केवल एक ही व्यूपोर्ट हो सकता है , जो स्वयं के लिए तार्किक है, क्योंकि आपके पास केवल एक ब्राउज़र विंडो है।
अब आइए ViewPort के लेआउट विशेषता पर ध्यान दें , जिसमें " बॉर्डर " का मान है। इसका एक उल्टा मकसद है और वे आमतौर पर एक साथ उपयोग किए जाते हैं। आइए इस विशेषता को हटा दें और देखें कि क्या होता है।

सिद्धांत रूप में, कुछ भी बुरा नहीं हुआ, केवल हमारे व्यूपोर्ट के अंदर के तत्व एक दूसरे के ऊपर खड़े थे। HTML में ब्लॉक तत्वों के लिए विशिष्ट व्यवहार। कारण इस तथ्य में निहित है कि लेआउट विशेषता कंटेनर में तत्वों को व्यवस्थित करने के तरीके को इंगित करती है। लेआउटकॉन्फिग भी है, जो लेआउट की ठीक-ठीक ट्यूनिंग करता है। इन गुणों को AbstractContainer बेस क्लास में परिभाषित किया गया है और Ext.NET के सभी कंटेनर इस संपत्ति को प्राप्त करते हैं।

यदि आप रुचि रखते हैं कि अन्य लेआउट क्या हैं, तो आप लेआउट नोड में http://examples.ext.net पर देख सकते हैं। अब हम केवल उन पर चर्चा करेंगे जिनकी हमें आवश्यकता होगी। हालाँकि, आप एक्सटराज प्री, http://rawberg.com/wp-content/uploads/ExtJS-Layouts.pdf के अनुसार एक अच्छा मार्कअप गाइड पढ़ सकते हैं। यह मार्कअप के साथ काम करने के लिए महत्वपूर्ण बिंदुओं का विवरण देता है, जो कि एक्स्ट.नेट के लिए सही हैं।

हमारे विशेष मामले में, हम BorderLayout का उपयोग करते हैं , यह कंटेनर के बच्चों को रखता है, हमारे मामले में यह व्यूपोर्ट है, जिसमें अधिकतम पांच भाग हैं या न्यूनतम एक है। यह समझने के लिए कि वह उन्हें किस सिद्धांत पर रखता है, आइए देखें ViewPort के बाल तत्व। इसमें चार पैनल्स और एक टैबपैनल होता है और प्रत्येक में सेट से एक मान के साथ एक विशेषता " क्षेत्र" होता है : " उत्तर", "पश्चिम", "केंद्र", "पूर्व", "दक्षिण" । जैसा कि आप शायद पहले से ही अनुमान लगा चुके हैं, वे 4 कार्डिनल बिंदु और केंद्रीय तत्व की ओर इशारा करते हैं, अर्थात्। इन तत्वों को व्यूपोर्ट कंटेनर के अंदर रखने के लिए। बॉर्डर मार्कअप में निम्नलिखित नियम हैं:

हमेशा क्षेत्र = "केंद्र" विशेषता वाला बच्चा होना चाहिए । इसलिए, इस मार्कअप में कम से कम एक तत्व होना चाहिए
यह केंद्रीय तत्व अंतरिक्ष को लेता है जो मार्कअप में शामिल अन्य सभी तत्वों को स्थान आवंटित करने के बाद रहता है।

मूल रूप से, बॉर्डरलैट में अब कुछ भी जटिल नहीं है। आइए संक्षेप:

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

मेरा मानना है कि कई लोगों ने मूल्य क्षेत्र = "पश्चिम" और शीर्षक "पश्चिम", या इसके लेआउट विशेषता के मूल्य के साथ पैनल पर ध्यान दिया। इसके बच्चों के प्रदर्शन को देखें। उन्हें एक तथाकथित समझौते में वर्गीकृत किया गया है। यह उस विशेषता के मूल्य का उपयोग करके किया जाता है जिसे हम पहले से जानते हैं - लेआउट = "समझौते"। सिद्धांत रूप में, यह मुश्किल नहीं है, इसलिए हम AccordionLayout पर नहीं झुकेंगे ।

कंटेनर, पैनल, टैबपाल

नियंत्रण कक्ष Ext.NET में मुख्य कंटेनर है।

पैनल क्लास के मुख्य गुणों पर विचार करें:

संपत्ति का नाम	टाइप	से निहित	विवरण
AnimCollapse	bool	AbstractPanel	यह दर्शाता है कि पैनल को छोटा और छोटा करना है या नहीं। यह केवल तभी समझ में आता है जब Collapsible संपत्ति सत्य है।
BottomBar	Ext.Net.ToolbarCollection	AbstractPanel	आइटम का एक संग्रह जो पैनल के बहुत नीचे प्रदर्शित किया जाएगा।
बंद करने योग्य	bool	AbstractPanel	क्या मैं पैनल बंद कर सकता हूं?
CollapseMode	Ext.Net.CollapseMode	AbstractPanel	परिभाषित करता है कि न्यूनतम बटन कैसे प्रदर्शित होता है। (Enum) CollapseMode गणना के मूल्यों में से एक लेता है: डिफ़ॉल्ट, मिनी, प्लेसहोल्डर। यह केवल तभी समझ में आता है जब Collapsible संपत्ति सत्य है। डिफ़ॉल्ट 'डिफ़ॉल्ट' है।
खुलने और बंधनेवाला	bool	AbstractPanel	इंगित करता है कि क्या पैनल को छोटा किया जा सकता है। चूक झूठी है।
चूक	Ext.Net.ParameterCollection	AbstractContainer	पैरामीटर का सेट जो कंटेनर के प्रत्येक तत्व में जोड़ा जाएगा।
DefaultType	तार	AbstractContainer	डिफ़ॉल्ट बच्चों के लिए xtype निर्दिष्ट करता है। डिफ़ॉल्ट 'पैनल' है। एक्सटाइप एक्सटीजेएस में एक अद्वितीय वर्ग पहचानकर्ता है। और अधिक पढ़ें docs.sencha.com/ext-js/4-1/# !/Api/Ext.AbstractComponent-cfg-xtype
FooterBar	Ext.Net.ToolbarCollection	AbstractPanel	आइटम का एक संग्रह जो पैनल के नीचे प्रदर्शित किया जाएगा।
आइटम	Ext.Net.ItemsCollection <AbstractComponent>	AbstractContainer	घटकों का सेट जो कंटेनर के अंदर प्रदर्शित किया जाएगा
ख़ाका	तार	AbstractContainer	एक कंटेनर में वस्तुओं के लेआउट को इंगित करता है
LayoutConfig	Ext.Net.LayoutConfigCollection	AbstractContainer	कंटेनर में तत्वों के लेआउट के लिए पैरामीटर / सेटिंग्स इंगित करता है
LeftBar	Ext.Net.ToolbarCollection	AbstractPanel	पैनल के बाईं ओर प्रदर्शित होने वाली वस्तुओं का एक संग्रह।
RightBar	Ext.Net.ToolbarCollection	AbstractPanel	आइटम का एक संग्रह जो पैनल के दाईं ओर प्रदर्शित किया जाएगा।
शीर्षक	तार	AbstractPanel	पैनल का शीर्षक। डिफ़ॉल्ट रूप से ''
उपकरण	Ext.Net.ToolsCollection	AbstractPanel	बटन का सेट जो पैनल शीर्षक के बगल में दिखाई देता है। आमतौर पर मदद के लिए उपयोग किया जाता है, कम से कम बटन बंद करें
topbar	Ext.Net.ToolbarCollection	AbstractPanel	पैनल के शीर्ष पर प्रदर्शित होने वाली वस्तुओं का एक संग्रह।

पैनल के बजाय , आप क्लाइंट-साइड रेंडरिंग को गति देने के लिए एब्सट्रैक्ट के एक सरल कार्यान्वयन कंटेनर का उपयोग कर सकते हैं। आइए देखें कि क्या होता है अगर हम पैनल के बजाय कंटेनर का उपयोग करते हैं, तो व्यूपोर्ट के बाल तत्व। हमारे द्वारा उपयोग किया जाने वाला कोड निम्नलिखित है:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Viewport with BorderLayout - Ext.NET Examples</title> </head> <body> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout"> <Items> <ext:Container ID="Panel1" runat="server" Title="North" Region="North" Split="true" Height="150" BodyPadding="6" Html="North" Collapsible="true" /> <ext:Container ID="Panel2" runat="server" Title="West" Region="West" Layout="AccordionLayout" Width="225" MinWidth="225" MaxWidth="400" Split="true" Collapsible="true"> <Items> <ext:Panel ID="Panel3" runat="server" Title="Navigation" Border="false" BodyPadding="6" Icon="FolderGo" Html="West" /> <ext:Panel ID="Panel4" runat="server" Title="Settings" Border="false" BodyPadding="6" Icon="FolderWrench" Html="Some settings in here" /> </Items> </ext:Container> <ext:TabPanel ID="TabPanel1" runat="server" Region="Center"> <Items> <ext:Container ID="Panel5" runat="server" Title="Center" Border="false" BodyPadding="6" Html="<h1>Viewport with BorderLayout</h1>" /> <ext:Container ID="Panel6" runat="server" Title="Close Me" Closable="true" Border="false" BodyPadding="6" Html="Closeable Tab" /> </Items> </ext:TabPanel> <ext:Container ID="Panel7" runat="server" Title="East" Region="East" Collapsible="true" Split="true" MinWidth="225" Width="225" Layout="Fit"> <Items> <ext:TabPanel ID="TabPanel2" runat="server" ActiveTabIndex="1" TabPosition="Bottom" Border="false"> <Items> <ext:Container ID="Panel8" runat="server" Title="Tab 1" Border="false" BodyPadding="6" Html="East Tab 1" /> <ext:Container ID="Panel9" runat="server" Title="Tab 2" Closable="true" Border="false" BodyPadding="6" Html="East Tab 2" /> </Items> </ext:TabPanel> </Items> </ext:Container> <ext:Container ID="Panel10" runat="server" Title="South" Region="South" Split="true" Collapsible="true" Height="150" BodyPadding="6" Html="South" /> </Items> </ext:Viewport> </body> </html>

आयाम संरक्षित हैं और तत्वों की सामग्री बनी हुई है। विशुद्ध रूप से नेत्रहीन हमने केवल पैनल हेडर खो दिए, सीमा और पृष्ठभूमि पारदर्शी हो गई। एक छोटा बटन भी खो दिया, जिसने पैनल को केंद्रीय तत्व के लिए जगह बढ़ाने के लिए ध्वस्त करने की अनुमति दी, इसकी उपस्थिति निम्नलिखित विशेषता के मूल्य द्वारा प्रदान की गई थी - Collapsible = "true"। लेकिन यह विशेषता कंटेनर में समर्थित नहीं है , और यह कार्यक्षमता जोड़ी गई थी।
आइए दोनों मामलों में प्रोफाइलर के परिणामों को देखें - पैनल का उपयोग करने के मामले में और कंटेनर का उपयोग करने के मामले में।

ViewPort में पैनल के बजाय कंटेनर का उपयोग करके प्रोफाइलिंग परिणाम

ViewPort में पैनल का उपयोग करके परिणाम रूपरेखा

जैसा कि आप परिणामों से देख सकते हैं, कंटेनर के साथ केवल 4 पैनल की जगह ने रेंडरिंग समय को 30ms (530ms के बजाय 494ms) से कम कर दिया और जावास्क्रिप्ट फ़ंक्शन की संख्या 7000 (64381 के बजाय 57236) कॉल की। यह एक बहुत अच्छा परिणाम है, यह देखते हुए कि आमतौर पर Ext.NET अनुप्रयोगों में कई सौ पैनल का उपयोग किया जाता है। लेकिन यदि आप निश्चित रूप से पैनल के बजाय कंटेनर का उपयोग करने के लाभों और लाभों के बारे में निश्चित नहीं हैं, तो मैं पैनल का उपयोग करने की सलाह देता हूं। अक्सर यह गति में एक मौलिक लाभ नहीं लाता है, क्योंकि ब्राउज़र तेजी से काम कर रहे हैं, ग्राहक मशीन क्षमताएँ भी, और यह कई गुना अधिक संभावित समस्याएं जोड़ सकता है। हम पैनल को नहीं बचाएंगे और छोड़ेंगे।
अगला कंटेनर जो हम भरते हैं , वह है " टैबपालन" - टैब बार। नियंत्रण कक्ष के लिए एक कंटेनर है और उनमें से प्रत्येक एक टैब है। शीर्षक का मान कंटेनर के " शीर्षक " विशेषता में इंगित किया गया है, और यदि आप चाहते हैं कि टैब बंद हो, तो " क्लोजेबल " विशेषता पर ध्यान दें। इसके कार्यान्वयन में TabPanel एक और दिलचस्प लेआउट - कार्डलैट का उपयोग करता है। हम इस पर विस्तार से ध्यान नहीं देंगे। संक्षेप में, यह कंटेनर के बच्चों को कार्ड के ढेर के रूप में प्रस्तुत करता है और उपयोगकर्ता के लिए केवल सबसे ऊपर प्रदर्शित करता है। यानी उपयोगकर्ता समय के प्रत्येक क्षण में बाल तत्वों के अपने सेट से केवल एक तत्व प्रदर्शित करता है। समझने के लिए, आप निम्नलिखित उदाहरण देख सकते हैं ।
TabPanel वर्ग के मुख्य गुणों पर विचार करें (क्योंकि TabPanel AbstractPanel का वंशज है, तो पैनल के लिए वर्णित सभी गुण इसके लिए भी मान्य हैं, लेकिन कुछ काम नहीं करेंगे क्योंकि उनका कोई मतलब नहीं है):

संपत्ति का नाम	टाइप	से निहित	विवरण
ActiveTab	Ext.Net.AbstractComponent	AbstractTabPanel	पहचानकर्ता, सूचकांक, या सीधे टैब जो डिफ़ॉल्ट रूप से प्रदर्शित किया जाएगा। उपयोगी है यदि आप चाहते हैं कि TabPanel खुल जाए, उदाहरण के लिए, 2, टैब
ActiveTabIndex	पूर्णांक	AbstractTabPanel	डिफ़ॉल्ट टैब इंडेक्स
DeferredRender	bool	AbstractTabPanel	यदि सही है , तब तक टैब आइटम ब्राउज़र में लोड नहीं होंगे जब तक कि टैब सक्रिय या दृश्यमान नहीं हो जाता है। यह आपको टैब में बड़ी संख्या में आइटम के साथ प्रदर्शन को गति देने की अनुमति देता है। यदि गलत है, तो सभी टैब के तत्वों को तुरंत लोड किया जाएगा, अक्सर प्रदर्शन को कम किया जाएगा। इसका उपयोग दुर्लभ मामलों में किया जाता है: जब नियंत्रण के प्रदर्शन के साथ समस्याएं होती हैं या जब उपयोगकर्ता टैब पर क्लिक करते समय देरी से परेशान होता है। डिफ़ॉल्ट रूप से सही है
ItemCls	तार	AbstractTabPanel	सीएसएस वर्ग प्रत्येक टैब में जोड़ा जाएगा। डिफ़ॉल्ट "x-tabpanel- बच्चा" है
MaxTabWidth	पूर्णांक	AbstractTabPanel	अधिकतम टैब चौड़ाई
MinTabWidth	पूर्णांक	AbstractTabPanel	न्यूनतम टैब चौड़ाई
TabAlign	Ext.Net.TabAlign	AbstractTabPanel	टैब दिशा। या तो दाएं से बाएं (Ext.Net.TabAlign.Left) या दाएं से बाएं (Ext.Net.TabAlign.Left)। डिफ़ॉल्ट रूप से Ext.Net.TabAlign.Left
TabPosition	Ext.Net.TabPosition	AbstractTabPanel	टैब हेडर की स्थिति। या तो ऊपर (Ext.Net.TabPosition.Top), या (Ext.Net.TabPosition.Bottom)। डिफ़ॉल्ट रूप से Ext.Net.TabPosition.Top

मूल बुनियादी मार्कअप बनाएं

अब जब हमारे पास ज्ञान है, तो हम अपने आवेदन के लिए सबसे बुनियादी मार्कअप बनाना शुरू कर सकते हैं। यह बहुत ज्यादा नहीं होगा, लेकिन हम अभी शुरू कर रहे हैं। हमारे व्यूपोर्ट के सभी पैनल यथावत बने रहे, लेकिन हमारी आवश्यकताओं के अनुसार, उन्हें उचित डिजाइन प्राप्त हुआ। चलो मार्कअप को देखते हैं, जो अंत में निकला, आप इसे Default.aspx में सम्मिलित कर सकते हैं और स्वयं इसके साथ काम कर सकते हैं।

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>«a la Outlook» ,  1</title> </head> <body> <ext:ResourceManager ID="PageResourceManager" runat="server" /> <ext:Viewport ID="AppMainViewport" runat="server" Layout="BorderLayout"> <Items> <ext:Panel ID="MenuPanel" runat="server" Title="" Region="North" Height="100" Html="  " Collapsible="true"> <Tools> <ext:Tool Type="Help" runat="server"></ext:Tool> </Tools> </ext:Panel> <ext:Panel ID="LeftSideNavPanel" runat="server" Title="" Region="West" Layout="AccordionLayout" Width="225" MinWidth="225" MaxWidth="400" Split="true" Collapsible="true" CollapseMode="Placeholder"> <Items> <ext:Panel ID="MailLeftSideNavPanel" runat="server" Title="" Border="false" BodyPadding="6" Icon="Email" Html="    " /> <ext:Panel ID="CalendarLeftSideNavPanel" runat="server" Title="" Border="false" BodyPadding="6" Icon="Calendar" Html="  " /> <ext:Panel ID="ContactsLeftSideNavPanel" runat="server" Title="" Border="false" BodyPadding="6" Icon="FolderUser" Html="  " /> <ext:Panel ID="TasksLeftSideNavPanel" runat="server" Title="" Border="false" BodyPadding="6" Icon="Tick" Html="  " /> </Items> </ext:Panel> <ext:Panel ID="MainMailPanel" runat="server" Region="Center" Html="       "> </ext:Panel> <ext:Panel ID="TasksRightSidePanel" runat="server" Title="    " Region="East" Collapsible="true" CollapseMode="Placeholder" Split="true" MinWidth="225" Width="225" Html="      "> </ext:Panel> <ext:Panel ID="AppMainStatusPanel" runat="server" Region="South"> <BottomBar> <ext:StatusBar ID="AppMainStatusBar" runat="server" DefaultText="    "> </ext:StatusBar> </BottomBar> </ext:Panel> </Items> </ext:Viewport> </body> </html>

और यदि हम इसे चलाते हैं, तो हमें हमारे मुख्य पृष्ठ का निम्नलिखित दृश्य मिलता है:

मार्कअप में कुछ भी जटिल नहीं है; ये सभी घटक हमारे परिचित हैं। हालाँकि, यदि आपके कोई प्रश्न हैं, तो लिखें।
हम वहीं रुक जाएंगे। हमारे आवेदन की नींव रखी गई है, हालांकि यह आमतौर पर सभी अनुप्रयोगों के लिए समान है। अगले भाग में, हम एक और कदम उठाएंगे - हम शीर्ष मेनू (रिबन) बनाएंगे और जिस तरह से हम टोबार, बटन, स्प्लिटबटन और अन्य अन्य दिलचस्प घटकों के साथ व्यवहार करेंगे।
आप यहां प्रोजेक्ट डाउनलोड कर सकते हैं
आपका ध्यान के लिए धन्यवाद और पढ़ने का आनंद लें!

पाठ 2. एक्स्ट.नेट पर अपना आवेदन बनाना, भाग 1

कंटेनर (कंटेनर, पैनल, टैबपैनल, व्यूपोर्ट) और लेआउट (बॉर्डरलेआउट, एकॉर्डियन लयआउट, कार्डलैट)

परिचय

ViewPort, BorderLayout और AccordionLayout

कंटेनर, पैनल, टैबपाल

मूल बुनियादी मार्कअप बनाएं

More articles: