Extjs6（六）——增删查改之查询

本文主要实现的效果是：点击查询按钮，根据form中的条件，在Grid中显示对应的数据（如果form为空，显示全部数据）

一、静态页面

1、查询按钮

        {        text:'查询',    handler: 'onSearch'    },

2、写查询条件的form

　　　　 {fieldLabel: '条件一',name: 'code',minWidth: 180},{fieldLabel: '条件二',name: 'name',minWidth: 180}

3、显示数据的Grid

//store要create一下，要不然取不到

store:Ext.create('app.store.system.organization.OrganizationListStore',{
　　　　　　　　storeId:'organizationListStore'
　　}),

//**********************************

columns: [

        { text: '组织编码',  dataIndex: 'organizationCode', flex: 1,minWidth:135 },{ text: '组织名称', dataIndex: 'organizationName', flex: 2,minWidth:180 }],
});

二、写查询按钮的点击事件onSearch及store

1、onSearch，写在controller里面

　　onSearch: function () {var form = this.getView().lookupReference('organizationList-main').lookupReference('organizationListForm');//取得查询条件form，getView得到引用了controller的页面，lookupReference方法下面说var data = {};form.getForm().getFields().each(function() {  //遍历formvar name = this.getName();var value = this.getValue();           if(value instanceof Array && value != null){ //若value不为空 且是Array类型value = value.join(",");  //给value中的值用逗号隔开}data[this.getName()] = value;  //把value放到data里});var organizationGrid = this.getView().lookupReference('organizationList-main').lookupReference('organizationListGrid');  //取得gridOrganizationListStore = organizationGrid.store; //取得storeOrganizationListStore.on('beforeload', function (OrganizationListStore) {OrganizationListStore.getProxy().extraParams = data; //把data中的搜索条件传入store中});OrganizationListStore.load({ //分页的时候写，加载后起始页码params: {start: 0,page:1}});},

2、store

ajax请求，post方法，数据存放在body中

proxy: {type: 'ajax',url: xxxxx/find, actionMethods: {read: 'POST'},reader: {type: 'json',rootProperty: 'body'},paramsAsJson: true},autoLoad: false

三、重置form

　　1、重置按钮

    　　{text:'重置',iconCls:'x-fa fa-refresh',handler: 'reset'    }

　　2、重置函数reset

　　　　通过lookupReference找到form，然后对form进行重置。

Ext.define('Learning.view.personalInfo.personalController', {extend: 'Ext.app.ViewController',alias: 'controller.personalInfo',reset: function () {var form = this.getView().lookupReference('personalForm');form.getForm().reset();},
});

四、其它（关于各种get）

1、Ext.getCmp("id名");

　　通过id获取，要给对象加一个id属性。

　　注：id是唯一的，也就是在整个项目中都不能有重复的id名，否则就会出错，所以用reference显然更好。

2、getView()

　　得到整个页面。

　　如this.getView()，就是得到当前controller所在的页面。

3、lookupReference('reference值') （这个好像没有get呀，哈哈）

　　在需要用到reference的父页面加入 referenceHolder: true,

　　然后给对象加上reference属性。

4、getSelection() ， getLastSelected()

　　得到被选中的对象，得到最后被选中的对象。

　　例如：得到选择框选中的那个对象 xxxx.selModel.getSelection();

5、get('一个form的name')

　　得到这个name的form中的值。

6、getForm() ， getName() ， getValue() ， getProxy()

　　都是字面意思。

----------------------------------------------------------------------------------------

补充：

例如：下图是项目中的某一个页面

orderMonitor：是这个页面的主框，由form，grid，toolbar三部分组成

popups：页面的弹框

Controller：逻辑功能

Store：页面加载的数据

END-----------------------------------------------------------------------------------

“金牛，金牛，你对减肥有什么看法呀？”

“我自己挣钱辛苦吃胖的，你凭什么让我减呀！”

转载于:https://www.cnblogs.com/MaiJiangDou/p/6565922.html