これは古い投稿の更新バージョンです 。
この投稿では、Ext JS、Ruby on Rails、
Netzkeを使用してTODOタスクマネージャーを作成する簡単な手順を示します。 所要時間は約7分です。価値があるかどうかを事前に知りたい場合は、「議論の結果」セクションをご覧ください（ちなみに最大）。 私たちの目標は、TODOタスクを追加、編集、削除し、完了済みとしてマークできるWebアプリケーションを作成することです。 これに加えて、タスクを並べ替えたり、それらを検索したり、複数のタスクを同時に編集したりできます-それだけではありません。 必要に応じて、ストップウォッチで時間をとって、始めましょう。
このチュートリアルを作成するとき、次のライブラリバージョンを使用しました：Rails 3.2.8、netzke-core v0.8.0、netzke-basepack v0.8.0、 Ext JS 4.1.1a -Ruby 1.9.3およびMac OSX Mountain Lion最初のステップ
新しいRailsアプリケーションを作成します。
$ rails new netzke_task_manager && cd netzke_task_manager
NetzkeをGemfileに追加します。
gem 'netzke-core', '~>0.8.0' gem 'netzke-basepack', '~>0.8.0'
gemをインストールします。
$ bundle install
Ext JSライブラリと（オプションで）
FamFamFamアイコンを
public/images/iconsそれぞれ
public/extjsと
public/images/iconsリンクします。 たとえば（
たとえば！ ）：
$ ln -s ~/code/extjs/ext-4.1.1 public/extjs $ mkdir public/images $ ln -s ~/assets/famfamfam-silk public/images/icons
Netzkeのルートを指定し、
config/routes.rbでルートルーティングをコメントアウトし
config/routes.rb 。
NetzkeTaskManager::Application.routes.draw do netzke root to: "welcome#index" end
ウェルカムコントローラーを生成します。
$ rails g controller welcome index
public/index.html忘れずに削除してください。
app/views/layouts/application.html.erb JavaScriptとスタイルを接続するデフォルトコードをload_netzkeヘルパーに置き換えます。 結果は次のようになります。
<!DOCTYPE html> <html> <head> <title>Netzke Task Manager</title> <%= load_netzke %> <%= csrf_meta_tag %> </head> <body> <%= yield %> </body> </html>
load_netzkeヘルパーは、NetzkeとExt JS自体の両方のスクリプトとスタイルを接続するために必要なものであることに注意してください。3分が経過しました-本当に面白い部分を始める準備ができました！
モデル作成
属性
name 、
priority 、
notes 、
due_dateおよび
doneフラグを持つタスクモデルを作成しましょう。
$ rails g model Task done:boolean name notes:text priority:integer due:date
データベースのスキーマを更新します。
$ rake db:migrate
タスクには少なくとも何らかの名前を付けたいので、適切な検証（ファイル
app/models/task.rb ）を追加しましょう：
class Task < ActiveRecord::Base attr_accessible :done, :due, :name, :notes, :priority validates :name, presence: true end
Tasks Gridコンポーネントの作成
完全に機能する
Netzke::Basepack::Gridから継承して、最初のNetzkeコンポーネントを作成しましょう。 ただし、最初に
app/componentsディレクトリを作成する必要があります。
$ mkdir app/components
このディレクトリで、次の内容のtasks.rbファイルを作成します。
class Tasks < Netzke::Basepack::Grid def configure(c) super c.model = "Task" end end
このコンポーネントは、
Netzke::Basepack::Gridから継承され、以前に作成された
Taskモデルを使用するように構成されたRubyクラスです。 次に、作成したコンポーネントをアプリケーションのビューに埋め込む必要があります。
app/views/welcome/index.html.erbファイルで、デフォルトコードを次の行に置き換えます。
<%= netzke :tasks, height: 400 %>
サーバーを起動しましょう。
$ rails s
...そして、
http：// localhost：3000 /のブラウザでの表示を確認し
ます 。
私たちのアプリケーションは動作し、一見するとかなり良いように見えます。 すぐにそれが提供する機能の印象的なリストを提供しますが、最初に、アプリケーションの外観を改善するためにいくつかの小さな修正を行いましょう（これにはまだ十分な時間があります）。
Netzke::Basepack::Grid 、グリッドの継承元であり、柔軟に構成されています。 4つの簡単な改善を行ってみましょう。
- 表示する列を示します（
created_atおよびupdated_at非表示にします） - 列見出し「Due」を「Due on」に変更します
Ext.grid.column.Column flexプロパティを使用して残りの幅全体を埋めるように「Notes」列を構成します- グリッドの
scope構成パラメーターを使用して、完了フラグが設定されているエントリを除外します
コンポーネントの最終的なコードは次のようになります。
class Tasks < Netzke::Basepack::Grid def configure(c) super c.model = "Task" c.columns = [ :done, :name, {name: :notes, flex: 1}, :priority, {name: :due, header: "Due on"} ] c.scope = {done: [nil, false]} end end
素晴らしい。 残りの2分間を使用して、最後の純粋に視覚的な編集を行います。 グリッドをページの中央に
app/views/layouts/application.html.erbには、
load_netzkeヘルパーの直後に
app/views/layouts/application.html.erbにいくつかのスタイルを追加し
app/views/layouts/application.html.erb 。
<style type="text/css" media="screen"> h1 { text-align: center; margin: 10px;} .netzke-component { width: 800px; margin: auto; } </style>
h1ヘッダーを
app/views/welcome/index.html.erb追加し
app/views/welcome/index.html.erb 。
<h1>Incomplete tasks</h1> <%= netzke :tasks, height: 400 %>
さて、それだけです！ ストップウォッチを停止して、結果について話し合うことができます。
結果を議論します
Netzke::Basepack::Gridは完全に機能するコンポーネントであるため、このためのコードを1行も書かずに
Netzke::Basepack::Grid機能を取得します。 もっと詳しく見てみましょう。
フィールドタイプを自動的に検出する
このアプリケーションでは、整数、ブール、文字列、テキスト、日付など、さまざまなタイプのフィールドをタスクモデルに作成しました。 各フィールドは、対応するタイプをサポートする列を自動的に受け取ります（たとえば、優先順位フィールドに文字を入力できない、日付フィールドにカレンダーがあるなど）。
Pages
タスクテーブルに何万ものレコードが含まれている場合でも、組み込みのページサポートにより、Netzkeグリッドに問題は生じません。
複数の行を一度に編集する機能
一度に複数のレコードを追加、更新、削除するのは簡単です。
コンテキストメニュー
グリッドの下部パネルにあるボタンの一部の機能は、コンテキストメニューに複製されます。
Rails検証のサポート
Railsの検証が考慮されます：
サーバー上のレコードの並べ替え
列見出しをクリックして、エントリを並べ替えます。
サーバー上のレコードのフィルタリング
フィールドのタイプに応じて、スマートフィルターはデフォルトで各列に統合されます。
日付の場合：
優先度：
フォームからエントリを追加および編集する
フォームを介してレコードを追加または編集する方が簡単な場合があります。 Netzkeはそのような機会を提供します（複数のエントリの編集もサポートされています-数行を選択して[フォームで編集]をクリックするだけです）。
クエリの保存をサポートする高度な検索
[検索]ボタンをクリックして、複雑なクエリエディターを呼び出します。
氷山の一角
あなたが学んだことは、Netzkeができることのほんの一部です。 実際、信じられないほど強力なNetzke Coreプラットフォームに基づいて構築された事前作成コンポーネントを使用する方法を示しました。これにより、コンポーネントを新しい（複合）コンポーネントに結合でき、サーバーからのコンポーネントの動的なロード、クライアントとサーバー間の柔軟な相互作用がサポートされますコンポーネントの一部-さらに、Netzkeは、Ext JSとRailsのパワーを活用し、非常に複雑な単一ページWebアプリケーションを作成するための理想的なプラットフォームです。
この記事の続きとして、コンポーネントの3つのインスタンスをブックマークバーに簡単に配置する方法を紹介します。各インスタンスには、完了したタスク、未完了のタスク、およびすべてのタスクが同時に選択されています。
チュートリアルの次の部分を参照し
てください 。
翻訳者からの注意：Netzke Basepackのコンポーネントはロシア語のローカライズをサポートしています。