{"id":177227,"date":"2013-04-18T19:33:03","date_gmt":"2013-04-18T15:33:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=177227"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=177227","title":{"rendered":"CRUD-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Ext JS \u0438 Ruby on Rails \u0437\u0430 7 \u043c\u0438\u043d\u0443\u0442<\/span>"},"content":{"rendered":"
\u042d\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0433\u043e \u043f\u043e\u0441\u0442\u0430<\/a><\/i>.<\/p>\n

\u042d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u0432\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0448\u0430\u0433\u0438 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0437\u0430\u0434\u0430\u0447 TODO \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Ext JS, Ruby on Rails \u0438 Netzke<\/a>. \u042d\u0442\u043e \u0437\u0430\u0439\u043c\u0435\u0442 \u0443 \u0432\u0430\u0441 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u043e 7 \u043c\u0438\u043d\u0443\u0442, \u0438 \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043b\u044e\u0431\u043e\u043f\u044b\u0442\u043d\u043e, \u0441\u0442\u043e\u0438\u0442 \u043b\u0438 \u043e\u043d\u043e \u0442\u043e\u0433\u043e, \u0437\u0430\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043f\u0440\u044f\u043c\u0438\u043a\u043e\u043c \u0432 \u0441\u0435\u043a\u0446\u0438\u044e \u00ab\u041e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b\u00bb (\u043a\u0441\u0442\u0430\u0442\u0438, \u0441\u0430\u043c\u0443\u044e \u0431\u043e\u043b\u044c\u0448\u0443\u044e). \u041d\u0430\u0448\u0430 \u0446\u0435\u043b\u044c \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c, \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438 TODO, \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u043f\u043e\u043c\u0435\u0447\u0430\u0442\u044c \u0438\u0445 \u043a\u0430\u043a \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044b\u0435. \u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u044d\u0442\u043e\u043c\u0443 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438, \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043d\u0438\u043c, \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0434\u0430\u0447 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u2014 \u0438 \u044d\u0442\u043e \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0435. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435, \u0437\u0430\u0441\u0435\u043a\u0430\u0439\u0442\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0441\u0435\u043a\u0443\u043d\u0434\u043e\u043c\u0435\u0440\u0435 \u2014 \u0438 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.<\/p>\n

<\/a><\/p>\n

\u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a: Rails 3.2.8, netzke-core v0.8.0, netzke-basepack v0.8.0, Ext JS 4.1.1a \u2014 \u0430 \u0442\u0430\u043a\u0436\u0435 Ruby 1.9.3 \u0438 Mac OSX Mountain Lion<\/i><\/p>\n

\u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0430\u0433\u0438<\/h4>\n

\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u043e\u0435 Rails-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n

$ rails new netzke_task_manager && cd netzke_task_manager <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c Netzke \u0432 Gemfile:<\/p>\n
gem 'netzke-core', '~>0.8.0' gem 'netzke-basepack', '~>0.8.0' <\/code><\/pre>\n
  \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0433\u0435\u043c\u044b:<\/p>\n
$ bundle install <\/code><\/pre>\n
  \u041b\u0438\u043d\u043a\u0443\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Ext JS, \u0438 (\u0447\u0442\u043e \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e) \u0438\u043a\u043e\u043d\u043a\u0438 FamFamFam, \u0432 public\/extjs<\/code> \u0438 public\/images\/icons<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440!<\/i>):<\/p>\n
$ ln -s ~\/code\/extjs\/ext-4.1.1 public\/extjs $ mkdir public\/images $ ln -s ~\/assets\/famfamfam-silk public\/images\/icons <\/code><\/pre>\n
  \u0423\u043a\u0430\u0436\u0435\u043c \u0440\u0430\u0443\u0442\u044b Netzke \u0438 \u043e\u0442\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0440\u0430\u0443\u0442 \u0432 config\/routes.rb<\/code>:<\/p>\n
NetzkeTaskManager::Application.routes.draw do   netzke   root to: "welcome#index" end <\/code><\/pre>\n
  \u0421\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 welcome:<\/p>\n
$ rails g controller welcome index <\/code><\/pre>\n
  \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0443\u0434\u0430\u043b\u0438\u0442\u044c public\/index.html<\/code>.<\/p>\n
  \u0412 app\/views\/layouts\/application.html.erb<\/code> \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u043a\u043e\u0434, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439 JavaScript \u0438 \u0441\u0442\u0438\u043b\u0438, \u0445\u0435\u043b\u043f\u0435\u0440\u043e\u043c load_netzke. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n
<!DOCTYPE html> <html> <head>   <title>Netzke Task Manager<\/title>   <%= load_netzke %>   <%= csrf_meta_tag %> <\/head> <body> <%= yield %> <\/body> <\/html> <\/code><\/pre>\n
  \u0417\u0430\u043c\u0435\u0442\u044c\u0435, \u0447\u0442\u043e \u0445\u0435\u043b\u043f\u0435\u0440 load_netzke<\/code> \u2014 \u044d\u0442\u043e \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043a\u0430\u043a Netzke, \u0442\u0430\u043a \u0438 \u0441\u0430\u043c\u043e\u0439 Ext JS.<\/i><\/p>\n
  \u041f\u0440\u043e\u0448\u043b\u043e 3 \u043c\u0438\u043d\u0443\u0442\u044b \u2014 \u0438 \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438!<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438<\/h4>\n
  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0438\u043c \u043c\u043e\u0434\u0435\u043b\u044c Task, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u044b name<\/code>, priority<\/code>, notes<\/code>, due_date<\/code> \u0438 \u0444\u043b\u0430\u0433 done<\/code>:<\/p>\n
$ rails g model Task done:boolean name notes:text priority:integer due:date <\/code><\/pre>\n
  \u041e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u0445\u0435\u043c\u0443 \u043d\u0430\u0448\u0435\u0439 \u0411\u0414:<\/p>\n
$ rake db:migrate <\/code><\/pre>\n
  \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0438 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043c\u0435\u043b\u0438 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0438\u043c\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e (\u0444\u0430\u0439\u043b app\/models\/task.rb<\/code>):<\/p>\n
class Task < ActiveRecord::Base   attr_accessible :done, :due, :name, :notes, :priority   validates :name, presence: true end <\/code><\/pre>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0433\u0440\u0438\u0434-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 Tasks<\/h4>\n
  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0448\u0443 \u043f\u0435\u0440\u0432\u0443\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 Netzke, \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0432 \u0435\u0435 \u043e\u0442 \u043f\u043e\u043b\u043d\u043e\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439 Netzke::Basepack::Grid<\/code>. \u041d\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e app\/components<\/code>:<\/p>\n
$ mkdir app\/components <\/code><\/pre>\n
  \u0412 \u044d\u0442\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b tasks.rb \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n
class Tasks < Netzke::Basepack::Grid   def configure(c)     super     c.model = "Task"   end end <\/code><\/pre>\n
  \u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u044d\u0442\u043e \u043a\u043b\u0430\u0441\u0441 Ruby, \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043e\u0442 Netzke::Basepack::Grid<\/code>, \u0438 \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 Task<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0432\u043e view \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412 \u0444\u0430\u0439\u043b\u0435 app\/views\/welcome\/index.html.erb<\/code> \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u043a\u043e\u0434 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443:<\/p>\n
<%= netzke :tasks, height: 400 %> <\/code><\/pre>\n
  \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440:<\/p>\n
$ rails s <\/code><\/pre>\n
  \u2026 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 http:\/\/localhost:3000\/<\/a>:<\/p>\n
  <\/p>\n
  \u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0437\u0433\u043b\u044f\u0434\u0430 \u0432\u043f\u043e\u043b\u043d\u0435 \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442. \u0427\u0435\u0440\u0435\u0437 \u043c\u0438\u043d\u0443\u0442\u0443 \u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0432\u0430\u043c \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u044f\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442, \u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043d\u0435\u0441\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0432\u0438\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0443 \u043d\u0430\u0441 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e).<\/p>\n
  Netzke::Basepack::Grid<\/code>, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d \u043d\u0430\u0448 \u0433\u0440\u0438\u0434, \u0433\u0438\u0431\u043a\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043d\u0435\u0441\u0435\u043c 4 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f:<\/p>\n