{"id":321302,"date":"2021-04-12T15:00:44","date_gmt":"2021-04-12T15:00:44","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=321302"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=321302","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u0435\u043c Booking \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 Webix UI"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/595\/66e\/cef\/59566ecefef86ec40e142c6c215fa162.png\" alt=\"Webix UI\" title=\"Webix UI\" width=\"760\" height=\"355\"><figcaption>Webix UI<\/figcaption><\/figure>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0446\u0435\u043d\u0438\u0442 \u0441\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0438 \u043d\u0435 \u0436\u0435\u043b\u0430\u0435\u0442 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u0438\u0435 \u043c\u0435\u0441\u044f\u0446\u044b \u043d\u0430 \u0434\u043e\u0442\u043e\u0448\u043d\u043e\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 web \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0417\u043d\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0438\u0445 \u0431\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u043d\u043e \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u043c\u0438\u0440\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u0443\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0432\u0441\u0435\u043c\u0438 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044f\u043c\u0438 \u2014 \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0435 \u0438\u0437 \u043b\u0435\u0433\u043a\u0438\u0445. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0447\u0430\u0445\u043d\u0443\u0442\u044c \u043d\u0430\u0434 \u0442\u0430\u043b\u043c\u0443\u0434\u0430\u043c\u0438 \u0441\u043a\u0443\u0447\u043d\u0435\u0439\u0448\u0438\u0445 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u0443\u0436\u0435 \u0437\u0430\u0432\u0442\u0440\u0430, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041e\u0434\u043d\u043e \u0438\u0437 \u043b\u0443\u0447\u0448\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 <a href=\"https:\/\/ru.webix.com\/\" rel=\"noopener noreferrer nofollow\">Webix<\/a>. \u0418\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u044b \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.&nbsp;<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0431\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u0432\u0438\u0430\u0431\u0438\u043b\u0435\u0442\u043e\u0432. \u041d\u0435 \u0437\u0430 \u0433\u043e\u0440\u0430\u043c\u0438 \u0441\u0435\u0437\u043e\u043d \u043b\u0435\u0442\u043d\u0438\u0445 \u043e\u0442\u043f\u0443\u0441\u043a\u043e\u0432, \u0442\u0430\u043a \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u043a\u0430\u043a \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u0435\u043d.&nbsp;<\/p>\n<p>\u0421 \u043a\u043e\u0434\u043e\u043c \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f <a href=\"https:\/\/github.com\/serhiipylypchuk1991\/webix-booking-app.git\" rel=\"noopener noreferrer nofollow\"><u>\u0442\u0443\u0442<\/u><\/a>.<\/p>\n<h2>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e Webix \u0438 \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445  <\/h2>\n<p><a href=\"https:\/\/ru.docs.webix.com\/\" rel=\"noopener noreferrer nofollow\">Webix UI<\/a> \u2014 \u044d\u0442\u043e JavaScript \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u0441\u043e\u043a\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438, \u0434\u043e \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043a\u0430\u043a <a href=\"https:\/\/ru.webix.com\/widgets\/report-manager\/\" rel=\"noopener noreferrer nofollow\">Report Manager<\/a>, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0447\u0435\u0442\u044b \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u043e\u043c\u0438\u043c\u043e \u0441\u0430\u043c\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u0442\u0435\u043c\u044b \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435. \u041e\u0431\u043e \u0432\u0441\u0435\u043c \u044d\u0442\u043e\u043c \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0432 <a href=\"https:\/\/ru.docs.webix.com\/\" rel=\"noopener noreferrer nofollow\"><u>\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/a>. \u0410 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.  <\/p>\n<h3>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a UI \u043c\u0430\u0433\u0438\u0438  <\/h3>\n<p>\u041c\u0430\u0433\u0438\u044f \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u0437\u0430\u043a\u043b\u0438\u043d\u0430\u043d\u0438\u044f \u0438 \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u0441\u0435\u043a\u0440\u0435\u0442\u043e\u043c \u0435\u0435 \u0441\u0438\u043b\u044b. \u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u043f\u043e\u0434\u043d\u044f\u0442\u044c \u0437\u0430\u0432\u0435\u0441\u0443 \u0442\u0430\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0443\u0437\u043a\u043e\u0433\u043e \u043a\u0440\u0443\u0433\u0430 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0445.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043d\u0443\u0436\u043d\u043e \u0441\u043f\u0435\u0440\u0432\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b (<em>\u043e\u043d\u0438 \u0436\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 webix-\u043c\u0430\u0433\u0438\u0438<\/em>). \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 <a href=\"http:\/\/webix.com\/ru\/zagruzka\/\" rel=\"noopener noreferrer nofollow\"><u>\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/u><\/a>, \u0432\u0432\u043e\u0434\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0432\u0435\u0442\u043d\u043e\u0433\u043e zip-\u0444\u0430\u0439\u043b\u0430. \u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0438 \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e. \u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0444\u0430\u0439\u043b\u044b <em>\u201clicense.txt\u201d<\/em>, <em>\u201creadme.txt\u201d<\/em> \u0438 <em>\u201cwhatsnew.txt\u201d<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0445, \u043a\u0442\u043e \u043b\u044e\u0431\u0438\u0442 \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u0430. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u0432 \u043f\u0430\u043f\u043a\u0435 \u201csamples\u201d \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435&nbsp; \u0432\u0435\u0449\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0442\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Webix UI.<\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0430\u043f\u043a\u0438 \u201ccodebase\u201d, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e, \u0434\u0432\u0430 \u0441\u0430\u043a\u0440\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430: <em>\u201cwebix.js\u201d<\/em> \u0438 <em>\u201cwebix.css\u201d<\/em>. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b Webix-\u043c\u0430\u0433\u0438\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0445 \u0432 <em>index.html <\/em>\u0444\u0430\u0439\u043b \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;       \t&lt;title&gt;Webix Booking&lt;\/title&gt;       \t&lt;meta charset=\"utf-8\"&gt;       \t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"codebase\/webix.css\"&gt;       \t&lt;script type=\"text\/javascript\" src=\"codebase\/webix.js\"&gt;&lt;\/script&gt;     &lt;\/head&gt;     &lt;body&gt; \t\t\t&lt;script type=\"text\/javascript\"&gt; \t\t\t... \t\t\t&lt;\/script&gt;     &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0434\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0435\u0433\u0438 <strong><em>&lt;script&gt;<\/em><\/strong><em>&#8230;<\/em><strong><em>&lt;\/script&gt;, <\/em><\/strong>\u0433\u0434\u0435 \u0438 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<strong>.<\/strong><\/p>\n<p>\u0412\u043f\u0440\u043e\u0447\u0435\u043c, \u0430\u0440\u0445\u0438\u0432 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u0430\u043a\u0436\u0435 \u0447\u0435\u0440\u0435\u0437 CDN. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"xml\">&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/cdn.webix.com\/edge\/webix.css\"&gt; &lt;script type=\"text\/javascript\" src=\"http:\/\/cdn.webix.com\/edge\/webix.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<h3>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f  <\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Webix.<\/p>\n<p>\u0412\u0441\u044f Webix-\u043c\u0430\u0433\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 <strong><em>webix.ui()<\/em><\/strong>. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u043e\u0434 \u043d\u0430\u0447\u043d\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u0435\u0440\u043d\u0435\u043c \u0435\u0433\u043e \u0432 <strong><em>webix.ready(function(){})<\/em><\/strong>. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">webix.ready(function(){ \twebix.ui({ \t    \/*\u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f*\/ \t}); });<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f<em> index.html <\/em>\u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430\u0448\u0435\u0433\u043e Booking \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.  <\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Booking  <\/h2>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:  <\/p>\n<ul>\n<li>\n<p>\u0422\u0443\u043b\u0431\u0430\u0440<\/p>\n<\/li>\n<li>\n<p>\u0424\u043e\u0440\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0435\u0439\u0441\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0424\u043e\u0440\u043c\u0430 \u0437\u0430\u043a\u0430\u0437\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u0436\u0434\u0443\u044e \u0438\u0437 \u0447\u0430\u0441\u0442\u0435\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445, \u0430&nbsp; \u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0438\u0445 \u0432 \u0444\u0430\u0439\u043b\u0435 <em>index.html. <\/em>\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0410 \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043b\u0435\u0439\u0430\u0443\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<h3>\u041b\u0435\u0439\u0430\u0443\u0442  <\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c, \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0440\u043a\u0430\u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u0443\u0434\u0430 \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u043d\u0430\u043d\u0438\u044f \u043b\u0435\u0439\u0430\u0443\u0442\u0430 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u0442\u0430\u043a\u0438\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u043a\u0430\u043a <strong><em>rows <\/em><\/strong>\u0438<strong><em> cols<\/em><\/strong>,<strong><em> <\/em><\/strong>\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b, \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438. \u041a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u0430\u0441\u0441\u0438\u0432, \u0432\u043d\u0443\u0442\u0440\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u043d\u0430\u0448 \u043b\u0435\u0439\u0430\u0443\u0442 \u043d\u0430 2 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0440\u044f\u0434\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <strong><em>rows<\/em><\/strong>:<\/p>\n<pre><code class=\"javascript\">webix.ui({     rows: [         { template:\"Row One\" },         { template:\"Row Two\" }     ] }); <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043b\u0435\u0439\u0430\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8ef\/6b0\/178\/8ef6b017817582f0d064c18e112f9a11.png\" width=\"694\" height=\"350\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f <strong>template:&#187;Row One&#187;<\/strong> \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 HTML-\u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<p>\u0412 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0440\u044f\u0434 \u044d\u0442\u043e\u0433\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0430 \u043c\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0422\u0443\u043b\u0431\u0430\u0440. \u0412 \u043d\u0438\u0436\u043d\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f 2 \u0441\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<ul>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u0437\u0430\u043a\u0430\u0437\u0430 \u0440\u0435\u0439\u0441\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 2 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u0412 \u043b\u0435\u0432\u043e\u043c \u043c\u044b \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u0444\u043e\u0440\u043c\u0443 \u043f\u043e\u0438\u0441\u043a\u0430, \u0430 \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0434\u0430\u043d\u043d\u044b\u0445. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <strong><em>cols<\/em><\/strong>:<\/p>\n<pre><code class=\"javascript\">webix.ui({   rows: [           { template:\"Toolbar\", height:50},           {               cols:[                 { template:\"Search Form\" },                 { template:\"Data Table\" }               ]           }   ] }); <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043b\u0435\u0439\u0430\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f14\/b6b\/04a\/f14b6b04a777c47e5e812bb0898b3044.png\" width=\"699\" height=\"403\"><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u0434\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c 2 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u0438. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u0432\u0441\u0435\u043c \u043f\u043e CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>width<\/em><\/strong> \u0438 <strong><em>height<\/em><\/strong>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043c\u043e\u0434\u0443\u043b\u044e \u0437\u0430\u043a\u0430\u0437\u0430 \u0440\u0435\u0439\u0441\u043e\u0432 \u0438 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u0435\u0433\u043e \u043d\u0430 2 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u0412 \u043b\u0435\u0432\u043e\u043c \u043c\u044b \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u0444\u043e\u0440\u043c\u0443 \u0437\u0430\u043a\u0430\u0437\u0430, \u0430 \u043f\u0440\u0430\u0432\u044b\u0439 \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0443\u0441\u0442\u044b\u043c. \u0410 \u043f\u043e\u0447\u0435\u043c\u0443 \u0436\u0435 \u043f\u0443\u0441\u0442\u044b\u043c, \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435 \u0432\u044b? \u041e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0444\u043e\u0440\u043c\u0430&nbsp; \u0440\u0430\u0441\u0442\u044f\u043d\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d, \u0430 \u044d\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u044d\u0441\u0442\u0435\u0442\u0438\u0447\u043d\u043e. \u041f\u0443\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043e\u043d \u0436\u0435 <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.spacer.html\" rel=\"noopener noreferrer nofollow\"><strong><u>spacer<\/u><\/strong><\/a>, \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043d\u0430\u0448\u0435\u0439 \u0444\u043e\u0440\u043c\u044b, \u0430 \u043b\u0438\u0448\u043d\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u044d\u0442\u0438\u043c \u201c<em>\u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c<\/em>\u201d, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u044c\u0441\u044f.&nbsp;&nbsp;<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <strong><em>cols<\/em><\/strong>. \u0421\u0442\u043e\u0438\u0442 \u043d\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 <em>cols<\/em> \u0438 <em>rows <\/em>\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b \u0442\u043e\u043d\u043a\u043e\u0439 \u0441\u0435\u0440\u043e\u0439 \u043b\u0438\u043d\u0438\u0435\u0439. \u0422\u0430\u043a\u043e\u0439 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c \u043c\u0435\u0436\u0434\u0443 \u0444\u043e\u0440\u043c\u043e\u0439 \u0438 \u0441\u043f\u0435\u0439\u0441\u0435\u0440\u043e\u043c \u043d\u0430\u043c \u043d\u0438 \u043a \u0447\u0435\u043c\u0443. Webix \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <a href=\"https:\/\/ru.docs.webix.com\/api__ui.layout_type_config.html\" rel=\"noopener noreferrer nofollow\"><strong><u>type<\/u><\/strong><\/a>:<\/p>\n<pre><code class=\"javascript\">webix.ui({   rows: [     { template:\"Toolbar\", height:50 },     {       type:\"clean\", \/\/\u0443\u0431\u0438\u0440\u0430\u0435\u043c \u043b\u0438\u043d\u0438\u044e-\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c       cols:[         { template:\"Order Form\" },         {}       ]     }   ] });<\/code><\/pre>\n<p><strong>&nbsp;<\/strong>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1c8\/536\/a94\/1c8536a94ce81a9d282d5ca025aef5a7.png\" width=\"699\" height=\"403\"><figcaption><\/figcaption><\/figure>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043b\u0435\u0439\u0430\u0443\u0442\u044b \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0437\u0430\u043a\u0430\u0437\u0430 \u0440\u0435\u0439\u0441\u043e\u0432. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u0441\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c\u0438. \u041a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, Webix \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0438 \u0442\u0430\u043a\u0443\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.multiview.html\" rel=\"noopener noreferrer nofollow\"><u>multiview<\/u><\/a> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>cells<\/em><\/strong> \u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 <strong><em>id<\/em><\/strong>. \u0421\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0434\u0430\u043d \u043f\u0435\u0440\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u043d\u043e \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u0438, \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435.&nbsp;<\/p>\n<p>\u0410 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0448 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">webix.ui({   rows:[     { template:\"Toolbar\", height:50 },     {       cells:[         {\t           id:\"flight_search\",           cols:[             {template:\"Search Form\"},             {template:\"Data Table\"},           ]         },         {           id:\"flight_booking\",           type:\"clean\",           cols:[             {template:\"Order Form\"},             {},           ]         }       ]     }   ] });<\/code><\/pre>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043b\u0435\u0439\u0430\u0443\u0442\u0430\u043c\u0438. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h3>\u0422\u0443\u043b\u0431\u0430\u0440   <\/h3>\n<p>\u0422\u0443\u043b\u0431\u0430\u0440 \u2014 \u0432\u0430\u0436\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0442\u0430\u043c \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u043d\u0438\u0448\u0442\u044f\u043a\u0438. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0443\u043b\u0431\u0430\u0440 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0439 \u043b\u0435\u0439\u0431\u043b.<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <em>toolbar.js<\/em> \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">const toolbar = { view:\"toolbar\" };<\/code><\/pre>\n<p>\u041d\u0443\u0436\u043d\u043e \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u043d\u0430\u0447\u0438\u043c\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u043b\u0435\u0439\u0430\u0443\u0442\u0435.<\/p>\n<p>\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0442\u0438\u043f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>view<\/em><\/strong>. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.toolbar.html\" rel=\"noopener noreferrer nofollow\"><strong><u>toolbar<\/u><\/strong><\/a>.&nbsp;\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043b\u0435\u0439\u0431\u043b \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">{   view:\"toolbar\"   css:\"webix_dark\", \/\/\u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f   cols:[     {       id:\"label\", \/\/\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c id \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f       view:\"label\",       label:\"Flight Search\", \/\/\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435     }   ] }<\/code><\/pre>\n<p>\u0412\u044b\u0448\u0435 \u043c\u044b \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0438, \u0447\u0442\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <em>rows<\/em> \u0438 <em>cols<\/em>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.label.html\" rel=\"noopener noreferrer nofollow\"><strong><u>label<\/u><\/strong><\/a> \u043c\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <em>cols<\/em> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <strong>toolbar<\/strong>.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>id<\/em><\/strong> \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u043c\u0435\u043d\u044b \u043b\u0435\u0439\u0431\u043b\u0430, \u043d\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0435\u0449\u0435 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f.&nbsp;<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a\u0438\u043c\u0438 \u043d\u0435\u0445\u0438\u0442\u0440\u044b\u043c\u0438 \u043c\u0430\u043d\u0435\u0432\u0440\u0430\u043c\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0442\u0443\u043b\u0431\u0430\u0440 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043b\u0435\u0439\u0430\u0443\u0442\u0435, \u043d\u0443\u0436\u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0444\u0430\u0439\u043b <em>toolbar.js <\/em>\u0432<em> index.html <\/em>\u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <em>rows<\/em> \u0432\u043c\u0435\u0441\u0442\u043e <em>{template:\u201cToolbar\u201d}&nbsp;<\/em>:<\/p>\n<pre><code class=\"javascript\">webix.ui({ \trows: [     toolbar,     {       cells:[         ...       ]     } \t] });<\/code><\/pre>\n<p>\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043b\u0435\u0439\u0430\u0443\u0442 \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0442\u0443\u043b\u0431\u0430\u0440\u0430:  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cd8\/7aa\/401\/cd87aa4019b22fd48b28646ab834a6b4.png\" width=\"695\" height=\"349\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0443\u0436\u0435 \u043d\u0435\u043f\u043b\u043e\u0445\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432. \u041e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 2 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p>\u0424\u043e\u0440\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0435\u0439\u0441\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e.<\/p>\n<h3>\u0424\u043e\u0440\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432   <\/h3>\n<p>\u0424\u043e\u0440\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0440\u0435\u0439\u0441\u0430\u0445. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f, \u043f\u043e \u043a\u0430\u043a\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u0438 \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435.<\/p>\n<p>\u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <em>&lt;form&gt;<\/em>, \u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0442\u0435\u0433\u043e\u0432 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0432\u043e\u0432\u0441\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0447\u0443\u0442\u044c \u043b\u0438 \u043d\u0435 \u0434\u043e\u043a\u0442\u043e\u0440\u0441\u043a\u0430\u044f \u0441\u0442\u0435\u043f\u0435\u043d\u044c.<\/p>\n<p>Webix \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441 \u044d\u0442\u0438\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f.&nbsp;<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0448\u0443 \u0444\u043e\u0440\u043c\u0443 \u0432 \u0444\u0430\u0439\u043b\u0435 <em>search_form.js<\/em> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.form.html\" rel=\"noopener noreferrer nofollow\"><strong><u>form<\/u><\/strong><\/a>:<\/p>\n<pre><code class=\"javascript\">const search_form = { view:form };<\/code><\/pre>\n<p>\u041f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u043d\u0430\u043c \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <strong><em>elements<\/em><\/strong>:  <\/p>\n<pre><code>{   view:form,   ...   elements:[      { \/*\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u044b*\/ },     { \/*\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u044b*\/ },     ...   ]   ... }<\/code><\/pre>\n<p>\u041a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0444\u043e\u0440\u043c\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <em>elements<\/em>. \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e json \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0436\u0435 \u0443\u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Webix \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438.<\/p>\n<p>\u0424\u043e\u0440\u043c\u0430 Webix \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0438 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0432 \u043d\u0435\u0435 \u043f\u043e\u043b\u0435\u0439 \u0441\u0440\u0430\u0437\u0443, \u0430 \u043d\u0435 \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>name<\/em><\/strong> \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f. \u0422\u0430\u043a\u0436\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.form.html\" rel=\"noopener noreferrer nofollow\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>.<\/p>\n<p>\u0410 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c. \u0427\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0443\u043d\u043a\u0442\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0432\u044b\u0431\u043e\u0440\u0430 \u0433\u043e\u0440\u043e\u0434\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043a\u0430\u0442\u044c \u0440\u0435\u0439\u0441\u044b \u043f\u043e \u0434\u0430\u0442\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f. \u041a\u043e\u043d\u0442\u0440\u043e\u043b \u0434\u0430\u0442\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043e\u043a \u201cOne Way\u201d \u0438 \u201cReturn\u201d. \u041f\u0440\u0438 \u043f\u043e\u0438\u0441\u043a\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0431\u0438\u043b\u0435\u0442\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0447\u0435\u0442\u0447\u0438\u043a. \u041d\u0443 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043a\u0430\u043a \u0436\u0435 \u0431\u0435\u0437 \u043a\u043d\u043e\u043f\u043e\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u043e\u0439 \u201cReset\u201d \u0438 \u201cSearch\u201d. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043d\u0430\u0448\u0430 \u0444\u043e\u0440\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/818\/79f\/0cf\/81879f0cfb72e76d8dc534f929c2fad9.png\" width=\"362\" height=\"335\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0433\u043e.<\/p>\n<p><strong><em>\u0420\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438<\/em><\/strong><\/p>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u043e\u0440\u043c\u044b \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438 \u043f\u0440\u044f\u0442\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u0432\u044b\u0431\u043e\u0440\u0430 \u0434\u0430\u0442\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.radio.html\" rel=\"noopener noreferrer nofollow\"><strong><u>radio<\/u><\/strong><\/a>:<\/p>\n<pre><code class=\"javascript\">{   view:\"radio\",   label:\"Trip\",   name:\"trip_type\",   value:1,   options:[     { id:1, value:\"One-Way\" },     { id:2, value:\"Return\" }   ] }<\/code><\/pre>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043e\u043a \u0437\u0430\u0434\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>options. <\/em><\/strong>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e<strong><em> label<\/em><\/strong>, \u0430 \u0438\u043c\u044f, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0447\u0435\u0440\u0435\u0437<strong><em> name.<\/em><\/strong> \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043a\u0430\u0442\u044c \u043f\u043e\u043b\u0435\u0442\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0434\u043b\u044f <strong><em>value<\/em><\/strong> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0439 \u043e\u043f\u0446\u0438\u0438.&nbsp;<\/p>\n<p><strong><em>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0432\u044b\u0431\u043e\u0440\u0430 \u0433\u043e\u0440\u043e\u0434\u043e\u0432<\/em><\/strong><\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0443\u043d\u043a\u0442\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0438\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <a href=\"https:\/\/ru.docs.webix.com\/desktop__combo.html\" rel=\"noopener noreferrer nofollow\"><strong><u>combo<\/u><\/strong><\/a>:<\/p>\n<pre><code class=\"javascript\">{     view:\"combo\",     id:\"from\",     clear:\"replace\",     ...     placeholder:\"Select departure point\",     options:cities_data } <\/code><\/pre>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u0442\u0435\u043c \u0438\u043b\u0438 \u0438\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u043c. \u0418 \u0442\u0443\u0442 \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043d\u0430\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>placeholder.<\/em><\/strong> \u041c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u0438\u0445 \u0432 \u043f\u043e\u043b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u0435\u043b \u0438\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043b \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u043e \u043f\u043e\u0442\u043e\u043c \u0432\u0434\u0440\u0443\u0433 \u043f\u0435\u0440\u0435\u0434\u0443\u043c\u0430\u043b, \u0430 \u0442\u0430\u043a\u043e\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e, \u043c\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0435\u043c\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u0435 \u043e\u0434\u043d\u0438\u043c \u043a\u043b\u0438\u043a\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>clear<\/em><\/strong> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 <em>replace<\/em>. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e, \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u0438 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0438\u043a\u043e\u043d\u043a\u0430, \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0441\u0447\u0435\u0437\u043d\u0443\u0442 (<em>\u043f\u043e\u043b\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0438\u0449\u0435\u043d\u043e<\/em>).<\/p>\n<p>\u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u043f\u0446\u0438\u0439 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u0433\u043e\u0440\u043e\u0434\u043e\u0432. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c. \u0414\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u043e\u043f\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>options . <\/em><\/strong>\u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Webix. \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u0445 \u0432 \u0432\u0438\u0434\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0438\u043b\u0438 \u0436\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 URL, \u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0430\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442 \u0438\u0445.<\/p>\n<p>\u041d\u043e \u0434\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u0438 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0442\u0440\u0430\u0442\u043d\u043e. Webix \u0440\u0435\u0448\u0430\u0435\u0442 \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0430\u043a\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u043a\u0430\u043a <a href=\"https:\/\/ru.docs.webix.com\/api__refs__datacollection.html\" rel=\"noopener noreferrer nofollow\"><strong><em><u>DataCollection<\/u><\/em><\/strong><\/a>. \u0412\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0443\u043a\u0430\u0437\u0430\u0442\u044c URL, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435. \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u043e\u0440\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <em>.\/data\/cities.json. <\/em>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0438 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0435\u0435 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e:<\/p>\n<pre><code class=\"javascript\">const cities_data = new webix.DataCollection({   url:\".\/data\/cities.json\" });<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043d\u0430\u0448\u0438\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u0445 \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e.<\/p>\n<p>\u0412\u044b\u0448\u0435 \u043c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0432\u044b\u0431\u043e\u0440\u0430 \u0442\u043e\u0447\u043a\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u0443\u043d\u043a\u0442 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u044f, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p><strong><em>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0432\u044b\u0431\u043e\u0440\u0430 \u0434\u0430\u0442<\/em><\/strong><\/p>\n<p>\u0420\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u2014 \u00ad\u00ad &#8212; \u043e\u0434\u043d\u0430 \u0438\u0437 \u0432\u0430\u0436\u043d\u0435\u0439\u0448\u0438\u0445 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438. \u041f\u0440\u0438 \u043f\u043e\u0438\u0441\u043a\u0435 \u0440\u0435\u0439\u0441\u043e\u0432 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u044d\u0442\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043b\u0435\u0442\u0430 \u043f\u0440\u0438 \u043f\u043e\u0438\u0441\u043a\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0440\u0435\u0439\u0441\u0430. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043c\u044b \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0430\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u0430\u043a <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.datepicker.html\" rel=\"noopener noreferrer nofollow\"><strong><u>datepicker<\/u><\/strong><\/a><strong>:<\/strong><\/p>\n<pre><code class=\"javascript\">{   view:\"datepicker\",   name:\"departure_date\",   ...   format:\"%d %M %Y\" }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0439 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0434\u0430\u0442\u0443. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0434\u0430\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u043b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>format.<\/em><\/strong><\/p>\n<p>\u0417\u0430\u0434\u0430\u0434\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0434\u0430\u0442\u044b \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0440\u0435\u0439\u0441\u0430, \u043d\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043f\u0440\u044f\u0447\u0435\u043c \u0435\u0433\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>hidden<\/em><\/strong>. \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0441\u0435\u043b\u0435\u043a\u043e\u0440 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438 \u201cReturn\u201d, \u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p><strong><em>\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0431\u0438\u043b\u0435\u0442\u043e\u0432<\/em><\/strong><\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0441\u0435\u0431\u0435 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e, \u0447\u0442\u043e \u043d\u0430\u0448 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043b\u0435\u0442\u0438\u0442 \u0432 \u0434\u043e\u043b\u0433\u043e\u0436\u0434\u0430\u043d\u043d\u044b\u0439 \u043e\u0442\u043f\u0443\u0441\u043a \u043d\u0435 \u043e\u0434\u0438\u043d, \u0430 \u0441\u043e \u0432\u0441\u0435\u0439 \u0441\u0435\u043c\u044c\u0435\u0439 \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0435\u0439 \u0434\u0440\u0443\u0437\u0435\u0439. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u043c\u0443 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043d\u0435 \u043e\u0434\u0438\u043d \u0431\u0438\u043b\u0435\u0442, \u0430 \u043d\u0435\u043a\u043e\u0435 \u044d\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043c \u0435\u043c\u0443 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0431\u0438\u043b\u0435\u0442\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.counter.html\" rel=\"noopener noreferrer nofollow\"><strong><u>counter<\/u><\/strong><\/a>.<strong><em> <\/em><\/strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e. \u0421 \u043f\u0440\u0430\u0432\u043e\u0439 \u0438 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0438\u043a\u043e\u043d\u043a\u0438 \u0441\u043e \u0437\u043d\u0430\u043a\u0430\u043c\u0438 \u043f\u043b\u044e\u0441 \u0438 \u043c\u0438\u043d\u0443\u0441, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u041d\u0443\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e<strong><em> min, <\/em><\/strong>\u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0441\u043c\u043e\u0433 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 1 \u0431\u0438\u043b\u0435\u0442\u0430 (<em>\u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u0431\u044b \u0430\u0431\u0441\u0443\u0440\u0434\u043d\u043e<\/em>). \u041a\u043e\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">{ view:\"counter\", name:\"tickets\", label:\"Tickets\", min:1 }<\/code><\/pre>\n<p><strong><em>\u041a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0441\u0431\u0440\u043e\u0441\u0430 \u0444\u043e\u0440\u043c\u044b<\/em><\/strong><\/p>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0441\u044f \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u043e\u043b\u044f. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043d\u0443\u0436\u043d\u044b\u0445 \u0440\u0435\u0439\u0441\u043e\u0432 \u043f\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u0438\u043b\u0438 \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0444\u043e\u0440\u043c\u0443.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 <strong>\u201cSearch\u201d<\/strong> \u0438<strong> \u201cReset\u201d.<\/strong> \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0438\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<strong> <\/strong><a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.button.html\" rel=\"noopener noreferrer nofollow\"><strong><u>button<\/u><\/strong><\/a>.<strong>&nbsp; <\/strong>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 <strong><em>value<\/em><\/strong>, \u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c&nbsp; \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>css<\/em>. <\/strong>\u0417\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u043d\u043e \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043d\u043e\u043f\u043e\u043a. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 <em>&#171;webix_primary&#187; <\/em>\u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438<em> <\/em>\u201cSearch\u201d. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c <a href=\"https:\/\/ru.docs.webix.com\/api__link__ui.button_css_config.html\" rel=\"noopener noreferrer nofollow\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>.<\/p>\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043c\u044b \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u043d\u0430\u0448\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">{   cols:[     { view:\"button\", value:\"Reset\" },     { view:\"button\", value:\"Search\", css:\"webix_primary\" }   ] }<\/code><\/pre>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0438\u0441\u043a\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438. \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e \u0432 \u043d\u0430\u0448 \u043b\u0435\u0439\u0430\u0443\u0442 &#8212; \u0432\u044b \u0435\u0449\u0435 \u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u043e \u043d\u0451\u043c? \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0438 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u0442\u0443\u043b\u0431\u0430\u0440\u043e\u043c, \u043d\u0443\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0444\u0430\u0439\u043b <em>search_form.js<\/em> \u0432 <em>index.html. <\/em>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0444\u043e\u0440\u043c\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <strong>search_form<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0438 \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0432 \u043b\u0435\u0439\u0430\u0443\u0442\u0435:<\/p>\n<pre><code class=\"javascript\">[   toolbar,   {     cells:[       {         id:\"flight_search\",         cols:[           search_form,           { template:\"Data Table\" }         ]       }, ...     ]   }, ]\t<\/code><\/pre>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/50c\/bdf\/3de\/50cbdf3dec1b1262449b715c5756891f.png\" width=\"695\" height=\"352\"><figcaption><\/figcaption><\/figure>\n<h3>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0435\u0439\u0441\u043e\u0432   <\/h3>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u0435\u043b \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u0430\u0436\u0430\u043b \u043a\u043d\u043e\u043f\u043a\u0443 \u201cSearch\u201d \u0438 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0410 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0438 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f.&nbsp;<\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Webix \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u0446\u0435\u043d\u0438\u0442\u044c. \u0415\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u043c \u0432 PDF \u0438\u043b\u0438 Excel. \u041c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0446\u0435\u043b\u0443\u044e \u043a\u043d\u0438\u0433\u0443 \u043e \u0435\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445, \u043f\u0440\u043e\u0434\u0430\u0442\u044c \u0438 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0430\u0441\u043d\u043e\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u0434\u0435\u043d\u044c\u0433\u0438, \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0441 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e, \u043a\u0430\u043a \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0434 \u043d\u0430\u0448\u0438 \u043d\u0443\u0436\u0434\u044b.<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <em>datatable.js<\/em> \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0440\u0435\u0439\u0441\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.datatable.html\" rel=\"noopener noreferrer nofollow\"><strong><u>datatable<\/u><\/strong><\/a>:<\/p>\n<pre><code class=\"javascript\">const flight_table = {    view:\"datatable\",   url:flights_data };<\/code><\/pre>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0443 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043e \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0440\u0435\u0439\u0441\u043e\u0432. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d\u0438 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 .\/data\/flights_data.json. \u041e\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 Webix \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 \u0438\u043b\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0443, \u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u0438\u0445 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438. \u041f\u0440\u043e\u0449\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p>\u041f\u0443\u0442\u044c \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>url<\/em><\/strong>. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u043f\u0443\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>flights_data<\/em> \u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u043c \u0435\u0435 \u043d\u0430\u0448\u0435\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443.&nbsp;<\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0438\u0445 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c. \u0414\u043b\u044f \u043e\u043e\u043e\u0447\u0435\u043d\u044c \u043b\u0435\u043d\u0438\u0432\u044b\u0445 \u043f\u0440\u043e\u0433\u0435\u0440\u043e\u0432, Webix \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0442\u0430\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u0430\u043a <a href=\"https:\/\/ru.docs.webix.com\/api__ui.datatable_autoconfig_config.html\" rel=\"noopener noreferrer nofollow\"><u>autoConfig<\/u><\/a>. \u0415\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <em>true<\/em>, \u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u0441\u044f \u0432 \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0438\u043c\u0435\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u043f\u043e\u043b\u044f\u043c\u0438.<\/p>\n<p>\u041d\u043e \u043c\u044b \u0435\u0449\u0435 \u043d\u0435 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043b\u0435\u043d\u0438\u043b\u0438\u0441\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u0442\u044c \u043a \u0442\u0430\u043a\u0438\u043c \u0445\u0438\u0442\u0440\u043e\u0441\u0442\u044f\u043c. \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0441\u0443\u043b\u0438\u0442 \u043d\u0430\u043c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u043d\u0438\u0445 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u0441\u0442\u0430\u043b\u044c\u043d\u043e.&nbsp;<\/p>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430&nbsp; <strong><em>columns<\/em><\/strong>:<\/p>\n<pre><code class=\"javascript\">columns:[   { \/*\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0430*\/ },   { \/*\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0430*\/ },   ... ]<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 \u043f\u043e\u043f\u0430\u043b\u0438 \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u0441\u0442\u043e\u043b\u0431\u0435\u0446, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c <strong><em>id<\/em><\/strong>, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c<strong><em> <\/em><\/strong>\u0441 \u043f\u043e\u043b\u0435\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435.&nbsp;<\/p>\n<p>\u0423 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435, \u0438\u043b\u0438 \u043f\u043e-\u043f\u0440\u043e\u0441\u0442\u043e\u043c\u0443 \u2014 \u201c\u0448\u0430\u043f\u043a\u0430\u201d. \u0428\u0430\u043f\u043a\u0443 \u043c\u044b \u0437\u0430\u0434\u0430\u0435\u043c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>header<\/em><\/strong>.<\/p>\n<p>\u041d\u0435\u0440\u0435\u0434\u043a\u043e \u0431\u044b\u0432\u0430\u044e\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0432 \u043e\u0434\u043d\u043e\u043c \u0432\u0438\u0434\u0435, \u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u0432 \u0434\u0440\u0443\u0433\u043e\u043c. \u0411\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u043b\u0435\u043f\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u0447\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Webix \u043d\u0435 \u0443\u0447\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u0438 \u0438 \u043d\u0435 \u0440\u0435\u0448\u0438\u043b\u0438 \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0437\u0430\u0440\u0430\u043d\u0435\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>format.&nbsp;<\/em><\/strong><\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0443\u0436\u0435 \u043a\u043e\u0441\u043d\u0443\u043b\u0438\u0441\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e. \u0412\u043e\u043f\u0440\u043e\u0441 \u0430\u043a\u0442\u0443\u0430\u043b\u0435\u043d \u0434\u043b\u044f \u043d\u0430\u0441 \u0438 \u0442\u0435\u043c, \u0447\u0442\u043e \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0420\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u0434\u0430\u0442\u0430\u0445 \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u0445 \u0433\u043e\u0440\u043e\u0434\u043e\u0432.&nbsp;<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0434\u0430\u0442\u0430\u043c\u0438.<\/p>\n<p>\u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a \u0442\u0438\u043f\u0430 <strong><em>&#171;2021-03-26&#187;<\/em><\/strong><em>. <\/em>\u041a\u0430\u043a \u0432\u0430\u043c \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043e\u043f\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u043c\u0438 \u0434\u0430\u0442\u0430\u043c\u0438 \u2014 \u043d\u0435 \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435 \u0437\u0430\u043d\u044f\u0442\u0438\u0435 (<em>\u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0430\u0436\u0435 \u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e\u0435<\/em>). \u0418\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u044d\u0442\u043e\u0433\u043e, \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 <strong><em>JS Date<\/em><\/strong> \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>scheme <\/em><\/strong>\u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0432\u0441\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f (<em>\u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u043e\u043f\u0430\u0434\u0443\u0442 \u0432 \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0441 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 id<\/em>) \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b <strong><em>Date<\/em><\/strong> \u043f\u0435\u0440\u0435\u0434 \u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443:<\/p>\n<pre><code class=\"javascript\">scheme:{   $init:function(obj){     obj.date = webix.Date.strToDate(\"%Y-%m-%d\")(obj.date);   } }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u0442 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u201cDate\u201d \u0432 \u0432\u0438\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0430 \u043d\u0435 \u0441\u0442\u0440\u043e\u043a. \u0422\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0439\u0441\u044b \u043f\u0440\u0438 \u043f\u043e\u0438\u0441\u043a\u0435 \u0431\u0438\u043b\u0435\u0442\u043e\u0432. \u041d\u043e \u043d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0435 \u043d\u0435 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u041d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438\u0445 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u043c\u044b \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0443\u0436\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>format <\/em><\/strong>\u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 <strong><em>webix.i18n.longDateFormatStr. <\/em><\/strong>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 <strong><em>Date<\/em><\/strong> \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <em>format<\/em> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a<em> <\/em><strong><em>26 March 2021<\/em><\/strong><em>. <\/em>\u0412\u043e\u0442 \u0442\u0430\u043a\u0430\u044f \u0432\u043e\u0442 \u043c\u0430\u0433\u0438\u044f.<\/p>\n<p>\u0421\u0442\u043e\u043b\u0431\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0433\u043e\u0440\u043e\u0434\u043e\u0432, \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u044e\u0442 \u043e\u0441\u043e\u0431\u043e\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043f\u0443\u043d\u043a\u0442\u0430\u0445 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0447\u0438\u0441\u0435\u043b. \u0417\u0430\u0447\u0435\u043c \u0442\u0430\u043a\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u2014 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435 \u0432\u044b? \u041e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439. \u0421\u0430\u043c\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0433\u043e\u0440\u043e\u0434\u043e\u0432 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u043a\u0430\u043a id &#8212; value, \u0430 \u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0440\u0435\u0439\u0441\u0430\u0445 \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e id \u0433\u043e\u0440\u043e\u0434\u043e\u0432. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0433\u043e\u0440\u043e\u0434\u0430 \u043f\u043e \u0435\u0433\u043e id, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <strong><em>collection.&nbsp;<\/em><\/strong><\/p>\n<p><em>\u0425\u043e\u0447\u0443 \u043d\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0432\u044b\u0431\u043e\u0440\u0430 \u0433\u043e\u0440\u043e\u0434\u043e\u0432, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u0435\u0435 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <\/em><strong><em>cities_data. <\/em><\/strong><em>\u0412\u0441\u044f \u043f\u0440\u0435\u043b\u0435\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f 1 \u0440\u0430\u0437 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043d\u0435\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435.<\/em><\/p>\n<p>\u0422\u0430\u043a \u0432\u043e\u0442, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>collection <\/em><\/strong>\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445 <strong><em>cities_data<\/em><\/strong> \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0433\u043e\u0440\u043e\u0434\u0430 \u043f\u043e \u0435\u0433\u043e <strong><em>id, <\/em><\/strong>\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u044f\u0447\u0435\u0439\u043a\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u0417\u0434\u0435\u0441\u044c \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c-\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0447\u0435\u0433\u043e. \u0422\u0430\u043a\u0438\u0435 \u043c\u0435\u043b\u043e\u0447\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>\u041d\u043e \u0440\u0430\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u043c\u044b \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043d\u0430 \u0432\u0435\u0447\u0435\u0440 \u043f\u044f\u0442\u043d\u0438\u0446\u044b. \u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u0435\u043b \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0444\u043e\u0440\u043c\u0443 \u043f\u043e\u0438\u0441\u043a\u0430, \u043d\u0430\u0436\u0430\u043b \u043a\u043d\u043e\u043f\u043a\u0443 \u201cSearch\u201d \u0438 \u043d\u0430\u0448\u0435\u043b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0440\u0435\u0439\u0441 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 (<em>\u043f\u043e\u043a\u0430 \u043d\u0443\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u0430 \u043c\u044b \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/em>). \u041a\u0430\u043a\u0438\u0435 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f? \u0411\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u043e\u043c\u043e\u0447\u044c \u0435\u043c\u0443 \u0437\u0430\u0431\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0439\u0441. \u041a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c?<\/p>\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0431\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0446\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u044f\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430, \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0444\u043e\u0440\u043c\u0435 \u0437\u0430\u043a\u0430\u0437\u0430. \u041d\u043e \u043d\u0438 \u0441\u043b\u043e\u0432\u0430 \u0431\u043e\u043b\u044c\u0448\u0435. \u0412\u0435\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438, \u0433\u0434\u0435 \u043c\u044b \u0432\u0434\u043e\u0445\u043d\u0435\u043c \u0436\u0438\u0437\u043d\u044c \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u0441 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c <a href=\"https:\/\/ru.docs.webix.com\/datatable__columns_configuration.html#dataformats\" rel=\"noopener noreferrer nofollow\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>.<\/p>\n<p>\u0410 \u043c\u044b \u0436\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443.<\/p>\n<p>\u041d\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0448\u0435\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0439\u0441\u043e\u0432 (<em>10, 100 \u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0435<\/em>), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c. \u041d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043e\u0447\u044c \u0435\u043c\u0443 \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u0440\u0435\u0439\u0441 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u0435\u0435 \u043d\u0430\u0434 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0448\u0435\u043b \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u0441\u0432\u043e\u0439 \u0440\u0435\u0439\u0441 \u0438 \u0441 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u044b\u043c \u043b\u0438\u0446\u043e\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0441\u0432\u043e\u0438\u043c \u0434\u0440\u0443\u0437\u044c\u044f\u043c \u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u043c, \u043a\u0430\u043a\u043e\u0439 \u043a\u0440\u0443\u0442\u043e\u0439 \u0443 \u043d\u0430\u0441 \u0441\u0435\u0440\u0432\u0438\u0441.&nbsp;<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.search.html\" rel=\"noopener noreferrer nofollow\"><strong><u>search<\/u><\/strong><\/a>:<\/p>\n<pre><code class=\"javascript\">const search_bar = { view:\"search\" };<\/code><\/pre>\n<p>\u042d\u0442\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0441 \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0439 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u201c\u043f\u043e\u0438\u0441\u043a\u201d.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u043e, \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043d\u0430\u0448 \u043b\u0435\u0439\u0430\u0443\u0442. \u0418 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">[    toolbar,    {      cells:[        {          id:\"flight_search\",          cols:[            search_form,            {               rows:{                search_bar,                flight_table              }            }          ]        }, ...      ]    }, ]\t<\/code><\/pre>\n<p>\u0423\u0436\u0435 \u0432\u0441\u0451 \u043f\u043e-\u0432\u0437\u0440\u043e\u0441\u043b\u043e\u043c\u0443. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c:  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/36b\/f15\/24d\/36bf1524d4396cc0f8baad97ae3ea986.png\" width=\"677\" height=\"417\"><figcaption><\/figcaption><\/figure>\n<h3>\u0424\u043e\u0440\u043c\u0430 \u0437\u0430\u043a\u0430\u0437\u0430   <\/h3>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0441\u044f \u0441 \u0440\u0435\u0439\u0441\u043e\u043c \u0438 \u0433\u043e\u0442\u043e\u0432 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043a\u0430\u0437. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u043c \u0435\u043c\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e. \u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u0444\u043e\u0440\u043c\u043e\u0439 \u0437\u0430\u043a\u0430\u0437\u0430. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u201cBook\u201d \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435. \u0424\u043e\u0440\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/14e\/104\/12f\/14e10412fd4a9ead0e3ea3666842f258.png\" width=\"493\" height=\"432\"><figcaption><\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u044d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u043c \u043d\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <strong>form<\/strong> \u0438 \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"javascript\">const order_form = {   view:\"form\",   elements:[     ...   ] };<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u043f\u0438\u0448\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p><strong><em>\u041f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430<\/em><\/strong><\/p>\n<p>\u0414\u043b\u044f \u0437\u0430\u043a\u0430\u0437\u0430 \u0440\u0435\u0439\u0441\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0435\u0433\u043e \u043b\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430. <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.text.html\" rel=\"noopener noreferrer nofollow\"><strong><u>text<\/u><\/strong><\/a><strong> <\/strong>\u0438 \u0435\u0433\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u043c\u0438<strong>:<\/strong><\/p>\n<pre><code class=\"javascript\">elements:[   { view:\"text\", name:\"first_name\", \u2026, invalidMessage:\"First Name can not be empty\" },   { view:\"text\", name:\"last_name\", \u2026, invalidMessage:\"Last Name can not be empty\" },   { view:\"text\", name:\"email\", \u2026, invalidMessage:\"Incorrect email address\" },   ... ]\t<\/code><\/pre>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0438\u0441\u043a\u0430 \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e. \u041b\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435&nbsp; \u2014 \u0432\u0435\u0449\u044c \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u0430\u044f, \u0438 \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0432\u0432\u0435\u0434\u0435\u0442 \u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043e\u043d \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043a\u0430\u0437. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439, \u0433\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0432\u0432\u0435\u043b \u043b\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u043b\u0438 \u0432\u0432\u0435\u043b \u0438\u0445 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443. \u0427\u0442\u043e \u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u0434\u0435\u043b\u043e\u043c? \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c\u0441\u044f.&nbsp;<\/p>\n<p>Webix \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <a href=\"https:\/\/ru.docs.webix.com\/api__link__ui.proto_rules_config.html\" rel=\"noopener noreferrer nofollow\"><strong><em><u>rules<\/u><\/em><\/strong><\/a><strong><em> <\/em><\/strong>\u0438 \u043d\u0430\u0431\u043e\u0440\u0430 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041c\u043e\u0436\u043d\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0438 \u0441\u0430\u043c\u043e\u043c\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0430\u0440\u0443 \u043a\u043d\u0438\u0433 \u043f\u043e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c, \u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u043a\u0443\u0440\u0441\u044b \u043f\u043e \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u044b. \u0412\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0438\u043c\u0435\u043d\u0430\u043c (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c <em>name<\/em>) \u043f\u043e\u043b\u0435\u0439 \u0444\u043e\u0440\u043c\u044b \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 <strong><em>rules<\/em><\/strong>:<\/p>\n<pre><code class=\"javascript\">{   elements:[ \u2026 ],   rules:{     first_name:webix.rules.isNotEmpty, \/\/\u043f\u043e\u043b\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u0443\u0441\u0442\u044b\u043c     last_name:webix.rules.isNotEmpty,      email:webix.rules.isEmail \/\/\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 email   } }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u043f\u0440\u0430\u0432\u0438\u043b\u0443, \u0444\u043e\u0440\u043c\u0430 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043f\u043e\u043b\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u044f\u0442\u0441\u044f \u043a\u0440\u0430\u0441\u043d\u044b\u043c. \u041d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043a\u0440\u0430\u0441\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 \u043d\u0438 \u043e \u0447\u0435\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442. \u041e\u043d \u043f\u043e\u0439\u043c\u0435\u0442, \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u0447\u0442\u043e \u0442\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435, \u043d\u043e \u043d\u0435 \u043f\u043e\u0439\u043c\u0435\u0442, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u044b \u043e\u0442 \u043d\u0435\u0433\u043e \u0445\u043e\u0442\u0438\u043c.&nbsp;<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443 Webix \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>invalidMessage<\/em><\/strong>. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"javascript\">{ ..., invalidMessage:\"First Name can not be empty\", ... }<\/code><\/pre>\n<p>\u0417\u0430\u043a\u0440\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u044b\u0441\u043b\u044c, \u0447\u0442\u043e \u0443 Webix \u0435\u0441\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0430 \u0432\u0441\u0435 \u0441\u043b\u0443\u0447\u0430\u0438 \u0436\u0438\u0437\u043d\u0438. \u041d\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c UI \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0430 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0430\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u043e-\u0445\u043e\u0440\u043e\u0448\u0435\u043c\u0443 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<p><strong><em>\u0421\u0447\u0435\u0442\u0447\u0438\u043a<\/em><\/strong><\/p>\n<p>\u0412 \u0444\u043e\u0440\u043c\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u043d\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b \u043d\u0443\u0436\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0431\u0438\u043b\u0435\u0442\u043e\u0432 \u0438 \u043d\u0430\u0436\u0430\u043b \u043a\u043d\u043e\u043f\u043a\u0443 \u201cBook\u201d \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0440\u0435\u0439\u0441\u0430. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u043e \u0444\u043e\u0440\u043c\u0443 \u0437\u0430\u043a\u0430\u0437\u0430, \u0433\u0434\u0435 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c \u0435\u0433\u043e. \u041d\u043e \u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432\u0434\u0440\u0443\u0433 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0437\u0430\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0435 2 \u0431\u0438\u043b\u0435\u0442\u0430 (<em>\u043a\u0430\u043a \u043e\u043d \u0443\u043a\u0430\u0437\u0430\u043b \u043f\u0440\u0438 \u043f\u043e\u0438\u0441\u043a\u0435<\/em>), \u0430 \u0442\u0440\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u0430\u0434\u0438\u043c \u0435\u043c\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0431\u0438\u043b\u0435\u0442\u043e\u0432 \u043f\u0440\u044f\u043c\u043e \u0432 \u0444\u043e\u0440\u043c\u0435 \u0437\u0430\u043a\u0430\u0437\u0430.&nbsp;<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0439 \u043d\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <strong>counter<\/strong>. \u041f\u043e \u0441\u0443\u0442\u0438, \u043e\u043d \u0442\u0430\u043a\u043e\u0439 \u0436\u0435, \u043a\u0430\u043a \u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0444\u043e\u0440\u043c\u0435. \u0415\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0445 \u043c\u0435\u0441\u0442 \u043d\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u0440\u0435\u0439\u0441\u0435. \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0431\u0438\u043b\u0435\u0442\u043e\u0432, \u043d\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u043d\u0430\u0437\u0430\u0434 \u043a \u043f\u043e\u0438\u0441\u043a\u0443:<\/p>\n<pre><code class=\"javascript\">{ view:\"counter\", id:\"tickets_counter\", name:\"tickets\", label:\"Tickets\", min:1 }<\/code><\/pre>\n<p><strong><em>\u0427\u0435\u043a\u0431\u043e\u043a\u0441\u044b<\/em><\/strong><\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0430\u0441 \u0445\u043e\u0442\u044c \u0440\u0430\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0443\u0441\u043b\u0443\u0433\u0430\u043c\u0438 \u0430\u0432\u0438\u0430\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439 \u0438 \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u0437\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u0430\u0433\u0430\u0436, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0432\u043b\u0435\u0437 \u0432 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043d\u0443\u044e \u0440\u0443\u0447\u043d\u0443\u044e \u043a\u043b\u0430\u0434\u044c, \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u043f\u043b\u0430\u0442\u0438\u0442\u044c. \u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u043b\u0435\u0442 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u0438\u043d\u043d\u044b\u043c, \u043c\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0435\u0434\u044b \u0432 \u0446\u0435\u043d\u0443 \u0431\u0438\u043b\u0435\u0442\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c 2 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430 \u201cChecked-in Baggage\u201d \u0438 \u201cFood\u201d \u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0432\u044b\u0448\u0430\u0442\u044c \u0446\u0435\u043d\u0443 \u0437\u0430 \u0431\u0438\u043b\u0435\u0442, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0440\u0430\u043b \u044d\u0442\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043b\u044e\u0448\u043a\u0438. \u0427\u0435\u043a\u0431\u043e\u043a\u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.checkbox.html\" rel=\"noopener noreferrer nofollow\"><strong><u>checkbox<\/u><\/strong><\/a>:<\/p>\n<pre><code class=\"javascript\">[   { view:\"checkbox\", name:\"baggage\", label:\"Checked-in Baggage\", checkValue:15 },   { view:\"checkbox\", name:\"food\", label:\"Food\", checkValue:10 } ]<\/code><\/pre>\n<p>\u0427\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>checkValue <\/em><\/strong>\u043c\u044b \u0437\u0430\u0434\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u0430\u0433\u0430\u0436 \u0438 \u043f\u0438\u0442\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043b\u0430\u0442\u0438\u0442\u044c 15 \u0438 10 \u0434\u043e\u043b\u043b\u0430\u0440\u043e\u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p><strong><em>\u0420\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438<\/em><\/strong><\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430\u043c \u043f\u043e\u043b\u0435\u0442\u0430.&nbsp; \u0417\u0430 \u044d\u0442\u043e \u0443 \u043d\u0430\u0441 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438 \u201cEconomy\u201d \u0438 \u201cBusiness\u201d. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0433\u043e \u043d\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <strong>radio<\/strong>:<\/p>\n<pre><code class=\"javascript\">{    view:\"radio\", name:\"class\", label:\"Class\",   options:[     { id:1, value:\"Economy\" },     { id:2, value:\"Business\" }   ] }<\/code><\/pre>\n<p>\u041c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043a\u043b\u0430\u0441\u0441 \u201cEconomy\u201d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043d\u0430 \u201cBusiness\u201d \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0446\u0435\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0432\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f. \u0410 \u0447\u0442\u043e \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0437\u0430 \u043a\u043e\u043c\u0444\u043e\u0440\u0442 \u043d\u0443\u0436\u043d\u043e \u043f\u043b\u0430\u0442\u0438\u0442\u044c.<\/p>\n<p><strong><em>\u041b\u0435\u0439\u0431\u043b<\/em><\/strong><\/p>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u2014 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0437\u0430\u043a\u0430\u0437\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0439 \u0446\u0435\u043d\u044b. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0433\u043e \u043d\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <strong>label<\/strong>:  <\/p>\n<pre><code class=\"javascript\">{ view:\"label\", id:\"order_price\" }<\/code><\/pre>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0446\u0435\u043d\u0443 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u201cBook\u201d \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0440\u0435\u0439\u0441\u043e\u0432. \u041e\u043d\u0430 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0431\u0438\u043b\u0435\u0442\u0430 \u0438 \u0438\u0445 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e. \u041f\u043e \u043c\u0435\u0440\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043b\u044e\u0448\u0435\u043a \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0431\u0438\u043b\u0435\u0442\u043e\u0432 \u0446\u0435\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.&nbsp;<\/p>\n<p><strong><em>\u041a\u043d\u043e\u043f\u043a\u0438 \u201cGo Back\u201d \u0438 \u201cMake Order\u201d<\/em><\/strong><\/p>\n<p>\u041d\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0441\u044f \u0441 \u0437\u0430\u043a\u0430\u0437\u043e\u043c \u0438 \u0433\u043e\u0442\u043e\u0432 \u0435\u0433\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0443\u043c\u0430\u043b \u0438 \u0445\u043e\u0447\u0435\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043d\u0430\u0437\u0430\u0434 \u043a \u043f\u043e\u0438\u0441\u043a\u0443. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0442\u0430\u043a\u0443\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u201cGo Back\u201d \u0438 \u201cMake Order\u201d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0433\u043e \u043d\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <strong>button<\/strong>:<\/p>\n<pre><code class=\"javascript\">{    cols:[     { view:\"button\", value:\"Go Back\" },     { view:\"button\", value:\"Make Order\" }   ]  }<\/code><\/pre>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0444\u043e\u0440\u043c\u044b \u0437\u0430\u043a\u0430\u0437\u0430 \u0440\u0435\u0439\u0441\u043e\u0432. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0435\u0433\u043e \u0432 \u043d\u0430\u0448 \u043b\u0435\u0439\u0430\u0443\u0442 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c: <\/p>\n<pre><code class=\"javascript\">[   toolbar,   {     cells:[       {...},       {         id:\"flight_booking\",         type:\"clean\",\t\t\t\t\t\t\t\t         cols:[            order_form,             {}         ]   \t\t} \t\t] \t} ]\t<\/code><\/pre>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c86\/458\/82b\/c8645882b1a2aff22616a7935b038c41.png\" alt=\"\" title=\"\" width=\"699\" height=\"396\"><figcaption><\/figcaption><\/figure>\n<p>\u041c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043b\u0435\u0439\u0430\u0443\u0442. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0436\u0438\u0432\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. <\/p>\n<h2>\u0417\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c  <\/h2>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u043b\u0435\u0439\u0430\u0443\u0442 \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webix UI. \u041d\u043e \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0440\u0448\u0438\u043d\u0430 \u0430\u0439\u0441\u0431\u0435\u0440\u0433\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0436\u0438\u0432\u0438\u043c \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c. \u0420\u0430\u043d\u044c\u0448\u0435 \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u0438, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0435. \u0421\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 Webix \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0433\u043e.<\/p>\n<h3>\u0424\u043e\u0440\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430<\/h3>\n<p><strong><em>\u0420\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438<\/em><\/strong><\/p>\n<p>\u0418\u0442\u0430\u043a, \u0432 \u0441\u0430\u043c\u043e\u043c \u0432\u0435\u0440\u0445\u0443 \u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0438\u0441\u043a\u0430 \u0443 \u043d\u0430\u0441 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438 \u201cOne-Way\u201d, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0438 \u201cReturn\u201d, \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0441\u043f\u0440\u044f\u0442\u0430\u043d\u043d\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0434\u0430\u0442\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f. \u041a\u0430\u043a \u043d\u0430\u043c \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c? \u0410 \u0432\u0441\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e, \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0421\u0430\u043c\u044b\u043c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c \u0438\u0437 \u043d\u0438\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>on,<\/em><\/strong> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0439.<strong><em> <\/em><\/strong>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">{   view:\"radio\",   ...   on:{     onChange:function(newv){       if(newv == 2){         $$(\"return_date\").show(); \/\/\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0434\u0430\u0442\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f       }else{         $$(\"return_date\").hide(); \/\/\u043f\u0440\u044f\u0447\u0435\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0434\u0430\u0442\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f       }     }   } }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u044f\u0442\u0430\u0442\u044c \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0434\u0430\u0442\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 <strong><em>show() <\/em><\/strong>\u0438<strong><em> hide(), <\/em><\/strong>\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u0441\u0430\u043c\u0438 \u0437\u0430 \u0441\u0435\u0431\u044f<strong><em>. <\/em><\/strong>\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439<strong><em> <\/em><\/strong>\u043c\u0435\u0442\u043e\u0434 <strong><em>$$(id) <\/em><\/strong>\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443,<em> id<\/em> \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u043d \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p><strong><em>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0433\u043e\u0440\u043e\u0434\u043e\u0432<\/em><\/strong><\/p>\n<p>\u041d\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0440\u0430\u043b \u0411\u0435\u0440\u043b\u0438\u043d \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0443\u043d\u043a\u0442\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043e\u043d \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043a\u043e \u0432\u0442\u043e\u0440\u043e\u043c\u0443 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443 \u0438 \u0432\u0438\u0434\u0438\u0442, \u0447\u0442\u043e \u0442\u0430\u043c \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u0411\u0435\u0440\u043b\u0438\u043d. \u041f\u043e\u0447\u0435\u043c\u0443 \u0436\u0435 \u0442\u0430\u043a \u0441\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c? \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0433\u043e\u0440\u043e\u0434\u0430\u0445 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u044d\u0442\u043e \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442, \u043e\u043d \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043a\u0430\u0442\u044c \u0440\u0435\u0439\u0441\u044b \u0438\u0437 \u0411\u0435\u0440\u043b\u0438\u043d\u0430 \u0432 \u0411\u0435\u0440\u043b\u0438\u043d. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c.<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u043e\u043f\u0446\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u043d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u043b\u0430\u0441\u044c \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u043e\u043f\u0446\u0438\u0439 \u0432\u0442\u043e\u0440\u043e\u0433\u043e, \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430:<\/p>\n<pre><code class=\"javascript\">... {   options:cities_data,   on:{     onShow:function(v){       optionsData(\"from\",\"to\");     }   } }<\/code><\/pre>\n<p>\u0421\u043d\u043e\u0432\u0430 \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>on<\/em><\/strong>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435<strong><em> <\/em><\/strong>\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <strong><em>onShow. <\/em><\/strong>\u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong><em>optionsData(), <\/em><\/strong>\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u0442 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u043e\u043f\u0446\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043d\u0430 \u0432\u044b\u0437\u0432\u0430\u043d\u0430. \u041e\u043d\u0430 \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:  <\/p>\n<pre><code class=\"javascript\">function optionsData(first_id, second_id){   const options = $$(first_id).getList(); \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u043f\u0438\u0441\u043a\u0430   const exception = $$(second_id).getValue(); \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435   options.filter(obj =&gt; obj.id != exception); \/\/\u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b Combo, \u043a\u0430\u043a <strong><em>getList()<\/em><\/strong> \u0438 <strong><em>getValue().<\/em><\/strong> \u041f\u0435\u0440\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u043f\u0446\u0438\u0439 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <strong><em>filter() <\/em><\/strong>\u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u043b\u0438\u0441\u0442\u0430<strong><em> <\/em><\/strong>\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0438\u0437 \u043d\u0435\u0433\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0433\u043e\u0440\u043e\u0434 (<em>\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434\u043e\u043c getValue<\/em>).<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043a\u043d\u043e\u043f\u043a\u0430\u043c \u201cReset\u201d \u0438 \u201cSearch\u201d.<\/p>\n<p><strong>\u041a\u043d\u043e\u043f\u043a\u0430 \u201cSearch\u201d<\/strong><\/p>\n<p>\u041d\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u0435\u043b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430, \u043a\u043b\u0438\u043a\u043d\u0443\u043b \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u201cSearch\u201d \u0438 \u0432\u0438\u0434\u0438\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0440\u0435\u0439\u0441\u043e\u0432. \u0422\u0430\u043a\u043e\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u0432\u0435\u0440\u043e\u044f\u0442\u0435\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u0442\u043e\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:<\/p>\n<pre><code class=\"javascript\">function lookForFlights(){ \tconst vals = $$(\"search_form\").getValues(); \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u043f\u043e\u043b\u0435\u0439 \u0444\u043e\u0440\u043c\u044b \tconst table = $$(\"flight_table\"); \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \ttable.filter(function(obj){ \/*\u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438*\/ }); }<\/code><\/pre>\n<p>\u041e\u0434\u043d\u043e \u0438\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u0444\u043e\u0440\u043c\u044b Webix \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u0435\u0439 \u0441\u0440\u0430\u0437\u0443 \u0432 \u043e\u0434\u043d\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <strong><em>getValues()<\/em><\/strong>,<strong><em> <\/em><\/strong>\u0432\u044b\u0437\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u044b. \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <strong><em>filter()<\/em><\/strong>,<strong><em> <\/em><\/strong>\u0432\u044b\u0437\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u0430\u043d\u043d\u044b\u0445. \u041c\u0435\u0442\u043e\u0434 \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b&nbsp; \u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u0442 \u0438\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u0441\u043b\u043e\u0432\u0438\u0439, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 \u0444\u043e\u0440\u043c\u044b, \u0438 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0445\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0445. \u041c\u043e\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0439\u043c\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c JS.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438, \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0443\u0436\u043d\u043e \u0435\u0433\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435. \u0414\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>click<\/em><\/strong>:<\/p>\n<pre><code class=\"javascript\">{ view:\"button\", value:\"Search\", ... click: lookForFlights }<\/code><\/pre>\n<p><strong>\u041a\u043d\u043e\u043f\u043a\u0430 \u201cReset\u201d<\/strong><\/p>\n<p>\u0411\u044b\u0432\u0430\u0435\u0442,\u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043b \u0444\u043e\u0440\u043c\u0443, \u043d\u043e \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0435\u0435 \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0437\u0430\u043d\u043e\u0432\u043e, \u0438\u043b\u0438 \u043e\u043d \u0443\u0436\u0435 \u043d\u0430\u0447\u0430\u043b \u0438\u0441\u043a\u0430\u0442\u044c \u0438 \u0445\u043e\u0447\u0435\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0422\u0430\u043a\u043e\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0432\u043f\u043e\u043b\u043d\u0435 \u0432\u0435\u0440\u043e\u044f\u0442\u0435\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u201cReset\u201d.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:<\/p>\n<pre><code class=\"javascript\">function resetForm(){ \tconst form = $$(\"search_form\");  \tform.clear(); \/\/\u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \tform.setValues({trip_type:1}); \/\/\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \t$$(\"flight_table\").filter(); \/\/\u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e }<\/code><\/pre>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <strong><em>clear()<\/em><\/strong>, \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u0432\u0441\u0435 \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u0441\u0440\u0430\u0437\u0443. \u041d\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435 \u0441 \u0442\u0438\u043f\u043e\u043c \u0431\u0438\u043b\u0435\u0442\u0430 (<em>\u043f\u0440\u044f\u043c\u043e\u0439 \u0438\u043b\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439<\/em>) \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u0442\u043e\u0442 \u043d\u0435\u0434\u043e\u0447\u0435\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <strong><em>setValues().<\/em><\/strong> \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u044f.&nbsp;<\/p>\n<p>\u0412\u044b\u0448\u0435 \u043c\u044b \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0438 \u043c\u0435\u0442\u043e\u0434 <strong><em>filter() <\/em><\/strong>\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043b\u0438 \u0435\u0451 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c\u0438 \u043f\u043e\u0438\u0441\u043a\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0431\u0435\u0437 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0441 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c\u0438, \u0442\u043e \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044e, \u0438 \u0442\u043e\u0433\u0434\u0430 \u0435\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435. \u0412\u0441\u0435 \u043a\u043e\u0440\u043e\u0442\u043a\u043e \u0438 \u044f\u0441\u043d\u043e. \u041d\u0435\u0442 \u043d\u0443\u0436\u0434\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0418\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412\u0441\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c, \u044d\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">{ view:\"button\", value:\"Reset\", ... click:resetForm }<\/code><\/pre>\n<p>\u0421 \u0444\u043e\u0440\u043c\u043e\u0439 \u043f\u043e\u0438\u0441\u043a\u0430 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0440\u0435\u0439\u0441\u043e\u0432 \u0438 \u0441\u0442\u0440\u043e\u043a\u0435 \u043f\u043e\u0438\u0441\u043a\u0430.<\/p>\n<h3>\u0421\u0442\u0440\u043e\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430  <\/h3>\n<p>\u041a\u0430\u043a \u0432\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u043e\u0438\u0441\u043a\u0430, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u044f\u043c\u043e \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0440\u0435\u0439\u0441\u043e\u0432.&nbsp;<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u0438\u0445. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u0442\u043e\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:<\/p>\n<pre><code class=\"javascript\">function searchFlight(){   \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \tconst value = $$(\"search\").getValue().toLowerCase();  \tconst table = $$(\"flight_table\");   \/\/\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f\u043c\u0438 \tconst res = table.find(function(obj){ \/*\u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430*\/ });  \ttable.clearCss(\"marker\", true);  \/\/\u0443\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \tfor(let i = 0; i &lt; res.length; i++){ \t\ttable.addCss(res[i].id, \"marker\", true); \/\/\u0432\u0435\u0448\u0430\u0435\u043c  css \u043a\u043b\u0430\u0441\u0441 marker \t} \ttable.refresh(); \/\/\u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 }<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 <strong><em>getValue()<\/em><\/strong> \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 <strong><em>find()<\/em><\/strong>, \u0432\u044b\u0437\u0432\u0430\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0440\u0435\u0439\u0441\u043e\u0432. \u0420\u044f\u0434\u044b \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u0432\u043f\u0430\u043b\u0438 \u0441 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043f\u043e\u043c\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e css \u043a\u043b\u0430\u0441\u0441\u0430 \u201cmarker\u201d (<em>\u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043d\u0430\u0448\u0435\u043c css \u0444\u0430\u0439\u043b\u0435<\/em>). \u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <strong><em>refresh()<\/em><\/strong>, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 css \u043a\u043b\u0430\u0441\u0441 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u043b \u043d\u0443\u0436\u043d\u044b\u0435 \u0440\u044f\u0434\u044b.&nbsp;<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <strong><em>onTimedKeyPress, <\/em><\/strong>\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0433\u043e \u043d\u0430\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>on<\/em><\/strong>. \u041a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">{   view:\"search\",   id:\"search\",   ...   on:{     onTimedKeyPress:function(){ \/\/\u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438 \u043d\u0430\u0431\u043e\u0440\u0435 \u0442\u0435\u043a\u0441\u0442\u0430       searchFlight(); \/\/\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f     },     onChange:function(){ \/\/\u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443 \u201c\u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c\u201d       if(!this.getValue()){         $$(\"flight_table\").clearCss(\"marker\"); \/\/\u0443\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443       }     }   } }<\/code><\/pre>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <strong><em>onChange. <\/em><\/strong>\u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0438\u043a\u043e\u043d\u043a\u0435 \u201c\u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c\u201d, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>clear<\/em><\/strong>, \u0438 \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0441 \u0440\u044f\u0434\u043e\u0432.  <\/p>\n<h3>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0435\u0439\u0441\u043e\u0432  <\/h3>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u043e\u0438\u0441\u043a\u0430, \u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0440\u0435\u0439\u0441\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435.&nbsp;<\/p>\n<p>\u041a\u0430\u043a \u0432\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u0439\u0441\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u201cBook\u201d, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0444\u043e\u0440\u043c\u0435 \u0437\u0430\u043a\u0430\u0437\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0438 \u043a\u0430\u043a\u0438\u0435 \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441\u043e \u0441\u043c\u0435\u043d\u044b \u043c\u043e\u0434\u0443\u043b\u0435\u0439.&nbsp;<\/p>\n<p>\u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u201cBook\u201d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043f\u0440\u044f\u0447\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u0441 \u0444\u043e\u0440\u043c\u043e\u0439 \u0437\u0430\u043a\u0430\u0437\u0430. \u041d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043b\u0435\u0439\u0430\u0443\u0442\u0430, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong><em>multiview. <\/em><\/strong>\u041d\u0430\u0448\u0438 \u043c\u043e\u0434\u0443\u043b\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>cells,<\/em><\/strong> \u0438 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 <strong><em>id<\/em><\/strong>:<\/p>\n<pre><code class=\"javascript\">cells:[   {\t     id:\"flight_search\", ...   },   {     id:\"flight_booking\", ...   } ]<\/code><\/pre>\n<p>\u0421\u043c\u0435\u043d\u0430 <strong><em>multiview<\/em><\/strong> \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 <strong><em>show() <\/em><\/strong>\u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c<strong><em>.<\/em><\/strong> \u0414\u043e\u0441\u0442\u0443\u043f \u043a \u043c\u043e\u0434\u0443\u043b\u044e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <strong><em>$$(id).<\/em><\/strong> \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c <strong><em>id <\/em><\/strong>\u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f: <\/p>\n<pre><code class=\"javascript\">$$(\"flight_booking\").show(); \/\/\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438<\/code><\/pre>\n<p>\u042d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u0442\u0435\u043b\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c:  <\/p>\n<pre><code class=\"javascript\">function bookFlight(id){ \t\u2026 \t\/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0441\u043a\u043e\u043c\u044b\u0445 \u0431\u0438\u043b\u0435\u0442\u043e\u0432 \tconst required_tickets = $$(\"search_form\").getValues().tickets; \t\/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0445 \u043c\u0435\u0441\u0442 \tconst available_places = flight_table.getItem(id).places; \t\/\/\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0431\u0438\u043b\u0435\u0442\u043e\u0432 \t \t$$(\"tickets_counter\").define(\"max\", available_places);  \t\/\/\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \t$$(\"flight_booking_form\").setValues({ \t\t\/\/\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0431\u0438\u043b\u0435\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u0438\u043b\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u043c \u043c\u0435\u0441\u0442\u0430\u043c \t\ttickets:required_tickets &lt;= available_places ? required_tickets : available_places, \t\t\/\/\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0446\u0435\u043d\u044b \u0431\u0438\u043b\u0435\u0442\u0430 \u0432 \u0441\u043a\u0440\u044b\u0442\u044b\u0439 \u0438\u043d\u043f\u0443\u0442 \t\tprice:flight_table.getItem(id).price, \t\t\/\/\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \"\u042d\u043a\u043e\u043d\u043e\u043c\" \u043a\u043b\u0430\u0441\u0441 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \t\tclass:1 \t}); \t$$(\"flight_booking\").show(); \/\/\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \t... }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u043e, \u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u043c \u0440\u0435\u0439\u0441\u0435, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u0437\u0430\u043a\u0430\u0437\u0430 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u0441 \u0444\u043e\u0440\u043c\u043e\u0439 \u0437\u0430\u043a\u0430\u0437\u0430.&nbsp;<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0430\u043a\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439, \u043a\u0430\u043a <strong><em>getItem()<\/em><\/strong>.<strong><em> <\/em><\/strong>\u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0440\u044f\u0434\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u201cBook\u201d. \u0418\u0437 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u044b \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0446\u0435\u043d\u0443 \u0431\u0438\u043b\u0435\u0442\u0430 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0445 \u043c\u0435\u0441\u0442. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c <strong><em>id<\/em><\/strong> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u044f\u0434\u0430.<\/p>\n<p>\u041a\u0430\u043a \u0432\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u043f\u0440\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438, \u0447\u0442\u043e \u043b\u0435\u0439\u0431\u043b \u0431\u0443\u0434\u0435\u0442 \u0441\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c. \u0421\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 define() \u0438 refresh().&nbsp;<\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 <strong><em>define() <\/em><\/strong>\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 \u043c\u0435\u0442\u043e\u0434 <strong><em>refresh() <\/em><\/strong>\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"javascript\">$$(\"label\").define(\"label\", \"Flight Booking\"); \/\/\u043c\u0435\u043d\u044f\u0435\u043c \u043b\u0435\u0439\u0431\u043b \u043d\u0430 \u0442\u0443\u043b\u0431\u0430\u0440\u0435 $$(\"label\").refresh(); \/\/\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043b\u0435\u0439\u0431\u043b <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u201cBook\u201d. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438, \u043c\u044b \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u043b\u0438 \u0435\u0439 \u043a\u043b\u0430\u0441\u0441 <em>\u201cwebix_button\u201d <\/em>\u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a<em>.<\/em> Webix \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0445\u0435\u043d\u0434\u043b\u0435\u0440 <strong><em>onClick<\/em><\/strong>, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u043a\u043b\u0438\u043a\u043e\u0432 \u043f\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u044f\u0447\u0435\u0435\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0442\u0435\u043c \u0438\u043b\u0438 \u0438\u043d\u044b\u043c <em>css<\/em> \u043a\u043b\u0430\u0441\u0441\u043e\u043c:  <\/p>\n<pre><code class=\"javascript\">{   columns:[ \u2026 ],   onClick:{     \"webix_button\":function(e,id){       bookFlight(id);     }   } }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0444\u043e\u0440\u043c\u0435 \u0437\u0430\u043a\u0430\u0437\u0430. <\/p>\n<h3>\u0424\u043e\u0440\u043c\u0430 \u0437\u0430\u043a\u0430\u0437\u0430  <\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u201cBook\u201d \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043a \u0444\u043e\u0440\u043c\u0435 \u0437\u0430\u043a\u0430\u0437\u0430. \u0412\u044b\u0448\u0435 \u043c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f. \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u0444\u043e\u0440\u043c\u0435 \u0437\u0430\u043a\u0430\u0437\u0430. \u0418 \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0446\u0435\u043d\u0443 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u201cBook\u201d \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0440\u0435\u0439\u0441\u043e\u0432. \u041e\u043d\u0430 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0431\u0438\u043b\u0435\u0442\u0430 \u0438 \u0438\u0445 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e. \u041f\u043e \u043c\u0435\u0440\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043f\u043b\u044e\u0448\u0435\u043a \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0431\u0438\u043b\u0435\u0442\u043e\u0432 \u0446\u0435\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u0431\u0435\u0433\u043d\u0443\u0442\u044c \u043a \u0441\u0442\u0430\u0440\u043e\u043c\u0443 \u0434\u043e\u0431\u0440\u043e\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 <strong><em>on<\/em><\/strong>, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <strong>onChange <\/strong>(<em>\u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c<\/em>) \u0438 <strong>onValues <\/strong>(<em>\u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u201cBook\u201d<\/em>):<\/p>\n<pre><code class=\"javascript\">on:{ \tonChange:function(){ \t\torderPrice(this.getValues()); \t}, \tonValues:function(){ \t\torderPrice(this.getValues()); \t} }<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:  <\/p>\n<pre><code class=\"javascript\">function orderPrice(vals){ \t\/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0431\u0438\u043b\u0435\u0442\u043e\u0432 \tconst tickets = vals.tickets;  \t\/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0446\u0435\u043d\u0443 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0431\u0438\u043b\u0435\u0442\u043e\u0432 \tconst price = vals.price*1*vals.class*tickets;  \t\/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0431\u0430\u0433\u0430\u0436\u0430 \tconst baggage = vals.baggage * tickets; \t\/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0438\u0442\u0430\u043d\u0438\u044f  \tconst food = vals.food * tickets;  \t\/\/\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0438\u0442\u043e\u0433\u043e\u0432\u0443\u044e \u0441\u0443\u043c\u043c\u0443 \tconst total = price+baggage+food;  \t\/\/\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0438\u0442\u043e\u0433\u043e\u0432\u0443\u044e \u0441\u0443\u043c\u043c\u0443 \t$$(\"order_price\").setValue(total+\"$\");  }<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u044d\u0442\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0444\u043e\u0440\u043c\u044b \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 <strong><em>getValues()<\/em><\/strong>, \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442&nbsp; \u0438\u0442\u043e\u0433\u043e\u0432\u0443\u044e \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043b\u0435\u0439\u0431\u043b\u0430 \u201cPrice\u201d \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434&nbsp; <strong><em>setValue()<\/em><\/strong>. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043c\u0435\u0442\u043e\u0434\u0430 <strong><em>setValues()<\/em><\/strong>, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u0435\u0439 \u0444\u043e\u0440\u043c\u044b, <strong><em>setValue()<\/em><\/strong> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u044b\u0437\u0432\u0430\u043d.<\/p>\n<p>\u0421 \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u043e\u043c \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0437\u0430\u043a\u0430\u0437\u0430 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043b\u044e\u0448\u043a\u0438, \u0430 \u0446\u0435\u043d\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f.&nbsp;<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0440\u0435\u0448\u0438\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043a\u0430\u0437, \u0432\u0432\u0435\u043b \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043a\u043b\u0438\u043a\u043d\u0443\u043b \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u201cMake Order\u201d. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:<\/p>\n<pre><code class=\"javascript\">function makeOrder(){ \tconst order_form = $$(\"flight_booking_form\"); \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0444\u043e\u0440\u043c\u0435 \tif(order_form.validate()){ \/\/\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0444\u043e\u0440\u043c\u044b \t\twebix.alert({ \/\/\u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0437\u0430\u043a\u0430\u0437\u0435 \t\t\ttitle: \"Order\", \t\t\ttext: \"We will send you an information to confirm your Order\" \t\t}).then(function(){ \t\t\tgoBack(); \/\/\u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0440\u0435\u0439\u0441\u043e\u0432 \t\t}); \t} }<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0444\u043e\u0440\u043c\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 <strong><em>validate()<\/em><\/strong>. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u0444\u043e\u0440\u043c\u044b, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <strong><em>rules<\/em><\/strong>. \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c, \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0438 \u043c\u0435\u0442\u043e\u0434 \u0432\u0435\u0440\u043d\u0435\u0442 <strong><em>true<\/em><\/strong>.<strong><em> <\/em><\/strong>\u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u0435\u0442\u043e\u0434 \u0432\u0435\u0440\u043d\u0435\u0442<strong><em> false<\/em><\/strong>, \u043f\u043e\u043b\u044f \u0441 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u044f\u0442\u0441\u044f \u043a\u0440\u0430\u0441\u043d\u044b\u043c, \u0430 \u0432\u043d\u0438\u0437\u0443 \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445. \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u044d\u0442\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong><em>invalidMessage<\/em><\/strong>.<\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u043a\u0430\u0437\u0430. \u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e Webix \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/ru.docs.webix.com\/api___alert.html\" rel=\"noopener noreferrer nofollow\"><strong><em><u>webix.alert()<\/u><\/em><\/strong><\/a>, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u201cOK\u201d \u043c\u0435\u0442\u043e\u0434\u0430 (<em>\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0438 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f goBack()<\/em>): <\/p>\n<pre><code class=\"javascript\">webix.alert({   title: \"Order is successfull\",   text: \"We will send you an information to confirm your Order\" }).then(function(){   goBack(); });<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044e <strong><em>goBack() <\/em><\/strong>\u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u201cGo Back\u201d. \u041e\u043d\u0430<strong><em> <\/em><\/strong>\u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <strong><em>clearValidation()<\/em><\/strong>, \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u043b\u0435\u0439\u0431\u043b \u0442\u0443\u043b\u0431\u0430\u0440\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0430\u0441 \u0432 \u043c\u043e\u0434\u0443\u043b\u044c \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439 \u0440\u0435\u0439\u0441\u043e\u0432 \u0438 \u0444\u043e\u0440\u043c\u043e\u0439 \u043f\u043e\u0438\u0441\u043a\u0430:  <\/p>\n<pre><code class=\"javascript\">function goBack(){ \tconst order_form = $$(\"flight_booking_form\"); \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0444\u043e\u0440\u043c\u0435 \tconst label = $$(\"label\"); \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043b\u0435\u0439\u0431\u043b\u0443 \u043d\u0430 \u0442\u0443\u043b\u0431\u0430\u0440\u0435  \torder_form.clearValidation(); \/\/\u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e  \tlabel.define(\"label\", \"Flight Search\"); \/\/\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043b\u0435\u0439\u0431\u043b\u0430 \tlabel.refresh(); \/\/\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043b\u0435\u0439\u0431\u043b  \t$$(\"flight_search\").show(); \/\/\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u043b\u0435\u0439\u0430\u0443\u0442 \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439 \u0440\u0435\u0439\u0441\u043e\u0432 \u0438 \u0444\u043e\u0440\u043c\u043e\u0439 \u043f\u043e\u0438\u0441\u043a\u0430 }<\/code><\/pre>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435  <\/h2>\n<p>\u0421 \u043a\u043e\u0434\u043e\u043c \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f <a href=\"https:\/\/github.com\/serhiipylypchuk1991\/webix-booking-app.git\" rel=\"noopener noreferrer nofollow\"><u>\u0442\u0443\u0442<\/u><\/a>.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Webix. \u041d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043b\u0435\u0439\u0430\u0443\u0442\u044b \u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e json \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430. \u041a\u043e\u0441\u0432\u0435\u043d\u043d\u043e \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u044b \u0438 \u043f\u0440\u043e\u0441\u0442\u044b \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u043b\u0430\u044f \u0442\u043e\u043b\u0438\u043a\u0430 \u0432\u0441\u0435\u0433\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u043d\u0430\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430. \u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a <a href=\"https:\/\/ru.docs.webix.com\/\" rel=\"noopener noreferrer nofollow\"><u>\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0441 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438.<\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/551988\/\"> https:\/\/habr.com\/ru\/post\/551988\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<figure class=\"full-width\"><figcaption>Webix UI<\/figcaption><\/figure>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0446\u0435\u043d\u0438\u0442 \u0441\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0438 \u043d\u0435 \u0436\u0435\u043b\u0430\u0435\u0442 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u0438\u0435 \u043c\u0435\u0441\u044f\u0446\u044b \u043d\u0430 \u0434\u043e\u0442\u043e\u0448\u043d\u043e\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 web \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0417\u043d\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0438\u0445 \u0431\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u043d\u043e \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u043c\u0438\u0440\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u0443\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0432\u0441\u0435\u043c\u0438 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044f\u043c\u0438 \u2014 \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0435 \u0438\u0437 \u043b\u0435\u0433\u043a\u0438\u0445. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0447\u0430\u0445\u043d\u0443\u0442\u044c \u043d\u0430\u0434 \u0442\u0430\u043b\u043c\u0443\u0434\u0430\u043c\u0438 \u0441\u043a\u0443\u0447\u043d\u0435\u0439\u0448\u0438\u0445 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u0443\u0436\u0435 \u0437\u0430\u0432\u0442\u0440\u0430, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041e\u0434\u043d\u043e \u0438\u0437 \u043b\u0443\u0447\u0448\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 <a href=\"https:\/\/ru.webix.com\/\" rel=\"noopener noreferrer nofollow\">Webix<\/a>. \u0418\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u044b \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.&nbsp;<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0431\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u0432\u0438\u0430\u0431\u0438\u043b\u0435\u0442\u043e\u0432. \u041d\u0435 \u0437\u0430 \u0433\u043e\u0440\u0430\u043c\u0438 \u0441\u0435\u0437\u043e\u043d \u043b\u0435\u0442\u043d\u0438\u0445 \u043e\u0442\u043f\u0443\u0441\u043a\u043e\u0432, \u0442\u0430\u043a \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u043a\u0430\u043a \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u0435\u043d.&nbsp;<\/p>\n<p>\u0421 \u043a\u043e\u0434\u043e\u043c \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f <a href=\"https:\/\/github.com\/serhiipylypchuk1991\/webix-booking-app.git\" rel=\"noopener noreferrer nofollow\"><u>\u0442\u0443\u0442<\/u><\/a>.<\/p>\n<h2>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e Webix \u0438 \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445  <\/h2>\n<p><a href=\"https:\/\/ru.docs.webix.com\/\" rel=\"noopener noreferrer nofollow\">Webix UI<\/a> \u2014 \u044d\u0442\u043e JavaScript \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u0441\u043e\u043a\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438, \u0434\u043e \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043a\u0430\u043a <a href=\"https:\/\/ru.webix.com\/widgets\/report-manager\/\" rel=\"noopener noreferrer nofollow\">Report Manager<\/a>, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0447\u0435\u0442\u044b \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u043e\u043c\u0438\u043c\u043e \u0441\u0430\u043c\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u0442\u0435\u043c\u044b \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435. \u041e\u0431\u043e \u0432\u0441\u0435\u043c \u044d\u0442\u043e\u043c \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0432 <a href=\"https:\/\/ru.docs.webix.com\/\" rel=\"noopener noreferrer nofollow\"><u>\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/a>. \u0410 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.  <\/p>\n<h3>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a UI \u043c\u0430\u0433\u0438\u0438  <\/h3>\n<p>\u041c\u0430\u0433\u0438\u044f \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u0437\u0430\u043a\u043b\u0438\u043d\u0430\u043d\u0438\u044f \u0438 \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u0441\u0435\u043a\u0440\u0435\u0442\u043e\u043c \u0435\u0435 \u0441\u0438\u043b\u044b. \u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u043f\u043e\u0434\u043d\u044f\u0442\u044c \u0437\u0430\u0432\u0435\u0441\u0443 \u0442\u0430\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0443\u0437\u043a\u043e\u0433\u043e \u043a\u0440\u0443\u0433\u0430 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0445.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043d\u0443\u0436\u043d\u043e \u0441\u043f\u0435\u0440\u0432\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b (<em>\u043e\u043d\u0438 \u0436\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 webix-\u043c\u0430\u0433\u0438\u0438<\/em>). \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 <a href=\"http:\/\/webix.com\/ru\/zagruzka\/\" rel=\"noopener noreferrer nofollow\"><u>\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/u><\/a>, \u0432\u0432\u043e\u0434\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0432\u0435\u0442\u043d\u043e\u0433\u043e zip-\u0444\u0430\u0439\u043b\u0430. \u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0438 \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e. \u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0444\u0430\u0439\u043b\u044b <em>\u201clicense.txt\u201d<\/em>, <em>\u201creadme.txt\u201d<\/em> \u0438 <em>\u201cwhatsnew.txt\u201d<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0445, \u043a\u0442\u043e \u043b\u044e\u0431\u0438\u0442 \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u0430. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u0432 \u043f\u0430\u043f\u043a\u0435 \u201csamples\u201d \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435&nbsp; \u0432\u0435\u0449\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0442\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Webix UI.<\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0430\u043f\u043a\u0438 \u201ccodebase\u201d, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e, \u0434\u0432\u0430 \u0441\u0430\u043a\u0440\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430: <em>\u201cwebix.js\u201d<\/em> \u0438 <em>\u201cwebix.css\u201d<\/em>. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b Webix-\u043c\u0430\u0433\u0438\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0445 \u0432 <em>index.html <\/em>\u0444\u0430\u0439\u043b \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;       \t&lt;title&gt;Webix Booking&lt;\/title&gt;       \t&lt;meta charset=\"utf-8\"&gt;       \t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"codebase\/webix.css\"&gt;       \t&lt;script type=\"text\/javascript\" src=\"codebase\/webix.js\"&gt;&lt;\/script&gt;     &lt;\/head&gt;     &lt;body&gt; \t\t\t&lt;script type=\"text\/javascript\"&gt; \t\t\t... \t\t\t&lt;\/script&gt;     &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0434\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0435\u0433\u0438 <strong><em>&lt;script&gt;<\/em><\/strong><em>&#8230;<\/em><strong><em>&lt;\/script&gt;, <\/em><\/strong>\u0433\u0434\u0435 \u0438 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<strong>.<\/strong><\/p>\n<p>\u0412\u043f\u0440\u043e\u0447\u0435\u043c, \u0430\u0440\u0445\u0438\u0432 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u0430\u043a\u0436\u0435 \u0447\u0435\u0440\u0435\u0437 CDN. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"xml\">&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/cdn.webix.com\/edge\/webix.css\"&gt; &lt;script type=\"text\/javascript\" src=\"http:\/\/cdn.webix.com\/edge\/webix.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<h3>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f  <\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Webix.<\/p>\n<p>\u0412\u0441\u044f Webix-\u043c\u0430\u0433\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 <strong><em>webix.ui()<\/em><\/strong>. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u043e\u0434 \u043d\u0430\u0447\u043d\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u0435\u0440\u043d\u0435\u043c \u0435\u0433\u043e \u0432 <strong><em>webix.ready(function(){})<\/em><\/strong>. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">webix.ready(function(){ \twebix.ui({ \t    \/*\u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f*\/ \t}); });<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f<em> index.html <\/em>\u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430\u0448\u0435\u0433\u043e Booking \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.  <\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Booking  <\/h2>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:  <\/p>\n<ul>\n<li>\n<p>\u0422\u0443\u043b\u0431\u0430\u0440<\/p>\n<\/li>\n<li>\n<p>\u0424\u043e\u0440\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0435\u0439\u0441\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0424\u043e\u0440\u043c\u0430 \u0437\u0430\u043a\u0430\u0437\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u0436\u0434\u0443\u044e \u0438\u0437 \u0447\u0430\u0441\u0442\u0435\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445, \u0430&nbsp; \u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0438\u0445 \u0432 \u0444\u0430\u0439\u043b\u0435 <em>index.html. <\/em>\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0410 \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043b\u0435\u0439\u0430\u0443\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<h3>\u041b\u0435\u0439\u0430\u0443\u0442  <\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c, \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0440\u043a\u0430\u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u0443\u0434\u0430 \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u043d\u0430\u043d\u0438\u044f \u043b\u0435\u0439\u0430\u0443\u0442\u0430 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u0442\u0430\u043a\u0438\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u043a\u0430\u043a <strong><em>rows <\/em><\/strong>\u0438<strong><em> cols<\/em><\/strong>,<strong><em> <\/em><\/strong>\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b, \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438. \u041a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u0430\u0441\u0441\u0438\u0432, \u0432\u043d\u0443\u0442\u0440\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u043d\u0430\u0448 \u043b\u0435\u0439\u0430\u0443\u0442 \u043d\u0430 2 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0440\u044f\u0434\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <strong><em>rows<\/em><\/strong>:<\/p>\n<pre><code class=\"javascript\">webix.ui({     rows: [         { template:\"Row One\" },         { template:\"Row Two\" }     ] }); <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043b\u0435\u0439\u0430\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f <strong>template:&#187;Row One&#187;<\/strong> \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 HTML-\u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<p>\u0412 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0440\u044f\u0434 \u044d\u0442\u043e\u0433\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0430 \u043c\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0422\u0443\u043b\u0431\u0430\u0440. \u0412 \u043d\u0438\u0436\u043d\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f 2 \u0441\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<ul>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u0437\u0430\u043a\u0430\u0437\u0430 \u0440\u0435\u0439\u0441\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 2 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u0412 \u043b\u0435\u0432\u043e\u043c \u043c\u044b \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u0444\u043e\u0440\u043c\u0443 \u043f\u043e\u0438\u0441\u043a\u0430, \u0430 \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0434\u0430\u043d\u043d\u044b\u0445. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <strong><em>cols<\/em><\/strong>:<\/p>\n<pre><code class=\"javascript\">webix.ui({   rows: [           { template:\"Toolbar\", height:50},           {               cols:[                 { template:\"Search Form\" },                 { template:\"Data Table\" }               ]           }   ] }); <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043b\u0435\u0439\u0430\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:  <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u0434\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c 2 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u0438. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u0432\u0441\u0435\u043c \u043f\u043e CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>width<\/em><\/strong> \u0438 <strong><em>height<\/em><\/strong>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043c\u043e\u0434\u0443\u043b\u044e \u0437\u0430\u043a\u0430\u0437\u0430 \u0440\u0435\u0439\u0441\u043e\u0432 \u0438 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u0435\u0433\u043e \u043d\u0430 2 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u0412 \u043b\u0435\u0432\u043e\u043c \u043c\u044b \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u0444\u043e\u0440\u043c\u0443 \u0437\u0430\u043a\u0430\u0437\u0430, \u0430 \u043f\u0440\u0430\u0432\u044b\u0439 \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0443\u0441\u0442\u044b\u043c. \u0410 \u043f\u043e\u0447\u0435\u043c\u0443 \u0436\u0435 \u043f\u0443\u0441\u0442\u044b\u043c, \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435 \u0432\u044b? \u041e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0444\u043e\u0440\u043c\u0430&nbsp; \u0440\u0430\u0441\u0442\u044f\u043d\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d, \u0430 \u044d\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u044d\u0441\u0442\u0435\u0442\u0438\u0447\u043d\u043e. \u041f\u0443\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043e\u043d \u0436\u0435 <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.spacer.html\" rel=\"noopener noreferrer nofollow\"><strong><u>spacer<\/u><\/strong><\/a>, \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043d\u0430\u0448\u0435\u0439 \u0444\u043e\u0440\u043c\u044b, \u0430 \u043b\u0438\u0448\u043d\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u044d\u0442\u0438\u043c \u201c<em>\u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c<\/em>\u201d, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u044c\u0441\u044f.&nbsp;&nbsp;<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <strong><em>cols<\/em><\/strong>. \u0421\u0442\u043e\u0438\u0442 \u043d\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 <em>cols<\/em> \u0438 <em>rows <\/em>\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b \u0442\u043e\u043d\u043a\u043e\u0439 \u0441\u0435\u0440\u043e\u0439 \u043b\u0438\u043d\u0438\u0435\u0439. \u0422\u0430\u043a\u043e\u0439 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c \u043c\u0435\u0436\u0434\u0443 \u0444\u043e\u0440\u043c\u043e\u0439 \u0438 \u0441\u043f\u0435\u0439\u0441\u0435\u0440\u043e\u043c \u043d\u0430\u043c \u043d\u0438 \u043a \u0447\u0435\u043c\u0443. Webix \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <a href=\"https:\/\/ru.docs.webix.com\/api__ui.layout_type_config.html\" rel=\"noopener noreferrer nofollow\"><strong><u>type<\/u><\/strong><\/a>:<\/p>\n<pre><code class=\"javascript\">webix.ui({   rows: [     { template:\"Toolbar\", height:50 },     {       type:\"clean\", \/\/\u0443\u0431\u0438\u0440\u0430\u0435\u043c \u043b\u0438\u043d\u0438\u044e-\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c       cols:[         { template:\"Order Form\" },         {}       ]     }   ] });<\/code><\/pre>\n<p><strong>&nbsp;<\/strong>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:  <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043b\u0435\u0439\u0430\u0443\u0442\u044b \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0437\u0430\u043a\u0430\u0437\u0430 \u0440\u0435\u0439\u0441\u043e\u0432. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u0441\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c\u0438. \u041a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, Webix \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0438 \u0442\u0430\u043a\u0443\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.multiview.html\" rel=\"noopener noreferrer nofollow\"><u>multiview<\/u><\/a> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>cells<\/em><\/strong> \u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 <strong><em>id<\/em><\/strong>. \u0421\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0434\u0430\u043d \u043f\u0435\u0440\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u043d\u043e \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u0438, \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435.&nbsp;<\/p>\n<p>\u0410 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0448 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">webix.ui({   rows:[     { template:\"Toolbar\", height:50 },     {       cells:[         {\t           id:\"flight_search\",           cols:[             {template:\"Search Form\"},             {template:\"Data Table\"},           ]         },         {           id:\"flight_booking\",           type:\"clean\",           cols:[             {template:\"Order Form\"},             {},           ]         }       ]     }   ] });<\/code><\/pre>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043b\u0435\u0439\u0430\u0443\u0442\u0430\u043c\u0438. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h3>\u0422\u0443\u043b\u0431\u0430\u0440   <\/h3>\n<p>\u0422\u0443\u043b\u0431\u0430\u0440 \u2014 \u0432\u0430\u0436\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0442\u0430\u043c \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u043d\u0438\u0448\u0442\u044f\u043a\u0438. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0443\u043b\u0431\u0430\u0440 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0439 \u043b\u0435\u0439\u0431\u043b.<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <em>toolbar.js<\/em> \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">const toolbar = { view:\"toolbar\" };<\/code><\/pre>\n<p>\u041d\u0443\u0436\u043d\u043e \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u043d\u0430\u0447\u0438\u043c\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u043b\u0435\u0439\u0430\u0443\u0442\u0435.<\/p>\n<p>\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0442\u0438\u043f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>view<\/em><\/strong>. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.toolbar.html\" rel=\"noopener noreferrer nofollow\"><strong><u>toolbar<\/u><\/strong><\/a>.&nbsp;\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043b\u0435\u0439\u0431\u043b \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">{   view:\"toolbar\"   css:\"webix_dark\", \/\/\u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f   cols:[     {       id:\"label\", \/\/\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c id \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f       view:\"label\",       label:\"Flight Search\", \/\/\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435     }   ] }<\/code><\/pre>\n<p>\u0412\u044b\u0448\u0435 \u043c\u044b \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0438, \u0447\u0442\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <em>rows<\/em> \u0438 <em>cols<\/em>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/ru.docs.webix.com\/api__refs__ui.label.html\" rel=\"noopener noreferrer nofollow\"><strong><u>label<\/u><\/strong><\/a> \u043c\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <em>cols<\/em> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <strong>toolbar<\/strong>.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong><em>id<\/em><\/strong> \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u043c\u0435\u043d\u044b \u043b\u0435\u0439\u0431\u043b\u0430, \u043d\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0435\u0449\u0435 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f.&nbsp;<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a\u0438\u043c\u0438 \u043d\u0435\u0445\u0438\u0442\u0440\u044b\u043c\u0438 \u043c\u0430\u043d\u0435\u0432\u0440\u0430\u043c\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0442\u0443\u043b\u0431\u0430\u0440 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043b\u0435\u0439\u0430\u0443\u0442\u0435, \u043d\u0443\u0436\u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0444\u0430\u0439\u043b <em>toolbar.js <\/em>\u0432<em> index.html <\/em>\u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <em>rows<\/em> \u0432\u043c\u0435\u0441\u0442\u043e <em>{template:\u201cToolbar\u201d}&nbsp;<\/em>:<\/p>\n<pre><code class=\"javascript\">webix.ui({ \trows: [     toolbar,     {       cells:[         ...       ]     } \t] });<\/code><\/pre>\n<p>\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043b\u0435\u0439\u0430\u0443\u0442 \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0442\u0443\u043b\u0431\u0430\u0440\u0430:  <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0443\u0436\u0435 \u043d\u0435\u043f\u043b\u043e\u0445\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432. \u041e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 2 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p>\u0424\u043e\u0440\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0435\u0439\u0441\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e.<\/p>\n<h3>\u0424\u043e\u0440\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0439\u0441\u043e\u0432   <\/h3>\n<p>\u0424\u043e\u0440\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0440\u0435\u0439\u0441\u0430\u0445. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f, \u043f\u043e \u043a\u0430\u043a\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u0438 \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435.<\/p>\n<p>\u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <em>&lt;form&gt;<\/em>, \u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c<\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-321302","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/321302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=321302"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/321302\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=321302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=321302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=321302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}