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

Original author: writelesscode.com
  • Translation
Этот пост покажет вам простые шаги по созданию 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.
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 17

    +3
    Очень, очень круто. На офсайте также есть демка c ExtJs4.
      +1
      Я это как-то упустил, Вы не против если я добавлю эту ссылку?
        +1
        Добавляйте, конечно — зачем спрашивать)
      0
      Отличная статья, спасибо за перевод. Чесно признаться заинтересовал меня ExtJS после этого.
        0
        Тебя по прежнему тянет к RIA? :-) Пожалуйста.
        0
        Недавно как раз задумался о более удобном редакторе для CMS, сеошники на нескольких проектах молят о Exell-подобном редакторе. Сделать бы еще поддержку формул. Никто нигде подобноготне встречал?
          +1
          C формулами как-то не припомню, если стандартная табличка — ExtJS GridPanel, да и кстати — можно импортировать/экспортировать из(в) Excel. Думаю формулы тоже можно реализовать, только стоит ли…
            0
            хм, импорт туда-сюда — уже неплохо, спасибо. зачем нужно — написал вот здесь — habrahabr.ru/qa/14129/
          +1
          Неплохая компонентная платформа для rails, самое интересное, что создатель наш соотечественник, а статья написана за бугром. В добавку к этой статье, есть запись про тестирование компонентов от автора gem-a a3r.me/blog/2011/netzke-cucumber-selenium.html
            0
            Да, тесты работают неплохо… Вот еще есть видео от создателя, красота-лепота.
            0
            отличный перевод, неплохо было бы только еще добавить описание того, что такое Netzke и зачем он нужен, а то примерное представление можно получить только к середине статьи
            также для человека, никогда не работавшего с ExtJS, не совсем понятно, откуда берутся и подключаются библиотеки вот этой строкой:

            ln -s ~/code/extjs/ext-3.3.0 public/extjs
              0
              Я думал что не стоит что-то дополнять от себя, это все-таки перевод (возможно я неправ, это у меня первый). Насчет ExtJS не совсем понял, ln это стандартная утилита *nix систем для создания ссылок. Если бы писал статью сам — конечно расписал бы, спасибо за замечания :-)
                0
                то, что ln создает ссылку, я знаю, непонятно было на что создается эта сылка
                  +1
                  Она ссылается на директорию с ExtJS, саму библиотеку можно скачать тут.
              0
              В моём роботе работает, если добавить Netzke модуль перед Basepack для erb.
              netzke :tasks, :class_name => «Netzke::Basepack::GridPanel», :model => «Task»
                +2
                Вышло обновление оригинала этой статьи, которое отражает значимые изменения в Netzke:

                http://writelesscode.com/blog/2012/10/20/extjs-rails-crud-application-in-7-minutes/

                Вопрос к опытным хабратьям: есть ли смысл сделать перевод ее на habrahabr'e отдельной статьей? Или стоит просить автора обновить уже существующий?

              Only users with full accounts can post comments. Log in, please.