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() {  //遍歷form var 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');  //取得grid
        OrganizationListStore = organizationGrid.store; //取得store

        OrganizationListStore.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-----------------------------------------------------------------------------------

“金牛，金牛，你對減肥有什么看法呀？”

“我自己掙錢辛苦吃胖的，你憑什么讓我減呀！”