extjs4 自定义类

Ext.define('FX.Table.Filter.Condition', {
               
    extend: 'Ext.data.Model',

    fields: [
        {type: 'string', name: 'name'},
        {type: 'string', name: 'value'}
    ]
   
});
                  
Ext.define('FX.Table.Filter',{
    extend: 'Ext.panel.Panel',
   
    conditionNumber: 2,
    height: 200,
    border: false,
   
    filterConditionStore: '',
    filterColumnTitleStore: '',
    filterOperatorStore: '',
    filterAllConditionLabel: 'Match All Conditions',
    filterAnyConditionLabel: 'Match Any Condition',
   
    layout: {
        type: 'vbox',
  //      padding: '4',
  //      marginTop: '10px'
    },
    defaults: {
        margins: '3,0,0,0'
    },
   
    /**
     * Initialize component method
     */
    initComponent: function() {
   
        Ext.tip.QuickTipManager.init();
       
        this.getDefaultStore();
       
        this.items = [{
                 xtype: 'panel',
                 width: 694,
                 height: 35,
                 layout: {
                     type: 'hbox',
                     padding: '4',
                     pack: 'end'
                 },
                 defaults: {
                     margins: '2,5,2,2'
                 },
                 items: [{
                     xtype: 'textfield',
                     id: 'filtercondition',
                     name: 'filtercondition',
                     fieldLabel: ''
                 }, {
                     xtype: 'button',
                     id: 'filter',
                     text: 'Filter',
                     width: 45,
                     listeners: {
                         'click': Ext.bind(this.filter,this)
                     }
                 }, {
                     xtype: 'button',
                     id: 'remove',
                     text: 'Remove Filter',
                disabled: true,
                listeners: {
                         'click': Ext.bind(this.removeFilter, this)
                     }
                 }, {
                     xtype: 'button',
                id: 'detail',
                text: 'Detailed Conditions>>',
                listeners: {
                         'click': Ext.bind(this.togglePanel, this)
                     }
                 }]
             }, {
                 xtype: 'panel',
                 id : 'displayPanel',
                 name: 'displayPanel',
                 hidden: true,
                 width:  694,
                 height: 85,
                 layout: 'border',
                
                  
                items:[{
                    region: 'north',
                    xtype: 'panel',
                    border: false,
                    layout: 'absolute',
                   
                    items:[{
                        xtype: 'combobox',
                        displayField: 'name',
                        valueField: 'value',
                        id:'filterConditionName',
                        value : this.filterConditionStore.getAt(0).get('value'),
                        width: 180,
                        store: this.filterConditionStore,
                        queryMode: 'local',
                        x: 355,
                        y: 5                     
                    }, {
                        xtype: 'button',
                        id: 'save',
                        text: 'Save Filter',
                        x: 540,
                        y: 5,
                        listeners: {
                            'click': Ext.bind(this.saveFilter, this)
                        }                       
                    }, {
                        xtype: 'button',
                        id: 'delete',
                        text: 'Delete Filter',
                        disabled: true,
                        x: 610,
                        y: 5,
                        listeners: {
                            'click': Ext.bind(this.deleteFilter,this)
                        }
                    }, {
                        xtype: 'fieldcontainer',
                        defaultType: 'radiofield',
                        id:'radiocontainer',
                        layout: 'hbox',
                        items: [
                            {boxLabel: this.filterAllConditionLabel, name: 'filterRadio', id:'filterAllCondition', inputValue: '1'},
                            {boxLabel: this.filterAnyConditionLabel, name: 'filterRadio', inputValue: '2', checked: true}
                        ],
                        x: 15,
                        y: 20
                    }],
                    height: 50
                }, {
               
                    region: 'center',
                    xtype: 'panel',
                    id:'centerpanel',
                    border: false,
                   
                    layout: {
                        type: 'table',
                        columns: 5
                    },
                   
                    items:[{
                        xtype: 'combobox',
                        id: 'devicegroup1',
                        displayField: 'name',
                        valueField: 'value',
                        value : this.filterColumnTitleStore.getAt(0).get('value'),
                        width: 220,
                        store: this.filterColumnTitleStore,
                        queryMode: 'local',
                        style: {
                            marginLeft: '10px',
                            marginTop: '5px'
                        }                  
                    }, {
                        xtype: 'combobox',
                        id: 'condition1',
                        displayField: 'name',
                        valueField: 'value',
                        value : this.filterOperatorStore.getAt(0).get('value'),
                        width: 220,
                        store: this.filterOperatorStore,
                        queryMode: 'local',
                        style: {
                            marginLeft: '10px',
                            marginTop: '5px'
                        }
                    }, {
                        xtype: 'textfield',
                        id: 'result1',
                        name: 'result1',
                        fieldLabel: '',
                        style:{
                            marginLeft: '10px',
                            marginTop: '5px'
                        }
                    }, {
                        xtype: 'button',
                        id: 'add1',
                        text: '+',
                        width: 23,
                        style:{
                            marginLeft: '10px'
                        },
                        listeners: {
                            'click': Ext.bind(this.addRules, this)
                        }
                    }, {
                        xtype: 'button',
                        id: 'delete1',
                        text: '-',
                        width: 23,
                        disabled: true,
                        style:{
                            marginLeft: '10px'
                        },
                        listeners: {
                            'click': Ext.bind(this.removeComponent,this)
                        }
                   }]
               }]
                
        }];
       
        this.callParent(arguments);
    },

    // private method
    addRules: function(addBtn){
        var popupbox = addBtn.findParentByType("panel");
        var count = this.componentCount(popupbox);
        if (count < 5) {            
            this.createAndAddFilterComponent(addBtn);
            var displayPanel = Ext.getCmp("displayPanel");
            var height = displayPanel.getHeight();
            displayPanel.setHeight(height+32);
            var countagain = this.componentCount(popupbox);
            if (count == 1) {
                var array = popupbox.query('button[text="-"]');
                array[0].setDisabled(false);
            }
            if (countagain >= 5) {
                var array = popupbox.query('button[text="+"]');
                Ext.Array.each(array, function(btn) {
                    btn.setDisabled(true);
                });  
            }  
       }                        
    },
   
    // private method
    createAndAddFilterComponent: function(newcmp){
        var popupbox = newcmp.findParentByType("panel");
        var deviceGroup = new Ext.form.ComboBox({
            id: 'devicegroup'+this.conditionNumber,
            displayField: 'name',
            valueField: 'value',
            value: this.filterColumnTitleStore.getAt(0).get('value'),
            width: 220,
            store: this.filterColumnTitleStore,
            queryMode: 'local',
            style: {
                marginLeft: '10px',
                marginTop: '5px'
            }
        });
                       
        var condition = new Ext.form.ComboBox({
            id: 'condition'+this.conditionNumber,
            displayField: 'name',
            valueField: 'value',
            value: this.filterOperatorStore.getAt(0).get('value'),
            width: 220,
            store: this.filterOperatorStore,
            queryMode: 'local',
            style: {
                marginLeft: '10px',
                marginTop: '5px'
            }
        });
                       
        var result = new Ext.form.Text({
            id: 'result'+this.conditionNumber,
            name: 'result'+this.conditionNumber,
            fieldLabel: '',
            style:{
                marginLeft: '10px',
                marginTop: '5px'
            }                    
        });
                       
        var add = new Ext.Button({
            id: 'add'+this.conditionNumber,
            text: '+',
            width: 23,
            style:{
                marginLeft: '10px'
            },
            listeners: {
                'click': Ext.bind(this.addRules, this)                 
            }         
        });
                       
        var del = new Ext.Button({
            id: 'delete'+this.conditionNumber,
            text: '-',
            width: 23,
            style:{
                marginLeft: '10px'
            },
            listeners: {                        
                'click': Ext.bind(this.removeComponent,this)
            }          
        });
                       
        this.conditionNumber++;
       
        popupbox.add(deviceGroup);
        popupbox.add(condition);
        popupbox.add(result);
        popupbox.add(add);
        popupbox.add(del);
    },
   
    // private method
    removeComponent: function(removeBtn){
   
        var delid = removeBtn.getId();
        var no = delid.substring(6,delid.length);
        var popupbox = removeBtn.findParentByType("panel");
       
        popupbox.remove("devicegroup"+no);
        popupbox.remove("condition"+no);
        popupbox.remove("result"+no);
        popupbox.remove("add"+no);
        popupbox.remove("delete"+no);
       
        var displaypanel = Ext.getCmp("displayPanel");
        displaypanel.setHeight(displaypanel.getHeight() - 32);
       
        var count = this.componentCount(popupbox);
        if (count == 1) {       
            var array = popupbox.query('button[text="-"]');
            array[0].setDisabled(true);
           
        }else if(count == 4) {       
            var array = popupbox.query('button[text="+"]');
            Ext.Array.each(array, function(btn) {
                btn.setDisabled(false);
            });  
        }                                     
    },
   
    // private method
    componentCount: function(popupbox){
        var array = popupbox.query('button[text="+"]');
        return array.length;
    },
   
    // private method
    setRemoveFilterButtonDisabled: function(disabled){
        Ext.getCmp("remove").setDisabled(disabled);
    },
   
    // private method
    setDeleteFilterButtonDisabled: function(disabled){
        Ext.getCmp("delete").setDisabled(disabled);
    },
   
    /**
     * Detailbutton's click event handling method
     *
     */
    togglePanel: function(detailBtn){
        if (Ext.getCmp("filtercondition").hidden) {
            Ext.getCmp("filtercondition").setVisible(true);
        } else {
            Ext.getCmp("filtercondition").setVisible(false);
        }
       
        if (Ext.getCmp("displayPanel").hidden) {
            Ext.getCmp("displayPanel").setVisible(true);
            detailBtn.setText("Detailed Conditions<<");
        } else {
            Ext.getCmp("displayPanel").setVisible(false);
            detailBtn.setText("Detailed Conditions>>");
        }
    },
   
    // private method
    getDefaultStore: function(){
        if (this.filterConditionStore == '') {
            var filterConditionCombo = [
                {"name":"Enter New Conditions","value":"Enter New Conditions"},
            ];
                       
            this.filterConditionStore = Ext.create('Ext.data.Store', {
                model: 'FX.Table.Filter.Condition',
                data: filterConditionCombo
            });
        }
                                                           
        if (this.filterColumnTitleStore == '') {
            var mgmtDeviceDisplayTablefilterColumnTitleCombo = [
                {"name":"Device/Group ID","value":"Device/Group ID"},
                {"name":"Device/Group Name","value":"Device/Group Name"},
                {"name":"Remarks","value":"Remarks"}
            ];
               
            this.filterColumnTitleStore = Ext.create('Ext.data.Store', {
                model: 'FX.Table.Filter.Condition',
                data: mgmtDeviceDisplayTablefilterColumnTitleCombo
            });
        }
                         
        if (this.filterOperatorStore == '') {
            var mgmtDeviceDisplayTablefilterOperatorCombo = [
                {"name":"Is equal to test","value":"equal"},
                {"name":"Is not equal to test","value":"not equal"},
                {"name":"Contains test","value":"contains"},
                {"name":"Does not contain test","value":"not contain"}
            ];

            this.filterOperatorStore = Ext.create('Ext.data.Store', {
                model: 'FX.Table.Filter.Condition',
                data: mgmtDeviceDisplayTablefilterOperatorCombo
            });
        }
    },
   
    /**
     * Savefilterbutton's click event handling method
     */
    saveFilter: function(){
     
    },
   
    /**
     * Deletefilterbutton's click event handling method
     */
    deleteFilter: function(){
                       
    },
   
    /**
     * Removefilterbutton's click event handling method
     */
    removeFilter: function(){
     
    },
   
    /**
     * Filterbutton's click event handling method
     */
    filter: function(){
     
    },
                   
    /**
     * Get Filter Conditions
     * 
     */
    getConditions: function(){                                                   
        var popupbox = Ext.getCmp("centerpanel");
        var array = popupbox.query('button[text="+"]');
        var conditionArrayIndex = 0;
        var conditionArray = new Array();
        for(i = 0;i < array.length;i++){
            conditionArray[i] = new Array();
        }
        Ext.Array.each(array, function(btn) {
            var addId = btn.getId();
            var componentNumber = addId.substring(3,addId.length);
            var deviceGroupVal = Ext.getCmp("devicegroup"+componentNumber).getValue();
            var conditionVal = Ext.getCmp("condition"+componentNumber).getValue();
            var result = Ext.getCmp("result"+componentNumber).getValue();
                            
            conditionArray[conditionArrayIndex][0] = deviceGroupVal;
            conditionArray[conditionArrayIndex][1] = conditionVal;
            conditionArray[conditionArrayIndex][2] = result;
                         
            conditionArrayIndex++;
        });                         
        return conditionArray;  
    },
   
    /**
     * 
     */
    getConditionName: function(){
        var conditionName = Ext.getCmp("filterConditionName").getValue();
        return conditionName;
    },
   
    /**
     * Get  all Or Any . all : 1 Any : 2
     */
    getAllOrAny: function(){                  
        var allOrAny = Ext.getCmp('filterAllCondition').getGroupValue();
        return allOrAny;
    },
   
    /**
     * 
     */
    getCondition: function(){
        var condition = Ext.getCmp("filtercondition").getValue();
        return condition;
    }             
                   
});