Category Archives: ExtJS

ExtJS. Формы. Программное заполнение полей

Posted on 05.01.2016 by Stanislav_Panteleev

Посмотрим как можно заполнить данные формы двумя способами. Сначала заполним одно поле, потом сотрем все значения, потом заполним сразу все поля.

Posted in ExtJS, Без рубрики | Comments Off

ExtJS. Формы. Создание и доступ к полям.

Posted on 04.01.2016 by Stanislav_Panteleev

В этом посте мы узнаем как создавать формы. Класс форм представлен классом Ext.form.Panel Ниже иерархия классов из документации. Ext.Base Ext.Component Ext.container.Container Ext.panel.Panel Ext.form.Panel // << Это класс форм Посмотрим как создать форму на примере формы авторизации.

Posted in ExtJS, Без рубрики | Comments Off

ExtJS. Деревья

Posted on 03.01.2016 by Stanislav_Panteleev

Класс деревьев в ExtJS это Ext.tree.Panel Далее рассмотрим небольшой пример,иллюстрирующий создание деревьев в ExtJS.

Posted in ExtJS, Без рубрики | Comments Off

ExtJS. Комобокс

Posted on 03.01.2016 by Stanislav_Panteleev

Класс комбобокса это Ext.form.field.ComboBox. Собственно, сам комбобокс требует каких-либо данных. Можно их прописывать непосредственно в коде программы, локально. А можно загружать с сервера. В данном посте мы посмотрим самый простой способ – локальное хранение данных.

// Сначала формируем хранилище данных
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"Primary_key":"1", "name":"Delphi"},
        {"Primary_key":"2", "name":"Javascript"},
        {"Primary_key":"3", "name":"PHP"}
    ]
});

myfunction=function(){alert('hello');};

// Теперь собтвенно combobox
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose language',
    store: states,
    queryMode: 'local',//При загрузке с сервера - жмем remote
    displayField: 'name',
    valueField: 'Primary_key',
    renderTo: Ext.getBody(),
    
    listeners:{ // Обработка событий традиционно, через listeners
         scope: this,
         select: function(){alert('hello from comboBox');} 
    }
});

// Сначала формируем хранилище данных

var states = Ext.create('Ext.data.Store', {

fields: ['abbr', 'name'],

data : [

{"Primary_key":"1", "name":"Delphi"},

{"Primary_key":"2", "name":"Javascript"},

{"Primary_key":"3", "name":"PHP"}

]

});

myfunction=function(){alert('hello');};

// Теперь собтвенно combobox

Ext.create('Ext.form.ComboBox', {

fieldLabel: 'Choose language',

store: states,

queryMode: 'local',//При загрузке с сервера - жмем remote

displayField: 'name',

valueField: 'Primary_key',

renderTo: Ext.getBody(),

listeners:{ // Обработка событий традиционно, через listeners

scope: this,

select: function(){alert('hello from comboBox');}

}

});

Теперь сделаем простую обработку событий при … Continue reading →

Posted in ExtJS | Comments Off

ExtJS. Радиокнопки и флажки

Posted on 03.01.2016 by Stanislav_Panteleev

Радиогруппа. В ExtJS за неё отвечает класс Ext.form.RadioGroup Довольно показательный пример есть в документации

Ext.create('Ext.form.Panel', {
    title: 'RadioGroup Example',
    width: 400,
    height: 125,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'radiogroup',
        fieldLabel: 'Two Columns',
        // Arrange radio buttons into two columns, distributed vertically
        columns: 3, // coloumns и vertical отвечают за колоночность
        vertical: true,
        items: [
            { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
            { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
            { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
            { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
            { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
            { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
        ]
    }]
});

Ext.create('Ext.form.Panel', {

title: 'RadioGroup Example',

width: 400,

height: 125,

bodyPadding: 10,

renderTo: Ext.getBody(),

items:[{

xtype: 'radiogroup',

fieldLabel: 'Two Columns',

// Arrange radio buttons into two columns, distributed vertically

columns: 3, // coloumns и vertical отвечают за колоночность

vertical: true,

items: [

{ boxLabel: 'Item 1', name: 'rb', inputValue: '1' },

{ boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},

{ boxLabel: 'Item 3', name: 'rb', inputValue: '3' },

{ boxLabel: 'Item 4', name: 'rb', inputValue: '4' },

{ boxLabel: 'Item 5', name: 'rb', inputValue: '5' },

{ boxLabel: 'Item 6', name: 'rb', inputValue: '6' }

]

}]

});

Флажки. Класс в ExtJS это Ext.form.CheckboxGroup

Posted in ExtJS | Comments Off

UniGui. Уникальный гибрид Delphi и JS

Posted on 02.01.2016 by Stanislav_Panteleev

Сегодня случайно наткнулся на интересную возможность в UniGui – обрабатывать события компонентов при помощи JavaScript, а конкретно при помощи функций из библиотеки ExtJS. Разберем простой пример. Откроем проект UniGui в Delphi и добавим на форму 2 элемента UniButton1 и UniEdit1

Posted in Delphi, ExtJS, UniGui | Comments Off

ExtJS. Кнопки

Posted on 02.01.2016 by Stanislav_Panteleev

За кнопки отвечает класс Ext.button.Button

Ext.create('Ext.Button', {
    text: 'This is just a button.Click it',
    renderTo: Ext.getBody(),
    handler: function() {
        alert('You clicked the button!');
    }
});

Ext.create('Ext.Button', {

text: 'This is just a button.Click it',

renderTo: Ext.getBody(),

handler: function() {

alert('You clicked the button!');

}

});

Событие нажатия на кнопку можно обрабатывать либо через handler как в примере выше, либо традиционно, через listeners

Posted in ExtJS | Comments Off

ExtJS. Панель с табами

Posted on 02.01.2016 by Stanislav_Panteleev

За панель с табами отвечает класс Ext.tab.Panel. Примеры взяты из документации, с моими небольшими комментариями и корректировками. Сделаем простую панель с двумя табами.

Ext.tip.QuickTipManager.init(); // Для подсказок
Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    renderTo: document.body,
    draggable:true, //Перетаскиваемость
    
    //Далее, собственно сами табы
    items: [{
        title: 'First Tab',
        html:'some html',
        bodyPadding: 10 //Настройка паддинга в одном из html табов
    }, {
        title: 'Second Tab',
        html:'some html2',
        
        tabConfig: { // <<< Секция с подсказками
            title: 'That is second tab', //<<< Этот title будет использоваться вместо html:'some html2'
            tooltip: 'custom tooltip'
        }
    }]
});

Ext.tip.QuickTipManager.init(); // Для подсказок

Ext.create('Ext.tab.Panel', {

width: 400,

height: 400,

renderTo: document.body,

draggable:true, //Перетаскиваемость

//Далее, собственно сами табы

items: [{

title: 'First Tab',

html:'some html',

bodyPadding: 10 //Настройка паддинга в одном из html табов

}, {

title: 'Second Tab',

html:'some html2',

tabConfig: { // <<< Секция с подсказками

title: 'That is second tab', //<<< Этот title будет использоваться вместо html:'some html2'

tooltip: 'custom tooltip'

}

}]

});

Программное добавление / удаление табов

Posted in ExtJS | Comments Off

ExtJS. Создание панели

Posted on 01.01.2016 by Stanislav_Panteleev

Панели это один из основных “строительных кирпичиков” ExtJS. Класс панелей ExtJS.panel.Panel Создадим панель с одним элементом внутри – кнопкой.

var myPanel=Ext.create('Ext.panel.Panel', {
        title: 'myApp',
        width: 400,
        height: 300,
        margin: '0 0 0 0',
        html:'hello',
        id : 'myPanel_id',
        draggable: true,
         collapsible:true, //сворачиваемость
        closable: true,// закрываемость
        //Далее, добавим кнопку
        items:[
       {
       	x:20,
    	y:20,
        xtype: 'button',
        text: 'Click here',
        //style:'margin-left:100px; margin-top:70px;',
        listeners:{
        click:function(){alert('You have just clicked');}
        }
       }
        ],
        renderTo: Ext.getBody()
    });

var myPanel=Ext.create('Ext.panel.Panel', {

title: 'myApp',

width: 400,

height: 300,

margin: '0 0 0 0',

html:'hello',

id : 'myPanel_id',

draggable: true,

collapsible:true, //сворачиваемость

closable: true,// закрываемость

//Далее, добавим кнопку

items:[

{

x:20,

y:20,

xtype: 'button',

text: 'Click here',

//style:'margin-left:100px; margin-top:70px;',

listeners:{

click:function(){alert('You have just clicked');}

}

renderTo: Ext.getBody()

});

Расположение элементов внутри панели

Posted in ExtJS, Без рубрики | Comments Off

UniGui. Как поставить веб фокус и определить id компонента?

Posted on 01.01.2016 by Stanislav_Panteleev

В принципе, в UniGui для большинства компонентов работает метод .webfocus Но, есть некоторые компоненты, для которых этот метод не работает, и тогда приходится “допиливать” все самим. В этом небольшом посте я покажу как легко и просто можно узнать id элемента. … Continue reading →

Posted in ExtJS, UniGui, Без рубрики | Comments Off

Category Archives: ExtJS

ExtJS. Формы. Программное заполнение полей

ExtJS. Формы. Создание и доступ к полям.

ExtJS. Деревья

ExtJS. Комобокс

ExtJS. Радиокнопки и флажки

UniGui. Уникальный гибрид Delphi и JS

ExtJS. Кнопки

ExtJS. Панель с табами

ExtJS. Создание панели

UniGui. Как поставить веб фокус и определить id компонента?

MY PROJECTS

Recent Posts

Categories