-
MY PROJECTS
-
Recent Posts
- Java.Jackson.Serialize object to json
- Algo. Traverse linked list
- Algo. Java. Remove-duplicates-from-sorted-array
- Java.Hibernate.SimpleExample
- Java.Jdbc.SimpleExample
- SQL. Calc the sum with case, example
- Mullvad – free the internet :)
- Junit. Jupiter
- Java. SpringBoot Example how to work with dateTime in Specification
- Java.SpringBoot.PopularAnnotations
- SpringBoot. Exception Management
- Java.Hibernate.JoinTableAnnotation
- SpringBoot.Making our first starter and autoconfiguration
- Spring. Creating main annotation to start business logic
- Spring.Reading from properties file
- Spring.How to define spring version inside springBoot ?
- SpringBoot App inside Docker
- Kafka.FirstExperience
- Docker.MySql and Lost connection to MySQL server at ‘reading initial communication packet’, system error: 0
- Gradle.Tips
Categories
- Aptana
- Azure
- C#
- DataSnap
- DBExpress
- Delphi
- Delphi и сети
- Delphi. Язык программирования
- ExtJS
- FastReport
- FireDAC
- FireMonkey
- GIT
- ICS
- IDE
- IIS
- Indy
- InnoSetup
- javascript
- jQuery
- JSON
- LiveBindings
- MSHTML
- MySQL
- PHP
- REST
- Ribbons
- SMS
- SQL инструкции
- SVN
- TRichView
- UniGui
- WebBroker
- WinAPI
- Windows
- Алгоритмы
- Без рубрики
- Деревья
- Ищу ответ
- Компонентостроение
- Мои компоненты
- Начальный уровень
- Обработка исключений
- Парсинг
- Потоки(Threads)
- Регулярные выражения
- Тестирование приложений
Category Archives: ExtJS
Delphi. UniGUI. Как сделать красивую панельку с тенью через CSS?
Во многих своих проектах я делаю такие панельки (фрэймы). Сначала создадим CSS ServerModule – > CustomCSS
1 2 3 4 5 6 7 8 |
.box-shadow { padding: 3px !important; box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff; } .border-radius{ border-radius: 5px } |
У фрэйма делаем следующее
1 2 3 4 5 6 |
function afterrender(sender, eOpts) { sender.addCls('border-radius'); sender.addCls('box-shadow'); //sender.body.setStyle("background-color", "#FBFBFB"); } |
ExtJS. Some working Examples
button with absolute position and handler
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
Ext.application({ name : 'Fiddle', launch : function() { Ext.create('Ext.button.Button', { text : 'Ok', renderTo : Ext.getBody(), style : 'position:absolute; left:100px; top:100px;', handler : function() { function getWindowSize() { var d = document, root = d.documentElement, body = d.body; var wid = window.innerWidth || root.clientWidth || body.clientWidth, hi = window.innerHeight || root.clientHeight || body.clientHeight; return [wid, hi] } alert(Ext.getBody().getViewSize().width+','+Ext.getBody().getViewSize().height); // alert(getWindowSize()); /* * // this button will spit out a different number every * time you // click it. // so firstly we must check if * that number is already set: if (this.clickCount) { // * looks like the property is already set, so lets just * add // 1 to // that number and alert the user * this.clickCount++; * * alert('You have clicked the button "' + * this.clickCount + '" times.\n\nTry clicking it * again..'); } else { // if the clickCount property is * not set, we will set it and // alert // the user * this.clickCount = 1; alert('You just clicked the * button for the first time!\n\nTry pressing it * again..'); } * */ }, plugins : 'responsive', responsiveConfig : { // var browserWidth=Ext.getBody().getViewSize().width; // browserWidth<600{style : 'position:absolute; left:50px; top:100px;'} /* * 'browserWidth < 600' : { style : 'position:absolute; * left:50px; top:100px;' }, 'width >= 600' : { style : * 'position:absolute; left:100px; top:100px;' } */ } }); } }); |
Responsive design example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
Ext.application({ name : 'Fiddle', launch : function() { Ext.create('Ext.container.Viewport',{ layout:'border', items:[ { title: 'navigation', xtype: 'panel', region: 'west', header: false, width: 150, layout:{ type: 'vbox', align: 'stretch' }, plugins: 'responsive', responsiveConfig:{ wide:{ layout:{ type: 'box', vertical: true, pack:'start' }, bodyStyle:{'background-color': 'orange'} }, tall:{ layout:{ type: 'box', vertical: false, pack: 'center' }, bodyStyle:{'background-color': 'purple'} } }, items:[ { xtype: 'button', text: 'Section 1' }, { xtype: 'button', text: 'Section 2' } ] }, { title: 'header', xtype: 'container', region: 'north', height: 100, header: false, html: '<h1>Branding, global search, sign in/out</h1>', style:{ 'background-color': 'red' } }, { title: 'contentArea', xtype: 'container', region: 'center', header: false, html: '<h1>Content goes here</h1>', style:{ 'background-color': 'green', color: 'white' } } ] }); } }); |
2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
Ext.application({ name : 'HelloExt', launch : function() { var panel = Ext.create('Ext.panel.Panel', { title : 'Моя панель', width : 600, height : 300, renderTo : document.body, layout : 'border', defaults : { padding : '3' }, plugins : 'responsive', responsiveConfig : { 'width < 400' : { region : 'north' }, 'width >= 400' : { region : 'south' } }, items : [{ xtype : 'panel', region : 'west', title : 'Вложенная первая', html : 'контент контент контент ' }, { xtype : 'panel', region : 'center', title : 'Вложенная вторая', html : 'контент контент контент ' }] }); } }); |
Posted in ExtJS
Comments Off on ExtJS. Some working Examples
JS.ExtJS. Class creation and instance creation example
1 2 3 4 5 6 7 8 9 10 11 12 |
Ext.define('Student', { name : 'unnamed', getName : function(){ return "Student name is" + this.name; } }, function(){ Ext.Msg.alert('Fiddle', 'Student object created!'); }); var studentObj = Ext.create('Student'); studentObj.getName(); |
extJS fiddler
Posted in ExtJS
Comments Off on JS.ExtJS. Class creation and instance creation example
Aptana Studio3. Подключение внешних библиотек
К хорошему быстро привыкаешь, все таки подсказки с кодом вещь очень удобная. Я часто работаю с Delphi RAD Studio и очень привык нажимать “точечку” и просматривать список свойств и методов, а ещё кликать на незнакомое слово и жать F1, для … Continue reading
jQuery. Выборка
В данном посте посмотрим что можно сделать с выборкой элементов jQuery. В принципе там ничего сложного, это обычный массив, но есть пара нюансов. Пусть у нас есть html страница
1 2 3 4 5 |
... <div id='mydiv1' class="myClass"> mydiv1 </div> <div id='mydiv2' class="myClass"> mydiv2 </div> <div id='mydiv3' class="myClass"> mydiv3 </div> ... |
Сделаем простую выборку
jQuery.Селекторы
Вообще говоря, полное описание по селекторам, можно найти в API, в разделе селекторы. В данном посте посмотрим на некоторые простые примеры, построенные на функциях из API
Posted in ExtJS, Без рубрики
Comments Off on jQuery.Селекторы
ExtJS. Ajax Requests
Загрузим по ajax json объект
Posted in ExtJS
Comments Off on ExtJS. Ajax Requests
ExtJS. Создание модели и загрузка данных в форму
Посмотрим как создать модель в ExtJS и загрузить данные в форму
Posted in ExtJS
Comments Off on ExtJS. Создание модели и загрузка данных в форму
ExtJS. Отправка данных формы на сервер
Для того, чтобы отправить данные формы на сервер напишем следующий код
Posted in ExtJS
Comments Off on ExtJS. Отправка данных формы на сервер
ExtJS. Валидация полей формы
В данном примере посмотрим как задавать проверку, валидацию полей. Создадим форму и на ней 2 поля, в первое можно будет вводить только цифры, во второе только url.
Posted in ExtJS
Comments Off on ExtJS. Валидация полей формы