Category Archives: ExtJS

ExtJS. Компоненты. Введение

Posted on 30.12.2015 by Stanislav_Panteleev

Введение Базовым классом для любых компонент в ExtJS является Ext.Component. Этот класс позволяет экземплярам участвовать в автоматизированном жизненном цикле Создание (instantiation) Отрисовка (rendering) Установка размеров (sizing ) Позиционирование (positioning) Разрушение (destruction) ExtJS обладает широким набором уже созданных компонентов, а также … Continue reading →

Posted in ExtJS | Comments Off

ExtJS. Обработка событий

Posted on 28.12.2015 by Stanislav_Panteleev

Чем хорош ExtJS в обработке событий – по словам разработчиков – фрэймворк нормализует межбраузерные различия. При обучении мне понравилась вот эта презентация. Какие события обрабатываются наиболее часто? События мыши click — нажатие левой кнопки мыши contextmenu — нажатие правой кнопки мыши mouseover … Continue reading →

Posted in ExtJS | Comments Off

ExtJS. Создание, добавление, удаление элементов DOM

Posted on 26.12.2015 by Stanislav_Panteleev

Html разметка В данном посте в качестве примера у нас будет следующая html разметка…

...
<div id="parent" class="parentclass" name='It is value of the name attribute'>		

<div id="child1" class='firstclass'>someContent1</div>
<div id="child2" class='firstclass'>someContent2</div>
<div id="child3" class='secondclass'>someContent3</div>
<div id="child4" class='secondclass'>someContent4</div>

</div>

<div id='my-div'>
</div>
...

...

<div id="child1" class='firstclass'>someContent1</div>

<div id="child2" class='firstclass'>someContent2</div>

<div id="child3" class='secondclass'>someContent3</div>

<div id="child4" class='secondclass'>someContent4</div>

</div>

</div>

...

Некоторые методы вставки элементов класса Ext.dom.Element Ниже относительно простые способы вставки нового элемента в структуру DOM

//Определяем элемент
var newElement = {
    id:'newid',
    tag: 'h1',
    html: 'Новый заголовок'
};
// Некоторые методы создания и вставки нового элемента
Ext.getBody().insertFirst(newElement);//один вариант
Ext.getBody().insertSibling(newElement);//второй вариант
Ext.getBody().insertSibling('<h2>Ещё один способ<h2>');//третий  вариант

//Определяем элемент

var newElement = {

id:'newid',

tag: 'h1',

html: 'Новый заголовок'

};

// Некоторые методы создания и вставки нового элемента

Ext.getBody().insertFirst(newElement);//один вариант

Ext.getBody().insertSibling(newElement);//второй вариант

Ext.getBody().insertSibling('<h2>Ещё один способ<h2>');//третий вариант

Ext.dom.Helper – основной помощник при создании новых элементов … Continue reading →

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

ExtJS. Изменение элементов DOM (манипуляция)

Posted on 25.12.2015 by Stanislav_Panteleev

В данном посте посмотрим как можно манипулировать данными – получать innerHTML, изменять его, работать со стилями и так далее. Также узнаем как менять местами HTML элементы. Для примера возьмем вот такую HTML разметку.

...
<div id="somediv">another div</div>
 
<div id="parent" class="parentclass" name='It is value of the name attribute'>		
<div id="child1" class='firstclass'>someContent1</div>
<div id="child2" class='firstclass'>someContent2</div>
<div id="child3" class='secondclass'>someContent3</div>
<div id="child4" class='secondclass'>someContent4</div>
</div>
...

...

<div id="somediv">another div</div>

<div id="child1" class='firstclass'>someContent1</div>

<div id="child2" class='firstclass'>someContent2</div>

<div id="child3" class='secondclass'>someContent3</div>

<div id="child4" class='secondclass'>someContent4</div>

</div>

...

Как получить / изменить innerHTML?

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

ExtJS. Обращение к элементам DOM

Posted on 25.12.2015 by Stanislav_Panteleev

После того как мы освоили захват элементов DOM в одном из прошлых постов, посмотрим как можно перемещаться по группе захваченных элементов DOM. Для примера возьмем такую разметку…

...
<div id="somediv">another div</div>
 
<div id="parent">		
<div id="child1" class='firstclass'>someContent1</div>
<div id="child2" class='firstclass'>someContent2</div>
<div id="child3" class='secondclass'>someContent3</div>
<div id="child4" class='secondclass'>someContent4</div>
</div>
...

...

<div id="somediv">another div</div>

<div id="child1" class='firstclass'>someContent1</div>

<div id="child2" class='firstclass'>someContent2</div>

<div id="child3" class='secondclass'>someContent3</div>

<div id="child4" class='secondclass'>someContent4</div>

</div>

...

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

Как учиться пользоваться библиотекой ExtJS?

Posted on 24.12.2015 by Stanislav_Panteleev

Универсальный способ работы со свойствами, методами, событиями ExtJS (На примере класса Ext.dom.Elements) При моем знакомстве с ExtJS меня долгое время мучил вопрос – “Где взять все свойства и методы того или иного класса?”, а также “Как узнать какой метод или … Continue reading →

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

ExtJS. Dom. “Захват” элементов

Posted on 23.12.2015 by Stanislav_Panteleev

В данном посте посмотрим как можно захватить элементы Dom по одному и группами, по CSS атрибутам. В качестве примера для последующих задач возьмем такую HTML разметку

...
<div id="parent">		
<div id="child1">someContent1</div>
<div id="child2">someContent2</div>
<div id="child3">someContent3</div>
<div id="child4">someContent4</div>
</div>
...

...

<div id="child1">someContent1</div>

<div id="child2">someContent2</div>

<div id="child3">someContent3</div>

<div id="child4">someContent4</div>

</div>

...

Как захватить DOM элемент или несколько DOM элементов? Одним из базовых классов в “захвате” … Continue reading →

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

ExtJS. Псевдонимы классов

Posted on 23.12.2015 by Stanislav_Panteleev

Классам можно задавать псевдонимы с помощью ключевого слова alias Простой пример App.js

Ext.define('SomeClass', {
    alias:'person',
    someproperty:"testproperty",
    somemethod: function(text){ alert(text);},
    somemethod2:function(text){alert(text);}
});



var myinstance=Ext.create('person');// Создаем экземпляр класса
alert('someproperty '+myinstance.someproperty);
myinstance.somemethod('testword'); //Вызываем метод
myinstance.somemethod2('testword2');// Вызываем метод

Ext.define('SomeClass', {

alias:'person',

someproperty:"testproperty",

somemethod: function(text){ alert(text);},

somemethod2:function(text){alert(text);}

});

var myinstance=Ext.create('person');// Создаем экземпляр класса

alert('someproperty '+myinstance.someproperty);

myinstance.somemethod('testword'); //Вызываем метод

myinstance.somemethod2('testword2');// Вызываем метод

Пример посложнее

//Определяем класс
Ext.define('Person.Panel', {
        alias: 'widget.myalias',
        extend: 'Ext.panel.Panel',
        title: 'Пример использования псевдонимов классов',
        html : '<h3>Hello world! Hello from ExtJS<h3>'
});	

//Создаем приложение
Ext.application({
    name: 'AliasExample',
    launch: function() {
        //Создаем контейнер
        Ext.create('Ext.container.Viewport', {
            //настраиваем отображение
            layout: 'fit',
            
            //Добавляем в контейнер элементы
            items: [
                {
                    xtype: 'alias',
                    
                }]
        });
    }
});

//Определяем класс

Ext.define('Person.Panel', {

alias: 'widget.myalias',

extend: 'Ext.panel.Panel',

title: 'Пример использования псевдонимов классов',

html : '<h3>Hello world! Hello from ExtJS<h3>'

});

//Создаем приложение

Ext.application({

launch: function() {

//Создаем контейнер

Ext.create('Ext.container.Viewport', {

//настраиваем отображение

//Добавляем в контейнер элементы

items: [

{

xtype: 'alias',

}]

});

}

});

Слово widget в данном случае зарезервированное. Если его изменить, убрать, то работать не будет.

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

ExtJS. Динамическая загрузка классов

Posted on 22.12.2015 by Stanislav_Panteleev

Как загружать классы из той же директории, что и запускаемый js, html файл? Здесь приведен сначала самый простой вариант, когда мы выносим описание наших классов в отдельный файл с расширением .js и размещаем его в той же директории, в которой у … Continue reading →

Posted in ExtJS, javascript | Comments Off

ExtJS. Секция statics

Posted on 22.12.2015 by Stanislav_Panteleev

При создании класса, можно в items объявить секцию statics и в неё записывать свойства и методы, которые можно будет вызывать без создания экземпляра класса.

Ext.define('MyApp.Calc', {
 statics: {
 count: 0,
 AppName:"MyCalc",
 
 multiply: function(n1, n2) {
 return n1*n2;
 },
 }
});

//Вызываем без создания экземпляра класса
alert(MyApp.Calc.AppName);
alert(MyApp.Calc.multiply(5,5));

Ext.define('MyApp.Calc', {

statics: {

AppName:"MyCalc",

multiply: function(n1, n2) {

return n1*n2;

}

});

//Вызываем без создания экземпляра класса

alert(MyApp.Calc.AppName);

alert(MyApp.Calc.multiply(5,5));

Примечание. Когда в свойстве statics я использовал в качестве имени свойства имя name, то при обращении к свойству, … Continue reading →

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

Category Archives: ExtJS

ExtJS. Компоненты. Введение

ExtJS. Обработка событий

ExtJS. Создание, добавление, удаление элементов DOM

ExtJS. Изменение элементов DOM (манипуляция)

ExtJS. Обращение к элементам DOM

Как учиться пользоваться библиотекой ExtJS?

ExtJS. Dom. “Захват” элементов

ExtJS. Псевдонимы классов

ExtJS. Динамическая загрузка классов

ExtJS. Секция statics

MY PROJECTS

Recent Posts

Categories