Ext常用开发基础知识

Ext常用开发基础知识

组件定义

	//这种方法可以缓存所需要的组件 调用起来比较方便(方法一 )
	Ext.define('MySecurity.view.home.HomePanel', {
		//添加需要使用的组件
		requires:[
			'MySecurity.store.home.AuthorityStore'
		],
		//继承的组件
	    extend: 'Ext.panel.Panel',
	    layout:'fit',
	    //自定义一个xtype 供创建 或者起识别作用
	    xtype: 'homePanel',
	    //初始化方法
	    initComponent : function() {
			var me = this;

			//这里可以给me 赋值 例如组件 ,这样就可以使用  “homePanl.组件”  这样调用
	    	me.items = [{
	    		html:'hello'
	    	}];

	    	//这行代码记得添加上 否则创建失败
			this.callParent(arguments);
	    }
	});

	//常用容器创建 Ext.container.Container (方法二)
	this.container = Ext.create('Ext.container.Container',{
        layout:{
             type: 'vbox',
             align : 'stretch'
        },
        items:[{
        	html:'hello'
        }]
    });

   //增加组件(Item)
   this.container.add({html:'add'})

Controller ViewModel 的使用

• 可以在UI上直接引用View Model的值
• 可以引用View Model 经过加工的function
• 可以使用ViewModel的值控制UI的表现

定义viewmodel

	Ext.define('MySecurity.view.main.ViewportModel', {
	    extend: 'Ext.app.ViewModel',
	    alias: 'viewmodel.mainviewport',

	    data: {
	        // 当前在那个 UI
	        currentView: null,
	        userAccess: null,
	        // 版本信息
	        appVersion: '0.0'
	    },
	    formulas: {
	    	hideBottomContainer: function(get){
	    		if(this.get('userAccess'))
					return !(this.get('userAccess').username == 'admin');
				else
					return true;
	        }
	    }

	});

定义Controller

	Ext.define('MySecurity.view.ViewportController', {
	    extend: 'Ext.app.ViewController',
	    alias: 'controller.viewportcontroller',

	    init : function() {
			this.control({

			});
			this.setData();
		},
	    onLogoutBtnClick: function(){
	        var me = this;
	        Ext.MessageBox.confirm('Logout', 'Are you sure you would like to logout?', function(btn){
	            if (btn == 'yes') {
	                me.logout();
	            };
	        });
	    },
	 	setData:function(){
			var view = this.getView(),
				vm = this.getViewModel();
			vm.set('test', 'test');

			console.log(vm.get('test'));
	    },
	    logout: function(){
	        var me = this,
	            vm = me.getViewModel();
	        Ext.Ajax.request({
	            url: '../../j_spring_security_logout',
	            method: 'POST',
	            success: function(response){
	                window.location.href = '../../';

	            },
	            failure: function() {
	//                        Ext.MessageBox.alert(ALM.lblError, ALM.lblLogoutFailed+ALM.lblCheckNetworkHint);
	         		 window.location.href = '../../';
	        	}
	        });
	    }
	});

定义视图

	Ext.define('MySecurity.view.Viewport', {
	    extend: 'Ext.container.Viewport',
	    requires:[
	        'MySecurity.view.main.MainHeader',
	        'MySecurity.view.main.MainTabPanel'
	    ],
	    layout:{
	    	type:'vbox',
	    	align :'stretch'
	    },
	    controller: 'viewportcontroller',
	    viewModel: {
	        type: 'mainviewport'
	    },
	    items: [{
	        xtype:'mainHeader',
	    	height:50
	    },{
	    	xtype:'mainTabPanel',
	    	flex:1
	    },{
	        xtype: 'tbtext',
	        cls: 'top-user-name',
	        bind: {
	            text: '{userAccess.username}',
	        	hidden:'{hideBottomContainer}'
	        }
	    }]

	});

Ajax的使用

	//POST
	Ext.Ajax.request({
	    url:'../controller/doSomething',
	    method:'POST',
	    headers: {
	        myHeaderType : 'Test'
	    },
	    jsonData: {
	    	data:{
	    		name:'Saber',
	    		skill:'Excalibur'
    		}
	    },
	    failure: function(response, opts) {
	    	console.log('failed')
	    },
	    success: function(response){
	   		var text = response.responseText;
	        var result = Ext.JSON.decode(response.responseText);
	        if(result.success){
				//do some thing
	        }else{
	            //do some thing
	        }
	    }
	});   

	//GET
	Ext.Ajax.request({
	    url:'../controller/doSomething',
	    method:'GET',
	    params: {
	    	name:'saber',
	    	skill:'Excalibur'
	    },
	    failure: function(response, opts) {
	    	console.log('failed')
	    },
	    success: function(response){
	   		var text = response.responseText;
	        var result = Ext.JSON.decode(response.responseText);
	        if(result.success){
	        	//do some thing
	        }else{
	        	//do some thing
	        }
		}
	});

自定义事件：

抛出事件

	组件.fireEvent('事件名','事件源组件','param1','param2'......);

监听/处理 事件

	组件.on('事件名','处理事件方法名', scope);

	处理事件方法名:function(事件源组件,params1,params2){

    }

事件处理

	//1.使用 listeners
	listeners: {
        click: function() {
        	//do something
        },
    	scope:me
    }

    //2.使用handler
	handler:me.functionName,
	scope:me

组件查询获取

up/down/query

用以获取以调用方法的组件为标准去寻找其他组件

	Ext.dom.Element
		up( selector, [limit], [returnDom] ) : HTMLElement/Ext.dom.Element		

		down( selector, [returnDom] ) : HTMLElement/Ext.dom.Element
			selector:Ext.dom.Query
				默认寻找xtype :
						a.down('button')  寻找a元素下 xtype为button的第一个组件

		query(selector) 返回所有符合的组件

	//eg:
	var btn = this.buttonContainer.down('[name="saveHero"]');

	var myComponents = selfView.query('[action="test"]')

getComponent

用以获取自身的子组件

	{
		xtype: 'textarea',
        itemId: 'comment-textarea'
	}

    var commentTextArea = this.getComponent('comment-textarea');

getCmp

用以获取指定id的组件

	{
		xtype: 'textarea',
        id: 'my-textarea'
	}

    var commentTextArea = this.getComponent('my-textarea');
    commentTextArea.setValue('asasa');

Ext.fly

返回一个指定的元素，其中包含component,dom,el

	var a = Ext.fly(dom) 或 Ext.fly('domId')

	a.component.setValue(3423);

Model

Ext.data.field.Field

• auto (Default, implies no conversion)
• string
• int
• number
• boolean
• date

设置主键

	idProperty:'',

Store

读取数据

	this.store.loadData(data);

	this.store.load();

	this.store.add(data);

添加参数

	//1.
	this.store.on('beforeload', this.onStoreBeforeload, this);

	onStoreBeforeload: function(store){
        store.proxy.extraParams = {
        	name:'Saber',
			skill:'Excalibur'
        };
        return true;
    },

    //2.
    this.store.load({
        params: {
            name: 'Saber',
            skill: 'Excalibur'
        }
    });

获取数据

	//获取所有数据
    store.getRange()

    store.getData()

    //根据主键获取record
    store.getById( id )