1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    11
    Vote Rating
    0
    jbeauchamp is on a distinguished road

      0  

    Default IE Compatability

    IE Compatability


    I have written and Ext/JS application, and this is my first one. I was working with a gentleman that was very knowledgeable about it. He has now left the company I work for. The biggest issue I am seeing at this point is in IE 8 and before. When I enter some fields on the page, it submits everything fine and I get results. When I go back to the same page and enter some new information, IE does not pick up the changes that are made and submits the same request. I have checked and there are no java script errors being taken. I can see in the request my field values are not being pulled from the page. Any ideas?

    Also, is there a way to make this faster in IE? In IE 9, it seems to be okay but in anything prior it is super slow. In Firefox and Chrome it takes awhile but it is much faster than IE.

    Any help would be greatly appreciated.

  2. #2
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
    kevin.chen is on a distinguished road

      0  

    Default


    are you using form to submit the request or making ajax call?

    IE8 always have performance issue compare to IE9 and rest of browsers, you can not expect it faster then others

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    11
    Vote Rating
    0
    jbeauchamp is on a distinguished road

      0  

    Default


    I am pulling the values from the form and sending them to a store.load() function. This then uses and ajax call to my servlets to retrieve the search results.

    Code:
    handleSearch: function() {
            var me = this,
                cmp = me.getSearchForm(),
                srStore = me.getStore('SearchResults');
    
            me.displaySearchErrorMessage(false);
            me.getSearchForm().setLoading('Loading, please wait...');
    
            srStore.load({
                params: me.getSearchForm().getForm().getValues(),
                scope: me,
                callback: me.addSearchResultsToGrid
            });
        },
    Code:
    Ext.define('CMOD.store.SearchResults', {
        extend: 'Ext.data.Store',
    
        model: 'CMOD.model.SearchResult',
        proxy: {
            type: 'ajax',
            url: CMOD.config.searchUrl,
            reader: {
                type: 'json'
            }
        }
    });

  4. #4
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
    kevin.chen is on a distinguished road

      0  

    Default


    please try following code

    Code:
    handleSearch: function () {
        var me = this,
            cmp = me.getSearchForm(),
            srStore = me.getStore('SearchResults');
    
    
        me.displaySearchErrorMessage(false);
        me.getSearchForm().setLoading('Loading, please wait...');
    
    
        srStore.load({
            params:  Ext.encode(me.getSearchForm().getForm().getValues()),
            scope: me,
            callback: me.addSearchResultsToGrid
        });
    }

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    11
    Vote Rating
    0
    jbeauchamp is on a distinguished road

      0  

    Default


    I added the Ext.encode to the params: line of code. This seems to have caused issues with sending my values to my servlet. Here is what is getting sent now.

    Request GET /myCDSdocs/FolderCriteria?_dc=1351910705780&{"report_type":"Reports-I-General","Run_Date_operator":1024,"Run_Date_value1":"10/03/2012","Run_Date_value2":"11/02/2012","Client_operator":256,"Client_value1":"z","Category_operator":1,"Category_value1":"","Report_ID_operator":256,"Report_ID_value1":"","Run_%23_operator":256,"Run_%23_value1":"","Job_Name_operator":256,"Job_Name_value1":"","Job_%23_operator":1,"Job_%23_value1":"","Run_Type_operator":256,"Run_Type_value1":"","Report_List_operator":1,"Report_List_value1":"","Report_Title_operator":1,"Report_Title_value1":"","Site_operator":1,"Site_value1":"","App_Type_operator":1,"App_Type_value1":"","Status_operator":1,"Status_value1":"","Pages_operator":1,"Pages_value1":"","Source_Sys_operator":1,"Source_Sys_value1":"","application_type":"AND"} HTTP/1.1

    This is not the normal name/value pair request. How do I pull the json out of this request?

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    11
    Vote Rating
    0
    jbeauchamp is on a distinguished road

      0  

    Default


    My issue seems to be the getForm().getValues() function is not working properly in older versions of IE. It will not pull the latest values from the form. It works fine in IE9, Chrome, Firefox, just not in IE pre version 9. I don't want to have to change my code to use json unless that is the only way to make this work. I have made changes to the Basic form just to see what it is pulling and log it. There are no values in any of the fields I am changing the second time the page is displayed.

  7. #7
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
    kevin.chen is on a distinguished road

      0  

    Default


    Did you see any error in console? I guess it broke somewhere inside getForm().getValues(), can you debug the code to step through each line to see where caused the problem?

  8. #8
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
    kevin.chen is on a distinguished road

      0  

    Default


    I guess something is wrong in your form configuration

  9. #9
    Sencha User
    Join Date
    Jul 2012
    Posts
    11
    Vote Rating
    0
    jbeauchamp is on a distinguished road

      0  

    Default


    There are no errors being log on the console. I have changed the Basic class code to write information to the console and it is showing the code is not pulling the lastest values from the form. It is like it is not registering the changes in the selection criteria. Like it has no idea the fields are being changed.

  10. #10
    Sencha User
    Join Date
    Jul 2012
    Posts
    11
    Vote Rating
    0
    jbeauchamp is on a distinguished road

      0  

    Default


    Here is the form
    Code:
    /**
     * The search form.
     *
     * @markdown
     * @xtype cmod-search-form
     */
    Ext.define('CMOD.view.search.SearchForm', {
        extend: 'Ext.form.Panel',
        alias: 'widget.cmod-search-form',
    
        requires: [
            'Ext.form.ComboBox'
        ],
    
        cls: 'cmod-title-subtitle',
    
        title: "Step 1 of 2:&nbsp; <i>Enter the required and known search criteria about the document(s) you want to find, then click 'Search'. * - Denotes any required criteria.</i>",
    
        autoScroll: true,
        layout: 'anchor',
        padding: 10,
        bodyPadding: 10,
        monitorValid: true,
    
        fieldDefaults: {
            //anchor: '100%',
            labelAlign: 'left'
        },
    
        dockedItems: [{
            xtype: 'cds-buttontoolbar',
            dock: 'bottom',
    
            items: [{
                text: 'Search',
                itemId: 'search',
                formBind: true
    //            disabled: true
            },{
                text: 'Clear',
                itemId: 'clear'
            },{
                xtype: 'tbtext',
                cls: 'search-error',
                text: '<b>There was a problem with your search criteria, please try again.</b>',
                itemId: 'errorMessage'
            }]
        }],
        
        defaults: {
            margin: '0 0 10'
        },
    
        items: [{
            fieldLabel: 'Report Type: *',
            labelSeparator: '',
            name: 'report_type',
            id: 'report_type',
            displayField: 'name',
            valueField: 'value',
            xtype: 'combo',
            queryMode: 'local',
            editable: false,
            store: 'ReportTypes'
        },{
            fieldLabel: ' ',
            labelSeparator: '',
            name: 'report_description',
            id: 'report_description',
            value: '',
            xtype: 'displayfield'
        }]
    });
    Here is the SearchController that controllers the form

    Code:
    /**
     * The search controller used to set up application bindings to search views.
     *
     * @markdown
     */
    Ext.define('CMOD.controller.SearchController', {
        extend: 'Ext.app.Controller',
    
        requires: [
            'CMOD.model.Operator',
            'CMOD.model.Choice',
            'CMOD.form.OperatorComboBox',
            'CMOD.form.ChoiceComboBox',
            'CMOD.view.menu.ItemContextMenu',
            'Ext.form.field.Hidden',
            'Ext.layout.component.field.FieldContainer',
            'Ext.form.FieldContainer',
            'Ext.form.field.Date',
            'Ext.picker.Date',
            'Ext.button.Split',
            'Ext.picker.Month'
        ],
        stores: [
            'ReportTypes',
            'SearchResults',
            'SearchParameters',
            'Operators'
        ],
    
        refs: [{
            ref: 'viewport',
            selector: 'viewport'
        },{
            ref: 'searchForm',
            selector: 'cmod-search-form'
        },{
            ref: 'searchResultsGrid',
            selector: 'cmod-search-results-grid'
        },{
            ref: 'searchResultsPanel',
            selector: 'cmod-search-results-panel'
        },{
            ref: 'itemContextMenu',
            selector: 'cmod-item-context-menu'
        }],
    
        /**
         * Configure application event bindings.
         */
        init: function() {
            var me = this;
    
            // Application Event Listeners
    
            me.control({
                'cmod-search-form': {
                    beforeactivate: {
                        scope: me,
                        fn: me.initSearch,
                        single: true
                    }
                },
                'cmod-search-form button[itemId=search]': {
                    click: {
                        scope: me,
                        fn: me.handleSearch
                    }
                },
                'cmod-search-form button[itemId=clear]': {
                    click: {
                        scope: me,
                        fn: me.handleClear
                    }
                },
                'cmod-search-form combo[name=report_type]':{
                    change: {
                        scope: me,
                        fn: me.changeReportType
                    }
                },
                'cmod-search-results-panel button[itemId=revise]': {
                    click: {
                        scope: me,
                        fn: me.refineSearch
                    }
                },
                'cmod-search-results-panel button[itemId=view]': {
                    click: {
                        scope: me,
                        fn: me.viewReports
                    }
                },
                'cmod-search-results-panel button[itemId=download]': {
                    click: {
                        scope: me,
                        fn: me.downloadReports
                    }
                },
                'cmod-search-results-grid': {
                    celldblclick: {
                        scope: me,
                        fn: me.resultDoubleClick
                    },
                    itemcontextmenu: {
                        scope: me,
                        fn: me.gridContextMenu
                    },
                    selectionchange: {
                        scope: me,
                        fn: me.gridSelectionChange
                    }
                },
                'cmod-item-context-menu [itemId=view]': {
                    click: {
                        scope: me,
                        fn: me.viewReports
                    }
                },
                'cmod-item-context-menu [itemId=download]': {
                    click: {
                        scope: me,
                        fn: me.downloadReports
                    }
                },
                'cmod-operator-combobox': {
                    change: { fn: me.handleOperatorChange, scope: me }
                }
            });
        },
        resultDoubleClick: function(table, td, cellIndex, record, tr, rowIndex) {
            var me = this;
            me.showSingleDocument(record.get('docId'));
        },
        gridContextMenu: function(view, record, tr, index, e) {
            var me = this,
                menu = new CMOD.view.menu.ItemContextMenu(),
                items = menu.items;
            //
            if (me.userRmsEnabled()) {
                if (me.allSelectedItemsMapped()) {
                    items.getByKey('download').disabled = false;
                } else {
                    items.getByKey('download').disabled = true;
                }
            } else {
                items.getByKey('download').disabled = true;
            }
            e.stopEvent();
            menu.showAt(e.getXY());
        },
        gridSelectionChange: function() {
            var me = this,
                cmp = me.getSearchResultsPanel(),
                dockedItems = cmp.getDockedItems('cds-buttontoolbar[dock="bottom"]'),
                items = dockedItems[0].items;
            //
            if (me.userRmsEnabled()) {
                if (me.allSelectedItemsMapped()) {
                    items.getByKey('download').setDisabled(false);
                } else {
                    items.getByKey('download').setDisabled(true);
                }
            } else {
                items.getByKey('download').setDisabled(true);
            }
        },
        userRmsEnabled: function() {
            var user = CMOD.config.user;
            if (user.rmsEnabled) {
                return true;
            } else {
                return false;
            }
        },
        allSelectedItemsMapped: function() {
            var me = this,
                rows = me.getSearchResultsGrid().getSelectionModel().getSelection(),
                i=0;
            //
            for(i = 0; i < rows.length; i++) {
                if (!rows[i].get('mapped')) {
                    return false;
                }
            }
            //
            return true;
        },
        showSingleDocument: function(docId) {
            var url = '/myCDSdocs/DisplayDocument?folderName=' + Ext.getCmp('report_type').value + '&docId=' + docId;
            window.open(url);
        },
        downloadSingleDocument: function(docId) {
            var url = '/myCDSdocs/rms.jsp?folderName=' + Ext.getCmp('report_type').value + '&docId=' + docId;
            window.open(url);
        },
        /**
         * 
         */
        initSearch: function() {
            var me = this;
    
            // load the report types store
            me.getStore('ReportTypes').load({
                scope: me,
                callback: me.reportTypesLoaded
            });
            
            me.displaySearchErrorMessage(false);
        },
        reportTypesLoaded: function() {
            var me = this,
                cmp = Ext.getCmp('report_type');
            cmp.setValue(cmp.getStore().getAt(0).get('value'));
        },
        handleClear: function() {
            var me = this,
                form = me.getSearchForm(),
                formEls = form.items.getRange(),
                i=0,
                len;
    
            me.displaySearchErrorMessage(false);
            
            Ext.getCmp('report_description').setValue('');
            Ext.getCmp('report_type').clearValue();
            
            //remove old search parameters - Leave first two fields
            for(i=2, len=formEls.length; i < len; i++) {
                form.remove(formEls[i]);
            }
        },
        /**
         * Search stub.
         */
        handleSearch: function() {
            var me = this,
                srStore = me.getStore('SearchResults');
    
            me.displaySearchErrorMessage(false);
            me.getSearchForm().setLoading('Loading, please wait...');
            
            srStore.load({
                params: me.getSearchForm().getForm().getValues(),
                scope: me,
                callback: me.addSearchResultsToGrid
            });
        },
        
        handleOperatorChange: function(element, value) {
            var name = element.name,
                id = name.replace('_operator', '_value2');
            
            if (value === 1024) {
                Ext.getCmp(id).enable();
            } else {
                Ext.getCmp(id).disable();
            }
        },
        
        addSearchResultsToGrid: function(records, operation, success) {
            var me = this,
                srStore = me.getStore('SearchResults'),
                resultsStore,
                cols, 
                columnConfig = [],
                fields =  [],
                i=0;
            //
            if (!success) {
                me.displaySearchErrorMessage(true);
                return;
            }
            //
            cols = srStore.data.getAt(0).get('columnHeader'),
            
            columnConfig.push({ text: cols[0].replace(/_/g, ' '), dataIndex: cols[0], locked: true, hideable: false });
            fields.push(cols[0]);
            //
            for(i = 1; i < cols.length; i++) {
                columnConfig.push({ header: cols[i].replace(/_/g, ' '), text: cols[i].replace(/_/g, ' '), dataIndex: cols[i] });
                //Got to love hard coding crap :(
                if (cols[i] == 'Pages') {
                    fields.push({name: cols[i], type: 'number'});
                } else {
                    fields.push(cols[i]);
                }
                
            }
    
            columnConfig.push({ text: 'Document Id', dataIndex: 'docId', hidden: true });
            fields.push('docId');
            columnConfig.push({ text: 'Datawatch RMS Mapped', dataIndex: 'mapped', hidden: true });
            fields.push('mapped');
            
            resultsStore = Ext.create('Ext.data.Store', {
                fields: fields,
                data: srStore.data.getAt(0).get('results')
            });
            
            if (srStore.data.getAt(0).get('additional')) {
                me.getSearchResultsGrid().setTitle('Search Results: <i>'+resultsStore.count()+'</i> - There are additional reports found, please revise your search.');
            } else {
                me.getSearchResultsGrid().setTitle('Search Results: <i>'+resultsStore.count()+'</i>');
            }
            
            me.getSearchResultsGrid().reconfigure(resultsStore, columnConfig);
            me.getSearchForm().setLoading(false);
    
            me.getViewport().getComponent('card-panel').layout.setActiveItem(2);
            // after updating the card layout active item it is necessary to
            // refresh the grid view so it can finish rendering itself
            me.getSearchResultsGrid().getView().refresh();
            me.gridSelectionChange();
            me.getSearchResultsGrid().doLayout();
        },
        /**
         * 
         * @param display
         */
        displaySearchErrorMessage: function(display) {
            var me = this,
                cmp,
                items,
                dockedItems;
    
            me.getSearchForm().setLoading(false);
            cmp = me.getSearchForm();
            dockedItems = cmp.getDockedItems('cds-buttontoolbar[dock="bottom"]');
            items = dockedItems[0].items;
            items.getByKey('errorMessage').setVisible(display);
            return;
        },
        /**
         * Search stub.
         */
        refineSearch: function() {
            var me = this;
            me.getViewport().getComponent('card-panel').layout.setActiveItem(1);
        },
        
        /**
         * Display a new window for each report selected in the grid.
         */
        viewReports: function() {
            var me = this,
                rows = me.getSearchResultsGrid().getSelectionModel().getSelection(),
                i=0;
            //
            for(i = 0; i < rows.length; i++) {
                me.showSingleDocument(rows[i].get('docId'));
            }
        },
        /**
         * Display a new window for each report selected in the grid.
         */
        downloadReports: function() {
            var me = this,
                rows = me.getSearchResultsGrid().getSelectionModel().getSelection(),
                i=0;
            //
            for(i = 0; i < rows.length; i++) {
                me.downloadSingleDocument(rows[i].get('docId'));
            }
        },
        /**
         * 
         * @param field
         * @param value - Report Type / Folder Name in ODWEK
         */
        changeReportType: function(field, value) {
            var me = this,
                i=0,
                searchResultsStore,
                store;
            
            me.displaySearchErrorMessage(false);
            //
            if (value != null) {
                me.getSearchForm().setLoading('Loading, please wait...');
    
                for(i = 0; i < field.store.data.items.length; i++) {
                    if (value == field.store.data.items[i].data.value) {
                        Ext.getCmp('report_description').setValue(field.store.data.items[i].data.description);
                    }
                }
        
                searchResultsStore = me.getStore('SearchResults');
                searchResultsStore.getProxy().setExtraParam('folderName', value);
        
                store = me.getStore('SearchParameters');
                store.getProxy().setExtraParam('folderName', value);
    
                me.getStore('SearchParameters').load({
                    scope: me,
                    callback: me.addSearchParameters
                });
            }
        },
        /**
         * 
         * @param records
         * @param operation
         * @param success
         */
        addSearchParameters: function(records, operation, success) {
            var me = this,
                form = me.getSearchForm(),
                formEls = form.items.getRange(),
                store = me.getStore('SearchParameters'),
                i=0,
                len;
            
            //remove old search parameters - Leave first two fields
            for(i=2, len=formEls.length; i < len; i++) {
                form.remove(formEls[i]);
            }
            
            if (success) {
                // add the required parameters first, followed by any others
                store.query('required', true).each(me.addSearchParameter, me);
                store.query('required', false).each(me.addSearchParameter, me);
                me.addApplicationType();
            } else {
                me.addErrorMessage();
            }
            //
            me.getSearchForm().setLoading(false);
    
        },
        /**
         * 
         * @param param
         * @param index
         * @param total
         */
        addSearchParameter: function(param, index, total){
            var me = this,
                store = me.getStore('SearchParameters'),
                opStore = param.operators(),
                betweenIdx = opStore.find('operatorName', 'Between'),
                form = me.getSearchForm(),
                fieldCont = form.add({
                    xtype: 'fieldcontainer',
                    fieldLabel: param.getDisplayName() + ':'  + (param.get('required') ? ' *' : ''),
                    labelSeparator: '',
                    combineErrors: true,
                    layout: 'hbox',
                    defaults: {
                        hideLable: true,
                        xtype: 'textfield'
                    }
                }),
                choiceStore = null,
                cmp,
                now;
            
            if (param.get('choice')) {
                choiceStore = param.choices();
            }
            
            cmp = Ext.create('CMOD.form.OperatorComboBox', {
                name: param.get('name') + '_operator',
                displayField: 'operatorName',
                valueField: 'operatorValue',
                queryMode: 'local',
                value: opStore.getAt(0).get('operatorValue'),
                editable: false,
                store: opStore
            });
    
            fieldCont.add(cmp);
    
            cmp = Ext.create('Ext.form.field.Display', {
                width: 10
            });
            fieldCont.add(cmp);
            
            if (param.get('fieldQualifier') == 'D') {
                now = new Date();
                cmp = Ext.create('Ext.form.DateField', {
                    name: param.get('name') + '_value1',
                    id: param.get('name') + '_value1',
                    value: new Date(now.getTime() - (30 * 24 * 60 * 60 * 1000))
                });
                
            } else if (param.get('choice')) {
                cmp = Ext.create('CMOD.form.ChoiceComboBox', {
                    name: param.get('name') + '_value1',
                    id: param.get('name') + '_value1',
                    displayField: 'name',
                    valueField: 'value',
                    queryMode: 'local',
                    editable: false,
                    store: choiceStore,
                    fieldStyle:'width:100%; min-width:150px;'
                });
            } else {
                cmp = Ext.create('Ext.form.field.Text', {
                    name: param.get('name') + '_value1',
                    id: param.get('name') + '_value1',
                    allowBlank: !param.get('required'),
                    width: 150
                });
            }
    
            fieldCont.add(cmp);  //Add first value field (either date picker or text field)
    
            if (betweenIdx > -1) {
                cmp = Ext.create('Ext.form.field.Display', {
                    width: 10
                });
                
                fieldCont.add(cmp);
    
                if (param.get('fieldQualifier') == 'D') {
                    cmp = Ext.create('Ext.form.DateField', {
                        name: param.get('name') + '_value2',
                        id: param.get('name') + '_value2',
                        value: new Date(),
                        disabled: true
                    });
                    
                } else {
                    cmp = Ext.create('Ext.form.field.Text', {
                        name: param.get('name') + '_value2',
                        id: param.get('name') + '_value2',
                        disabled: true,
                        width: 150
                    });
                }
    
                fieldCont.add(cmp); //Add second value field (either date picker or text field)
            }
        },
        /**
         * 
         * @param param
         * @param index
         * @param total
         */
        addApplicationType: function() {
            var me = this,
                applicationTypeStore = Ext.create('Ext.data.Store', {
                    fields: ['value', 'label'],
                    data: [
                        { label: 'And', value: 'AND' },
                        { label: 'Or', value: 'OR' }
                    ]
                }),
                form = me.getSearchForm();
            
            form.add({
                xtype: 'combo',
                fieldLabel: 'Application Type',
                name: 'application_type',
                displayField: 'label',
                valueField: 'value',
                queryMode: 'local',
                value: 'AND',
                editable: false,
                store: applicationTypeStore
            });
        },
        /**
         * 
         */
        addErrorMessage: function(){
            var me = this,
                form;
    
            form = me.getSearchForm();
            form.add({
                name: 'noCriteriaFound',
                value: 'There was a problem trying to load the criteria for the selected report type.',
                xtype: 'displayfield'
            });
        }
    });
    Not sure how it could be the form configuration as this is the only thing not working and it only on IE pre version 9.

    Any idea would be great to try.

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."