자바스크립트/Ext JS2013. 5. 22. 16:27
Ext.onReady(function() {
	/***
	 * Date : 2013.05.22
	 * Desc : Override Ext JS functionality
	 * 		  당신이 ExtJS 프레임웍의 동작을 변경하고자 한다면(권장하지 않음)
	 * 		  직접 프레임웍을 편집하지 않고 override를 이용해여 당신이 만든 클래스를 
	 * 		  통해 쉽게 제어 또는 변경할 수 있다.
	 * 
	 * 		  프레임 워크 코드를 변경하는 것은 강력하게 다른 개발자로 권장하지되는 것은 
	 * 		  변경을 실현하지 않을 수 있으며 불쾌 표준이 아닌 행동에 의해 놀라게 될!
	 * 
	 * 		  override는 기존의 클래스를 가지고도 기존 기능의 동작을 수정하거나 완전히
	 * 		  새로운 것들을 추가 할 수 있습니다. 이것은 크게 프레임워크의 완전히 밖으로 
	 * 		  상자의 동작을 변경하는
	 * 		  매우 간단한 방법을 제공하기 때문이다.
	 * 
	 * 		  Ext JS override는 Ext.Base.override를 칭한다.
	 * 		  Ext.override(Object originalCls, Object overrides) 오리지날 클래스와 합치길 원하는
	 * 		  클래스를 지정하므로서 두개의 클래스가 병합된다.
	 */
	Ext.define('Simple.Class', {
		welcome : function() {
			alert('Welcome to the app');
		}
	});

//	Simple.Class.override({
//		goodBye : function() {
//			alert('Goodbye');
//		},
//
//		runAll : function() {
//			this.welcome();
//			this.goodBye();
//		}
//	});

	Ext.override(Simple.Class, {
		goodBye : function() {
			alert('Goodbye');
		},

		runAll : function() {
			this.welcome();
			this.goodBye();
		}
	});

	var app = new Simple.Class();
	app.runAll(); // Welcome to the app
	// Goodbye

});

// 출처 : Ext JS4 Web Application Development Cookbook
Posted by 베니94
자바스크립트/Ext JS2013. 5. 22. 16:25
Ext.onReady(function() {
	Ext.define('Cookbook.DisplayPanel', {

		extend : 'Ext.panel.Panel',

		initComponent : function() {

			// apply our configuration to the class
			Ext.apply(this, {
				title : 'Display Panel',
				html : 'Display some information here!',
				width : 200,
				height : 200,
				renderTo : Ext.getBody()
			});

			// call the extended class' initComponent method
			this.callParent(arguments);
		}

	}, function() {
		console.log('Cookbook.DisplayPanel defined!');
	});

	var displayPanel = Ext.create('Cookbook.DisplayPanel');
	displayPanel.show();

	// define our Cookbook.InfoTextField class
	Ext.define('Cookbook.InfoTextField', {

		extend : 'Ext.form.field.Text',
		/***
		 * override했고 this.callparent를 호출하여.
		 * 바로 부모클래스의 onRender메소드가 실행되도록 하였다.
		 */
		onRender : function() {
			this.callParent(arguments);

			// insert our Info Text element
			Ext.core.DomHelper.append(this.getEl(), '
' + this.infoText + '
'); } }, function() { console.log('Cookbook.InfoTextField defined!'); }); // create an instance of our Cookbook.InfoTextField var infoTextField = Ext.create('Cookbook.InfoTextField', { renderTo : Ext.getBody(), fieldLabel : 'Username', infoText : 'Your Username must be at least 6 characters long.' }); // infoTextField.show(); }); // 출처 : Ext JS4 Web Application Development Cookbook
Posted by 베니94
자바스크립트/Ext JS2013. 5. 22. 16:23
Ext.onReady(function() {
	/***
	 * 인스턴스를 검색하는 함수는 총 4가지다.
	 * query, child, up and down.
	 */
	var panel = Ext.create('Ext.panel.Panel', {
		height : 500,
		width : 500,
		renderTo : Ext.getBody(),
		margin : 50,
		id : 'myPanel',
		layout : {
			type : 'vbox',
			align : 'stretch'
		},
		items : [ {
			xtype : 'tabpanel',
			itemId : 'mainTabPanel',
			flex : 1,
			items : [ {
				xtype : 'panel',
				title : 'Users',
				id : 'usersPanel',
				layout : {
					type : 'vbox',
					align : 'stretch'
				},
				tbar : [ {
					xtype : 'button',
					text : 'Edit',
					itemId : 'editButton'
				} ],
				items : [ {
					xtype : 'form',
					border : 0,
					items : [ {
						xtype : 'textfield',
						fieldLabel : 'Name',
						allowBlank : false
					}, {
						xtype : 'textfield',
						fieldLabel : 'Email',
						allowBlank : false
					} ],
					buttons : [ {
						xtype : 'button',
						text : 'Save',
						action : 'saveUser',
						listeners : {
							click : function(){
								// 메소드의 실행이 가능하다.
								// 아래에 경우 리턴되는 객체가 없을 것이다.
								// 해당 텍스트필드에 값이 들어가 있다면 isValid조건에 맞는 객체를 리턴하게 될것이다.
								// 텍스트 필드에 값을 입력 후 Save버튼을 클릭해본다.
								var validField = Ext.ComponentQuery
										.query('form > textfield{isValid()}');
								console.log(validField);
							}
						}
					} ]
				}, {
					xtype : 'grid',
					flex : 1,
					border : 0,
					columns : [ {
						header : 'Name',
						dataIndex : 'Name',
						flex : 1
					}, {
						header : 'Email',
						dataIndex : 'Email'
					} ],
					store : Ext.create('Ext.data.Store', {
						fields : [ 'Name', 'Email' ],
						data : [ {
							Name : 'Joe Bloggs',
							Email : 'joe@example.com'
						}, {
							Name : 'Jane Doe',
							Email : 'jane@example.com'
						} ]
					})
				} ]
			} ]
		}, {
			xtype : 'component',
			itemId : 'footerComponent',
			html : 'Footer Information',
			extraOptions : {
				option1 : 'test',
				option2 : 'test'
			},
			height : 40
		} ]
	});

	// Ext.ComponentQuery's 'query' method
	/***
	 * ComponentQuery는 down, up과는 달리 해당되는 조건의
	 * component를 모두 찾아리턴한다.
	 */
	// Get all Panels
	var panels = Ext.ComponentQuery.query('panel');
//	console.log(panels);
	
	var formPanel = Ext.ComponentQuery.query('form');
	console.log(formPanel);
	// get all Buttons that are descendents of a Panel
	var buttons = Ext.ComponentQuery.query('button');
//	console.log(buttons);

	// get specific Button based on 'action' property
	var saveButton = Ext.ComponentQuery
			.query('button[action="saveUser"]')[0];
//	console.log(saveButton);

	// get 2 types of Component (buttons and textfields)
	var buttonsAndTextfields = Ext.ComponentQuery
			.query('button, textfield');
//	console.log(buttonsAndTextfields);
//
//	// get specific Panel based on ID
	// ID기반 검색.
	var usersPanel = Ext.ComponentQuery.query('panel#usersPanel')[0]; // or
	// Ext.ComponentQuery.query('#usersPanel');
//	console.log(usersPanel);

	// get components that have 'extraOptions' property with any value
	/***
	 * component중에 extraOption속성을 가지고 있는 콤포넌트를 찾아라.
	 * 속성의 존재여부에 따른 검색.
	 */
	var extraOptionsComponents = Ext.ComponentQuery
			.query('component[extraOptions]');
	// 달리 사용하면 component[height] -> 검색가능
	// component[height=40] -> 검색 가능.
//	console.log(extraOptionsComponents);

	

	// myPanel이라는 아이디를 가진 인스턴스를 찾아 하위에 있는 모든 패널을 찾는다. child 밑에 child까지.
	var validField = Ext.ComponentQuery
			.query('#myPanel panel');
//	console.log(validField);
	// myPanel이라는 아이디를 가진 인스턴스를 찾아 하위에 바로 붙어있는 child를 찾는다.
	var validField = Ext.ComponentQuery
			.query('#myPanel > panel');
//	console.log(validField);

	// Ext.ComponentQuery's 'is' method

	// decide if main Panel is a panel
	// 아래 부터는 인스턴스의 유형을 비교한다.
	var isPanel = Ext.ComponentQuery.is(panel, 'panel');
//	console.log(isPanel); // true

	// decide if main Panel is a panel with an ID of 'myPanel'
	// 비교 대상인 인스턴스가 panel이고 id가 myPanel인가?
	var isPanelWithCorrectID = Ext.ComponentQuery.is(panel,
			'panel[id="myPanel"]');
//	console.log(isPanelWithCorrectID); 

	// Container's 'query' method

	// get all buttons under Users Panel
	var usersPanelButtons = usersPanel.query('button');
//	console.log(usersPanelButtons);

	// Container's 'down' method

	// get first Panel under the main Panel (panel)
	var firstChildPanel = panel.down('panel');
//	console.log('001', firstChildPanel);

	// Container's 'child' method
//
//	// get first child button under the main Panel
//	var childButton = panel.child('button');
//	console.log(childButton); // is no Button in first level so
//								// returns null
//
//	// Container's 'up' method
//
//	// get first Panel above 'Add Order' button
	var saveUserButon = Ext.ComponentQuery
			.query('button[action="saveUser"]')[0];
	var saveUserButonParentPanel = saveUserButon.up('panel');

//	console.log(saveUserButonParentPanel);

	// Pseudo-selectors

	// get last textfield
	var lastTextfield = Ext.ComponentQuery.query('textfield:last');
	console.log(lastTextfield);

	// define your own that returns visible components
	Ext.ComponentQuery.pseudos.visible = function(items) {
		console.log('ii', items)
		var result = [];

		for ( var i = 0; i < items.length; i++) {

			if (items[i].isVisible()) {
				result.push(items[i]);
			}
		}

		return result;
	};
	var visibleComponents = Ext.ComponentQuery
			.query('component:visible');
//	console.log(visibleComponents);

});
// 출처 : Ext JS4 Web Application Development Cookbook
Posted by 베니94