extjs

campaign-filter.js

    Ext.BLANK_IMAGE_URL = './extjs/resources/images/default/s.gif';

    MyApp = {};
    // get Context of the current location
    //  First we  look for the tag <base> from HTML
    //  and if tag is not then look for the URL then
    //  @return parent location of the current file including `/`

    MyApp.getContext = function() {
        var base = document.getElementsByTagName('base')[0];
        if (base && base.href && (base.href.length > 0)) {
            base = base.href;
        } else {
            base = document.URL;
        }
        var li = base.lastIndexOf("/") + 1;
        return base.substr(0, li);
    };

    var proxy = new Ext.data.HttpProxy({
        type: 'json', // optional
        url: MyApp.getContext() + '/json.php'
    });

    // incomings records are  in the format {"data":[{"id":,"name":"","email":""},..]}
    var contactRecord = Ext.data.Record.create([
        { name: 'ID', type: 'int', mapping: 'id' },
        { name: 'Email', type: 'string', mapping: 'email'},
        { name: 'Name', type: 'string', mapping: 'name', allowBlank: true},
        { name: 'Click', type: 'int', mapping: 'click', allowBlank: true},
        { name: 'Open', type: 'int', mapping: 'open', allowBlank: true}
        // { name: 'Status', type: 'int', mapping: 'NumClicks', allowBlank: true}
    ]);

    var reader = new Ext.data.JsonReader({
        idProperty: 'ID',
        totalProperty: 'totalCount',
        successProperty: 'success',
        root: 'data',
        messageProperty: 'message',
        fields: contactRecord
    });

    var writer = new Ext.data.JsonWriter({
        encode: false,
        listful: false,
        writeAllFields: false,
        // xmlEncoding: "UTF-8" // if we set xmlWriter instead of JsonWriter
    });


    Ext.onReady(function() {

        // Typical Store collecting the Proxy, Reader and Writer together.
        var dataSourceStore = new Ext.data.ArrayStore({
            autoDestroy: true,
            storeId: 'dataSourceStore',
            idIndex: 0,
            fields: ['id','name'],
            data: [
                    [1, 'Dotmailer'],
                    [2, 'Address Book']
                ]
        });

        var campaignStore = new Ext.data.Store({
            autoDestroy: true,
            autoload: false,
            remoteSort: false,
            storeId: 'campaignStore',
            restful: true,
            proxy: proxy,
            reader: reader,
            writer: writer,
        });

        var contactStore = new Ext.data.Store({
            autoDestroy: true,
            autoload: false,
            remoteSort: true,
            storeId: 'contactStore',
            restful: true,
            proxy: proxy,
            reader: reader,
            baseParams: {
                'type': 'contact'
            },
            // sortInfo: {
            //     field: 'Email',
            //     direction: 'ASC'
            // },
            writer: writer,
        });

        var activityStore = new Ext.data.ArrayStore({
                autoDestroy: true,
                storeId: 'activityStore',
                idIndex: 0,
                fields: ['id','name'],
                data: [
                        [2, 'Clicked'],
                        [1, 'Opened'],
                        [3, 'Not Opened'],
                        [4, 'Not Clicked']
                    ]
        });

        var dataCombox = new Ext.form.ComboBox({
            fieldLabel: 'Select Data Source',
            displayField: 'name',
            valueField: 'id',
            id: 'datasourceID',
            typeAhead: true,
            triggerAction: 'all',
            width: 200,
            forceSelection: true,
            allowBlank: true,
            store: dataSourceStore,
            mode: 'local',
            listeners: {
                // scope: this,
                select: function () {
                    if(1 === this.getValue()) {
                        campaignStore.load({
                            params: {
                                type: 'campaign'
                            }
                        });
                    }
                }
            }
        });

        // create combo boxes
        var campaignCombox = new Ext.form.ComboBox({
            fieldLabel: 'Campaign',
            id: 'campaign',
            store: campaignStore,
            name: 'Name',
            displayField: 'Name',
            valueField: 'ID',
            emptyText: 'Choose Campaign',
            typeAhead: true,
            editable: false,
            anchor: '70%',
            allowBlank: false,
            listClass: 'comboalign',
            forceSelection: true,
            selectOnFocus: true,
            triggerAction: 'all',
            mode: 'local',
            //if set mode 'remote' then below will works
            loadingText: 'Loading campaigns...',
            queryMode: 'remote',
            queryParam: 'type',
            allQuery: 'campaign',
            lastQuery: '',
            listeners: {
                // scope: this,
                // change: function(t,n,o){ console.log(n + o); },
                // beforequery: function(q){
                //     console.log(q.combo.lastQuery);
                // },
                select: {fn: filterContact, scope:this}
            }
        });

        // add HTML selectbox in Ext comboBox with help of `transfrom` property
        var activityCombox = new Ext.form.ComboBox({
            fieldLabel: 'Contact who',
            displayField :'name',
            valueField: 'id',
            id: 'activityID',
            typeAhead: true,
            triggerAction: 'all',
            width: 150,
            forceSelection: true,
            allowBlank: true,
            store: activityStore,
            mode: 'local',
            listeners: {
                // scope: this,
                select: { fn: filterContact, scope: this }
            }
        });

        // To invoke firstcombox to fetch contacts  ,
        // we can do this in 2 manners
        // 1. Invoking `on` method
        // campaignCombox.on('select', function(cb,r,i) {
        //         console.log(r.get('ID') + ' clicked');

        // }, this);
        //
        // 2. Invoking the function name written on 'select' property of combox
        function filterContact() {
            console.log('here inside filter Contact function');
            var campID = campaignCombox.getValue();
            var activityID = activityCombox.getValue();
            console.log(activityID);
            contactStore.removeAll();
            contactStore.load({
                params: {
                    campaignID: campID,
                    activityID: activityID //record.get('ID')
                }
            });
        }

    /*
    if we want to show data in grid (columns and all ) instead of combo box ( like above), then we will use GridPanel method in below
    */
        // var sm = Ext.create('Ext.selection.CheckboxModel');
        var cbxSelModel = new Ext.grid.CheckboxSelectionModel({
            checkOnly: false,
            singleSelect: false,
            sortable: false,
            dataIndex: 'visible',
            width: 20,
            grid: 'grid',

        });

        // The following is necessary to map the Record Fields to the grid columns.
        var userColumns = [
                    cbxSelModel,
                    {
                        header: "ID",
                        width: 70,
                        dataIndex: 'ID',
                        sortable: true
                    }, {
                        header: "Name",
                        width: 100,
                        dataIndex: 'Name',
                        sortable: true,
                        hidden: true
                    }, {
                        header: "Email",
                        width: 200,
                        dataIndex: 'Email',
                        sortable: true
                    }, {
                        header: "Clicked",
                        width: 80,
                        dataIndex: 'Click',
                        sortable: true
                    }, {
                        header: "Opened",
                        width: 80,
                        dataIndex: 'Open',
                        sortable: true
                    }

                    ];
    /*
    Below  we show data in grid panel using  new Ext.grid.GridPanel({ ... })
    by un commenting `renderTo` will show this panel on page in given div ID 'rest-grid'
    */

        // var sm = Ext.create('Ext.selection.CheckboxModel');
        var grid = new Ext.grid.GridPanel({
            store: contactStore,
            columns: userColumns,
            // renderTo:'contactGrid',
            width: 'fit',
            height: 300,
            iconCls: 'icon-grid',
            frame: true,
            // title: 'Choose Contacts',
            enableColumnHide: true,
            // items : [campaignCombox, activityCombox ,contactCombox ],
            // viewConfig: {
            //     forceFit: true
            // }
        });

        // we are using Ext.Panel here, if we use `Ext.Window({...})` , then it will draw window on page
        var panel = new Ext.form.FormPanel({ // or Ext.form.FormPanel
            // title: 'Choose Contacts',
            layout: 'form',
            labelAlign: 'left',
            defaultType: 'textfield',
            width: 600,
            height: 500,
            padding: 10,
            items: [
                    dataCombox,
                    campaignCombox,
                    activityCombox,
                    {
                        fieldLabel: 'Atleast',
                        name: 'atleast',
                        allowBlank: true,
                        labelSeparator: ''
                    },
                    // {
                    //     fieldLabel: 'Email',
                    //     name: 'email',
                    //     vtype:'email'
                    // },
                    grid],
            renderTo: Ext.getBody() // document.body or Ext.getBody()
        });

}); // end of Ext.onReady();

ExtJS practice with group office