В этом посте будут показаны простые шаги по созданию веб-приложения 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:Добавьте драгоценные камни Netzke в свой Gemfile:> rails new netzke_task_manager && cd netzke_task_manager
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 и корневой:
NetzkeTaskManager::Application.routes.draw do
netzke
root :to => "welcome#index"
# .
end
Давайте создадим контроллер приветствия:
> 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 минуты, мы готовы начать самое интересное.
Создание модели
Давайте создадим модель задачи с именем полей, приоритетом, примечаниями, сроком выполнения и флагом «готово»: > 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
Добавление панели сетки Нетцке
Чтобы увидеть таблицу Ext как интерфейс к нашей модели, нам не нужно прилагать много усилий.
Просто объявите Netzke GridPanel в app/views/welcome/index.html.erb: <%= netzke :tasks, :class_name => "Basepack::GridPanel", :model => "Task" %>
Запустим сервер: > rails s
.
и давайте посмотрим, как это выглядит локальный хост :3000/: 
Это все вполне функционально и при этом выглядит прилично.
Через минуту я покажу вам впечатляющий список возможностей, которые у вас теперь есть.
Но сначала давайте немного подправим приложение, чтобы оно выглядело еще лучше — на это у нас еще есть время.
С помощью Netzke::Basepack::GridPanel вы можете легко настраивать столбцы (см.
документацию по этому вопросу).
Давайте сделаем две простые вещи: 1) укажем, какие столбцы мы хотим видеть, исключая рельсы Create_at и Updated_at по умолчанию, и 2) изменим заголовок столбца «Срок» на «Срок».
<%= 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 — очень мощный компонент, мы получили множество функций бесплатно.
Редактирование нескольких строк одновременно
Добавление, изменение и удаление записей можно легко выполнить следующим образом:
Пагинация
Даже если ваша таблица содержит десятки тысяч записей, для таблицы Нетцке это не проблема, и все благодаря встроенной нумерации страниц.
Контекстное меню
Некоторые действия кнопок внизу таблицы дублируются в контекстном меню:
Автоматическое определение типов атрибутов
В нашем приложении мы используем в модели задачи поля целочисленного, логического, строкового, текстового и датового типов — и каждое из полей получает свой собственный тип столбца; пользователь не сможет вводить буквы в поле приоритета.
Поддержка проверки Rails
Поддерживаются проверки Rails и работают даже при множественных изменениях!
Сортировка на стороне сервера
Нажмите на заголовок столбца, чтобы включить сортировку на стороне сервера:
Серверная фильтрация
Смарт-фильтры включены по умолчанию для каждого столбца, конечно, в зависимости от типа столбца.
Пример с датой: 
Приоритет: 
Добавление/(много)редактирование записей в форме
Иногда добавить/изменить запись гораздо удобнее через форму.Конечно, у Netzke есть такая возможность.
Поддерживается даже многократное редактирование, достаточно выбрать нужные записи и нажать «Редактировать в форме».
Расширенный поиск по шаблонам
И далее.
Не рассматривается в этой статье, но панель сетки Netzke также поддерживает соединения «один ко многим» («belongs_to») (см.
демонстрационную ссылку ниже).
Заключение
Вы узнали небольшую часть того, что предоставляет Netzke, например Netzke::Basepack::GridPanel, мощный, настраиваемый и расширяемый компонент, который вы можете использовать в своих приложениях RIA. Дополнительные примеры использования GridPanel и других компонентов вы можете увидеть в разделе демо .По сути, Netzke задуман как фреймворк, позволяющий создавать собственные мощные компоненты — с нуля или с использованием существующих.
Следуй за мной Твиттер и получай новости о Нетцке и не забудь добавить в закладки официальный сайт проекта .
Поделитесь своим опытом Netzke с группа Google и (последнее, но не менее важное): помните: Netzke — это многогранный проект, где более крупное сообщество будет означать более быстрое развитие.
Спасибо! УПД д43 сказал мне, где искать демо с ExtJS 4. Теги: #rails #extjs #netzke #ria #ruby onrails
-
Что Такое Интернет-Факс?
19 Oct, 24 -
Создание M4B Из Mp3 Аудиокниг Для Ipod
19 Oct, 24 -
Интерактивная Диаграмма В Css И Html
19 Oct, 24 -
Разгон Css-Селекторов: Стоит Ли Оно Того?
19 Oct, 24 -
Аналоговые Часы/Виджет Погоды Htc В Windows
19 Oct, 24
