Pull to refresh

ExtJS/Rails CRUD приложение за 7 минут

Ruby on Rails *
Translation
Original author: writelesscode.com
Этот пост покажет вам простые шаги по созданию TODO веб приложения с ипользованием ExtJS, Ruby on Rails и Netzke. Это займет у вас приблизительно 7 минут, и если вам заранее любопытно стоит ли оно того, смотрите сразу последнюю часть (кстати самую большую), где и обсудим результаты. Наша цель заключается в создании веб приложения которое позволит вам добавлять, редактировать и удалять TODO задачи, а также отмечать сделанные. В дополнение к этому вы сможете сортировать и искать задачи, редактировать несколько задач одновременно, и это еще не все. Можете засечь время на своих часах, давайте приступим к работе.


Когда писался этот туториал, я использовал: Rails 3.0.1, netzke-core 0.6.2, netzke-basepack 0.6.1, Ruby 1.9.2, Ext 3.3.0.

Первоначальные шаги


Создание Rails приложения:
> rails new netzke_task_manager && cd netzke_task_manager

Добавьте Netzke гемы в ваш 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

Подключим библиотеку Ext и, опционально, иконки от FamFamFam, например:
> ln -s ~/code/extjs/ext-3.3.0 public/extjs
> ln -s ~/assets/famfamfam-silk public/images/icons

Добавим роуты Netzke и root:
NetzkeTaskManager::Application.routes.draw do
  netzke
  root :to => "welcome#index"
  # ...
end

Создадим контроллер welcome:
> rails g controller welcome index
Не забудьте удалить public/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 минуты прошло, мы готовы приступить к действительно интересной части.

Создание модели


Давайте создадим модель Task с полями name, priority, notes, due date и флагом «done»:
> rails g model Task done:boolean name:string notes:text priority:integer due:date
Отредактируйте файл с миграцией (db/migrate/xxx_create_tasks.rb), чтобы флаг «done» по умолчанию был снят:
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 grid panel


Для того чтобы увидеть Ext таблицу как интефейс к нашей модели, нам не потребуется прилагать много усилий. Просто объявите Netzke GridPanel в app/views/welcome/index.html.erb:
<%= netzke :tasks, :class_name => "Basepack::GridPanel", :model => "Task" %>

Запустим сервер:
> rails s

… и посмотрим как это выглядит на localhost:3000/:

Это все уже довольно функционально, и при этом пристойно выглядит. Через минуту я покажу вам впечатляющий список возможностей, которые у вас появились. Но сначала давайте немного подправим приложение, чтобы оно выглядело еще лучше — у нас еще есть на это время.

С Netzke::Basepack::GridPanel вы можете с легкостью настраивать колонки (смотрите документацию по этому поводу). Давайте сделаем 2 простые вещи: 1) укажем какие колонки мы хотим видеть, исключая созданные по умолчанию рельсами created_at и updated_at, и 2) изменим заголовок колонки «due» на «Due on».
<%= netzke :tasks,
  :class_name => "Basepack::GridPanel",
  :model => "Task",
  :columns => [:done, :name, :notes, :priority, {:name => :due, :header => "Due on"}]
%>

Отлично. Давайте используем оставшиеся 2 минуты для финальной, чисто визуальной модификации. Давайте отобразим нашу таблицу посередине страницы, под заголовком, без этого толстого синего хедера, и с нормальной рамкой вокруг. Также зададим для некоторых колонок ширину по умолчанию, и сделаем так, чтобы они занимали всю ширину таблицы.

Для того чтобы поставить таблицу посередине страницы, давайте быстренько добавим некоторые css стили в лайаут нашего приложения (после 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::Basepack::GridPanel очень мощный компонент, мы бесплатно получили кучу фич.

Одновременное редактирование нескольких строк

Добавление, изменение и удаление записей может с легкостью происходить так:


Пагинация

Даже если ваша таблица содержит десятки тысяч записей, это не проблема для таблицы Netzke, все благодаря встроенной пагинации.

Контекстное меню

Некоторые действия кнопок внизу таблицы продублированы в контекстном меню:


Автоматическое определение типов атрибутов

В нашем приложении мы используем в модели Task поля с типами integer, boolean, string, text, и date — и каждое из полей получает свой тип колонки, пользователь не сможет ввести буквы в поле priority.

Поддержка Rails валидаций

Валидации Rails поддерживаются, и работают даже при множественном редактировании!


Сортировка на стороне сервера

Нажмите на заголовок колонки, чтобы включить сервер-сайд сортировку:


Фильтрация на стороне сервера

Умные фильтры по умолчанию включены для каждой из колонок, конечно, учитывая тип колонки.
Пример с датой:

Приоритет:


Добавление/(мульти)редактирование записей в форме

Иногда добавление/изменение записи гораздо удобнее с помощью формы. Конечно, у Netzke есть такая возможность. Поддерживается даже мульти-редактирование, просто выделите нужные записи и нажмите «Edit in form».


Продвинутый поиск, с использованием шаблонов



И еще...

В этой статье не рассмотрено, но Netzke grid panel также поддерживает one-to-many («belongs_to») связи (посмотрите ссылку на демо ниже).

Заключение


Вы научились малой части вещей, которые Netzke предоставляет, например Netzke::Basepack::GridPanel — мощный, настраиваемый и расширяемый компонент, который вы можете использовать в своих RIA приложениях. Вы можете увидеть больше примеров использования GridPanel и других компонентов в демо. В принципе, Netzke задумывался как фреймворк который позволяет вам создавать свои собственные мощные компоненты — с нуля, или используя существующие.

Следите за мной в твиттере и узнавайте новости о Netzke, и не забудьте добавить в закладки официальный сайт проекта.
Делитесь Netzke опытом в Google группе, и (не в последнюю очередь), пожалуйста помните: Netzke это многогранный проект, где большее сообщество будет означать более быструю разработку. Спасибо!

UPD d43 подсказал где посмотреть демо с ExtJS 4.
Tags:
Hubs:
Total votes 41: ↑38 and ↓3 +35
Views 6.8K
Comments Comments 17