📄 📒 🧣 7 मिनट में ExtJS / रेल CRUD ऐप 💅🏿 ⚕️ 🌘

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

जब इस ट्यूटोरियल को लिखा गया था, मैंने उपयोग किया: रेल्स 3.0.1, नेटज़के-कोर 0.6.2, नेटज़के-बेसपैक 0.6.1, रूबी 1.9.2, एक्सट्रीम 3.3.0।

प्रारंभिक चरण

रेल एप्लिकेशन बनाना:
> rails new netzke_task_manager && cd netzke_task_manager

Netzke Gems को अपने Gemfile में जोड़ें:

 gem 'netzke-core', :git => "git://github.com/skozlov/netzke-core.git" gem 'netzke-basepack', :git => "git://github.com/skozlov/netzke-basepack.git"

यदि आपको बाद में पेजेशन संबंधित त्रुटियाँ दिखाई देती हैं, तो आपको बेहतर समाधान खोजने तक will_paginate सेट करने की आवश्यकता हो सकती है:

 gem 'will_paginate', '~>3.0.pre2'

रत्न स्थापित करें:
bundle install

उदाहरण के लिए, फैमिली लाइब्रेरी और वैकल्पिक रूप से, FamFamFam से आइकन कनेक्ट करें:

> ln -s ~/code/extjs/ext-3.3.0 public/extjs
> ln -s ~/assets/famfamfam-silk public/images/icons

नेटज़के और रूट रूट जोड़ें:

 NetzkeTaskManager::Application.routes.draw do netzke root :to => "welcome#index" # ... end

एक स्वागत नियंत्रक बनाएँ:
> rails g controller welcome index
सार्वजनिक / index.html हटाने के लिए याद रखें।

एप्लिकेशन के लेआउट में, मानक JavaScript और CSS लिंक को netzke_init हेल्पर का उपयोग करके प्रतिस्थापित किया जाता है, इसलिए परिणाम इस तरह दिखेगा:

 <!DOCTYPE html> <html> <head> <title>Netzke Task Manager</title> <%= netzke_init %> <%= csrf_meta_tag %> </head> <body> <%= yield %> </body> </html>

ध्यान दें कि netzke_init आपको सभी Ext और Netzke JS और CSS फाइलों को जोड़ने की जरूरत है।
3 मिनट बीत चुके हैं, हम वास्तव में दिलचस्प हिस्सा शुरू करने के लिए तैयार हैं।

मॉडल निर्माण

आइए फ़ील्ड नाम, प्राथमिकता, नोट्स, नियत तारीख और "किए गए" ध्वज के साथ एक टास्क मॉडल बनाएं:
> rails g model Task done:boolean name:string notes:text priority:integer due:date
माइग्रेशन फ़ाइल संपादित करें (db / migrate / xxx_create_tasks.rb) ताकि "किया गया" ध्वज डिफ़ॉल्ट रूप से साफ़ हो जाए:

 t.boolean :done, :default => false

डेटाबेस में परिवर्तन करें:
rake db:migrate

हम चाहते हैं कि हमारे कार्यों में कम से कम हमेशा किसी तरह का नाम हो, तो आइए उचित सत्यापन जोड़ें। और केवल अधूरे कार्य प्राप्त करने के लिए default_scope सेट करें:

 class Task < ActiveRecord::Base validates_presence_of :name default_scope :conditions => {:done => false} end

Netzke ग्रिड पैनल जोड़ना

हमारे मॉडल के इंटरफ़ेस के रूप में एक्स्ट टेबल को देखने के लिए, हमें बहुत प्रयास करने की आवश्यकता नहीं है। बस एप्लिकेशन / विचार / स्वागत / index.html.erb में Netzke ग्रिडडेल घोषित करें:

 <%= netzke :tasks, :class_name => "Basepack::GridPanel", :model => "Task" %>

चलो सर्वर शुरू करते हैं:
> rails s

... और देखें कि यह लोकलहोस्ट पर कैसा दिखता है: 3000 /:

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

Netzke :: Basepack :: GridPanel के साथ, आप आसानी से अपने कॉलम कस्टमाइज़ कर सकते हैं (इसके लिए दस्तावेज़ देखें)। आइए 2 सरल चीजें करते हैं: 1) इंगित करें कि हम कौन से कॉलम देखना चाहते हैं, जो डिफ़ॉल्ट रूप से बनाई गई और अपडेट की गई_टेल्स को छोड़कर, और 2) "देय" कॉलम हेडिंग को "ड्यू ऑन" पर बदलें।

 <%= netzke :tasks, :class_name => "Basepack::GridPanel", :model => "Task", :columns => [:done, :name, :notes, :priority, {:name => :due, :header => "Due on"}] %>

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

तालिका को पृष्ठ के मध्य में रखने के लिए, आइए जल्दी से अपने एप्लिकेशन के लेआउट में कुछ net स्टाइल जोड़ें (netzke_init सहायक के बाद):

 <style type="text/css" media="screen"> h1 { text-align: center; margin: 10px;} .netzke-component { width: 700px; margin: auto; } </style>

नाम जोड़ने के लिए, फ्रेम को चालू करें और हेडर को बंद करें:

 <h1>Incomplete tasks</h1> <%= netzke :tasks, :class_name => "Basepack::GridPanel", :model => "Task", :columns => [:id, :done, :name, {:name => :notes, :width => 200}, {:name => :priority, :width => 50}, {:name => :due, :header => "Due on"} ], # Standard Ext.grid.EditorGridPanel configuration options: :border => true, :header => false, :view_config => { :force_fit => true # force the columns to occupy all the available width } %>

यहाँ यह है! अपनी घड़ी बंद करो, और चलो चर्चा करें कि हमें क्या मिला:

परिणामों की चर्चा

चूंकि नेटज़के :: बेसेपैक :: ग्रिडपैनल एक बहुत शक्तिशाली घटक है, हमें मुफ्त में सुविधाओं का एक गुच्छा मिला है।

एक ही समय में कई लाइनों का संपादन

रिकॉर्ड जोड़ना, बदलना और हटाना आसानी से हो सकता है:

पृष्ठ पर अंक लगाना

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

प्रसंग मेनू

तालिका के नीचे स्थित बटनों की कुछ क्रियाओं को संदर्भ मेनू में डुप्लिकेट किया गया है:

स्वचालित रूप से विशेषता प्रकारों का पता लगाएं

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

सत्यापन का समर्थन करता है

रेल सत्यापन को समर्थन दिया जाता है, और कई संपादनों के साथ भी काम किया जाता है!

सर्वर साइड छँटाई

सर्वर साइड सॉर्टिंग को सक्षम करने के लिए कॉलम हेडिंग पर क्लिक करें:

सर्वर साइड फ़िल्टरिंग

प्रत्येक कॉलम के लिए, निश्चित रूप से, कॉलम के प्रकार को देखते हुए स्मार्ट फ़िल्टर सक्षम होते हैं।
दिनांक उदाहरण:

प्राथमिकता:

प्रपत्र में प्रविष्टियाँ जोड़ना / (बहु) करना

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

टेम्प्लेट का उपयोग करके उन्नत खोज

और अधिक ...

यह लेख कवर नहीं किया गया है, लेकिन नेटज़के ग्रिड पैनल एक-से-कई ("अंतर्गत_तो") संचार का समर्थन करता है (नीचे डेमो लिंक देखें)।

निष्कर्ष

आपने उन चीजों का एक छोटा सा हिस्सा सीखा है जो Netzke प्रदान करता है, जैसे कि Netzke :: Basepack :: GridPanel, एक शक्तिशाली, अनुकूलन योग्य और एक्स्टेंसिबल घटक जिसे आप अपने RIA अनुप्रयोगों में उपयोग कर सकते हैं। आप डेमो में ग्रिडपैनल और अन्य घटकों का उपयोग करने के अधिक उदाहरण देख सकते हैं। मूल रूप से, नेटज़के की एक रूपरेखा के रूप में कल्पना की गई थी जो आपको अपने स्वयं के शक्तिशाली घटकों को बनाने की अनुमति देता है - खरोंच से, या मौजूदा वाले का उपयोग करके।

ट्विटर पर मेरा अनुसरण करें और नेटज़के के बारे में पता करें, और परियोजना की आधिकारिक वेबसाइट को बुकमार्क करना न भूलें।
Netzke के अनुभव को Google समूह के साथ साझा करें, और (अंतिम लेकिन कम से कम), कृपया याद रखें: Netzke एक बहुमुखी परियोजना है जहां एक बड़े समुदाय का अर्थ तेजी से विकास होगा। धन्यवाद!

UPD d43 ने सुझाव दिया कि एक्सटज 4 के साथ डेमो कहाँ देखें।

7 मिनट में ExtJS / रेल CRUD ऐप