Category Archives: ExtJS

Delphi. UniGUI. Как сделать красивую панельку с тенью через CSS?

Posted on 03.04.2018 by Stanislav_Panteleev

Во многих своих проектах я делаю такие панельки (фрэймы). Сначала создадим CSS ServerModule – > CustomCSS

.box-shadow {
  padding: 3px       !important;                                            
   box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;    
}

.border-radius{
   border-radius: 5px
}

.box-shadow {

padding: 3px !important;

box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;

}

.border-radius{

border-radius: 5px

}

У фрэйма делаем следующее

function afterrender(sender, eOpts)
{
  sender.addCls('border-radius');
  sender.addCls('box-shadow');
//sender.body.setStyle("background-color", "#FBFBFB");
}

function afterrender(sender, eOpts)

{

sender.addCls('border-radius');

sender.addCls('box-shadow');

//sender.body.setStyle("background-color", "#FBFBFB");

}

Posted in Delphi, ExtJS | Comments Off

ExtJS. Some working Examples

Posted on 13.03.2018 by Stanislav_Panteleev

button with absolute position and handler

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;' }
						 */
					}
				});
	}
});

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

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'
                    }
                        
                }
            ]
        });
    }
});

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'

}

]

});

}

});

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 : 'контент контент контент '
									}]
						});

			}
		});

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

JS.ExtJS. Class creation and instance creation example

Posted on 05.03.2018 by Stanislav_Panteleev

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();

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

Aptana Studio3. Подключение внешних библиотек

Posted on 09.01.2016 by Stanislav_Panteleev

К хорошему быстро привыкаешь, все таки подсказки с кодом вещь очень удобная. Я часто работаю с Delphi RAD Studio и очень привык нажимать “точечку” и просматривать список свойств и методов, а ещё кликать на незнакомое слово и жать F1, для … Continue reading →

Posted in Aptana, ExtJS, IDE, jQuery | Comments Off

jQuery. Выборка

Posted on 07.01.2016 by Stanislav_Panteleev

В данном посте посмотрим что можно сделать с выборкой элементов jQuery. В принципе там ничего сложного, это обычный массив, но есть пара нюансов. Пусть у нас есть html страница

...
<div id='mydiv1' class="myClass"> mydiv1 </div>	
<div id='mydiv2' class="myClass"> mydiv2 </div>
<div id='mydiv3' class="myClass"> mydiv3 </div>
...

...

<div id='mydiv1' class="myClass"> mydiv1 </div>

<div id='mydiv2' class="myClass"> mydiv2 </div>

<div id='mydiv3' class="myClass"> mydiv3 </div>

...

Сделаем простую выборку

Posted in ExtJS, jQuery | Comments Off

jQuery.Селекторы

Posted on 07.01.2016 by Stanislav_Panteleev

Вообще говоря, полное описание по селекторам, можно найти в API, в разделе селекторы. В данном посте посмотрим на некоторые простые примеры, построенные на функциях из API

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

ExtJS. Ajax Requests

Posted on 06.01.2016 by Stanislav_Panteleev

Загрузим по ajax json объект

Posted in ExtJS | Comments Off

ExtJS. Создание модели и загрузка данных в форму

Posted on 05.01.2016 by Stanislav_Panteleev

Посмотрим как создать модель в ExtJS и загрузить данные в форму

Posted in ExtJS | Comments Off

ExtJS. Отправка данных формы на сервер

Posted on 05.01.2016 by Stanislav_Panteleev

Для того, чтобы отправить данные формы на сервер напишем следующий код

Posted in ExtJS | Comments Off

ExtJS. Валидация полей формы

Posted on 05.01.2016 by Stanislav_Panteleev

В данном примере посмотрим как задавать проверку, валидацию полей. Создадим форму и на ней 2 поля, в первое можно будет вводить только цифры, во второе только url.

Posted in ExtJS | Comments Off

Category Archives: ExtJS

Delphi. UniGUI. Как сделать красивую панельку с тенью через CSS?

ExtJS. Some working Examples

JS.ExtJS. Class creation and instance creation example

Aptana Studio3. Подключение внешних библиотек

jQuery. Выборка

jQuery.Селекторы

ExtJS. Ajax Requests

ExtJS. Создание модели и загрузка данных в форму

ExtJS. Отправка данных формы на сервер

ExtJS. Валидация полей формы

MY PROJECTS

Recent Posts

Categories