Hybrid View

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    16
    Vote Rating
    0
    sudhavani is on a distinguished road

      0  

    Default Unanswered: Paging Issue in Ext js. I am having trouble with paging. My start is not changing

    Unanswered: Paging Issue in Ext js. I am having trouble with paging. My start is not changing


    Ext.onReady(function(){

    /***********************************************
    * Start Date
    ***********************************************/
    var startDateField = Ext.widget("datefield", {
    renderTo: "startDateFld",
    width: 95,
    allowBlank: false,
    maxValue: new Date(),
    value: new Date(new Date().getTime() - 86400000), //yesterday
    cls: 'middle'
    });

    /***********************************************
    * End Date
    ***********************************************/
    var endDateField = Ext.widget("datefield", {
    renderTo: "endDateFld",
    width: 95,
    allowBlank: false,
    maxValue: new Date(),
    value: new Date(),
    cls: 'middle'
    });
    var storeStatusJson;

    /***********************************************
    * Search Button
    ***********************************************/
    /*Ext.widget("button",{
    renderTo: 'searchBtn',
    text: 'Search',
    cls: 'srchBtn',
    //href: 'mainStatus.do',
    handler: function(){
    //window.location="mainStatus.do";
    var searchCustomerJsonData = {
    StartDate: startDateField.getValue(),
    EndDate: endDateField.getValue()
    };
    storeStatusJson = searchCustomerJsonData;

    //reset back to page 1
    // mainStoreStatusGrid.getStore().currentPage = 1;
    mainStatusStore.load({
    jsonData: storeStatusJson,
    copyFiltersToJson: true,
    copySortToJson: true
    });
    },
    listeners: {
    click: function(){
    // if (validateFn()) {
    var searchCustomerJsonData = {
    StartDate: startDateField.getValue(),
    EndDate: endDateField.getValue()
    };
    storeStatusJson = searchCustomerJsonData;

    //reset back to page 1
    // mainStoreStatusGrid.getStore().currentPage = 1;
    mainStatusStore.load({
    jsonData: storeStatusJson,
    copyFiltersToJson: true,
    copySortToJson: true
    });
    }
    // }
    }
    }); */
    /***********************************************
    * Search Button
    ***********************************************/
    /*Ext.widget("button",{
    renderTo: 'searchBtn',
    text: 'Search',
    cls: 'srchBtn',
    //href: 'mainStatus.do',
    handler: function(){
    //window.location="mainStatus.do";
    //TODO do something, remove href
    mainStatusStore.clearFilter();
    mainStatusStore.load({
    params:{
    StartDate: startDateField.getValue(),
    EndDate: endDateField.getValue()
    }
    });
    }
    });*/

    /***********************************************
    * New Conversion Button
    ***********************************************/
    Ext.widget("button",{
    renderTo: 'newConversionBtn',
    text: 'New Conversion',
    cls: 'srchBtn',
    handler: function(){
    window.location="newconversion.do";
    }
    });




    /***********************************************
    * Store Status Grid
    ***********************************************/
    Ext.define('StoreStatus', {
    extend: 'Ext.data.Model',
    fields: ["storeNumber", "rpmsite", "storeName", "user",
    {name: "startTime", type: "date", dateFormat: 'time'},
    "status",
    {name: "endTime", type: "date", dateFormat: 'time'},
    {name: "statusId", type: "number"}]
    });

    var itemsPerPage = 5;

    var mainStatusStore = Ext.create("Ext.data.Store", {
    pageSize: itemsPerPage,
    model: 'StoreStatus',
    proxy: {
    type: 'ajax',
    url : 'storeListStatus.json',
    extraParams: {
    StartDate: startDateField.getValue(),
    EndDate: endDateField.getValue()
    },
    reader: {
    type: 'json',
    root: 'items',
    totalProperty: 'total'
    }
    },
    listeners: {
    beforeload: function(store, operation){
    operation.jsonData = storeStatusJson;
    operation.copyFiltersToJson = true; //copies "start" and "limit" params to JSON
    operation.copySortToJson = true; //copies "sort" params to JSON
    }
    }
    });

    /*mainStatusStore.load({
    params:{
    start:0,
    limit: itemsPerPage
    }
    });*/

    var mainStoreStatusGrid = Ext.create('Ext.grid.Panel', {
    id: 'mainStatusGridPanel',
    title: 'Store Status',
    store: mainStatusStore,
    renderTo: 'mainStatusTable',
    width: '100%',
    cls: 'grid',
    scroll: 'vertical',
    layout: 'fit',
    viewConfig: {
    trackOver: false,
    stripeRows: false,
    getRowClass: function(record, rowIndex, rowParams, store){
    if(!record) return '';
    return getStatusPrefix(record.data.statusId) + 'Row';
    }
    },
    columns: [
    {header: 'Store Number', dataIndex: 'storeNumber'},
    {header: 'RPM Site', dataIndex: 'rpmsite'},
    {header: 'Store Name', dataIndex: 'storeName', flex: 4,
    renderer: function(value, meta, record){

    if (record.data.status == 'ERROR' || record.data.status == 'Aborted'){
    return Ext.String.format(value, record.data.storeNumber, record.data.status,record.data.storeName);
    } else {

    return Ext.String.format('<a href="detailedStatus.do?storeInfo={1} - {3}&status={2}">{0}</a>',
    value, record.data.storeNumber, record.data.status,record.data.storeName);
    }
    }
    },
    {header: 'Initiated By', dataIndex: 'user', flex: 2},
    {header: 'Start Time', dataIndex: 'startTime',flex: 5, xtype: 'datecolumn', format: 'Y-m-d h:i A'},
    {header: 'Status', dataIndex: 'status',flex: 3,
    renderer: function(value, meta, record){

    var css = getStatusPrefix(record.data.statusId) + "Label";

    if (value == 'ERROR'){
    return Ext.String.format('<span class="{0}">{1}</span>',
    css, value, record.data.storeNumber);
    } else {
    return Ext.String.format('<span class="{0}">{1}</span>', css, value);
    }
    }
    },
    {header: 'End Time', dataIndex: 'endTime',flex: 6, xtype: 'datecolumn', format: 'Y-m-d h:i A'},
    {flex: 7, sortable: false}
    ],
    // paging bar on the bottom
    bbar: Ext.create('Ext.PagingToolbar', {
    store: mainStatusStore,
    displayInfo: true
    })
    });

    /**
    * Get the remaining space of the viewport for the grid height
    */
    function getGridHeight(){
    return getRemainingHeight("mainStatusGridPanel", ["mainHeader", "header"]);
    }

    //Have to set the grid height after the widget is created
    //so it can grab the padding values for the grid
    mainStoreStatusGrid.setHeight(getGridHeight());

    Ext.EventManager.onWindowResize(function(){
    mainStoreStatusGrid.setHeight(getGridHeight());
    mainStoreStatusGrid.forceComponentLayout();
    }, mainStoreStatusGrid);

    /***********************************************
    * Search Button
    ***********************************************/
    Ext.widget("button",{
    renderTo: 'searchBtn',
    text: 'Search',
    cls: 'srchBtn',
    //href: 'mainStatus.do',
    /*handler: function(){
    //window.location="mainStatus.do";
    var searchCustomerJsonData = {
    StartDate: startDateField.getValue(),
    EndDate: endDateField.getValue()
    };
    storeStatusJson = searchCustomerJsonData;

    //reset back to page 1
    // mainStoreStatusGrid.getStore().currentPage = 1;
    mainStatusStore.load({
    jsonData: storeStatusJson,
    copyFiltersToJson: true,
    copySortToJson: true
    });
    },*/
    listeners: {
    click: function(){
    // if (validateFn()) {
    var searchCustomerJsonData = {
    StartDate: startDateField.getValue(),
    EndDate: endDateField.getValue()
    };
    storeStatusJson = searchCustomerJsonData;

    //reset back to page 1
    // mainStoreStatusGrid.getStore().currentPage = 1;
    mainStatusStore.load({
    jsonData: storeStatusJson,
    copyFiltersToJson: true,
    copySortToJson: true
    });
    }
    // }
    }
    });
    });

  2. #2
    Sencha User
    Join Date
    Dec 2009
    Location
    Enschede, The Netherlands
    Posts
    327
    Answers
    16
    Vote Rating
    13
    flanders will become famous soon enough

      0  

    Default


    First of all, please wrap your code in CODE tags, so its readable.

    Secondly, it looks like you are not using the proper methods for paging but rather send some internal variables by hand. Furthermore, you are loading the data from a json file so you always get the same (full) result. No mather what page the store requrests, it will always display the records received from the server side. So if you ask for recrods 1 to 20 but get the first 50, your store will contain the first 50 records.

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    16
    Vote Rating
    0
    sudhavani is on a distinguished road

      0  

    Default


    Code:
    Ext.onReady(function() {
    
                /*******************************************************************
                 * Start Date
                 ******************************************************************/
                var startDateField = Ext.widget("datefield", {
                    renderTo : "startDateFld",
                    width : 95,
                    allowBlank : false,
                    maxValue : new Date(),
                    value : new Date(new Date().getTime() - 86400000), // yesterday
                    cls : 'middle'
                });
    
                /*******************************************************************
                 * End Date
                 ******************************************************************/
                var endDateField = Ext.widget("datefield", {
                    renderTo : "endDateFld",
                    width : 95,
                    allowBlank : false,
                    maxValue : new Date(),
                    value : new Date(),
                    cls : 'middle'
                });
                var storeStatusJson;
    
                /*******************************************************************
                 * Search Button
                 ******************************************************************/
                /*
                 * Ext.widget("button",{ renderTo: 'searchBtn', text: 'Search', cls:
                 * 'srchBtn', //href: 'mainStatus.do', handler: function(){
                 * //window.location="mainStatus.do"; var searchCustomerJsonData = {
                 * StartDate: startDateField.getValue(), EndDate:
                 * endDateField.getValue() }; storeStatusJson =
                 * searchCustomerJsonData;
                 * 
                 * //reset back to page 1 //
                 * mainStoreStatusGrid.getStore().currentPage = 1;
                 * mainStatusStore.load({ jsonData: storeStatusJson,
                 * copyFiltersToJson: true, copySortToJson: true }); }, listeners: {
                 * click: function(){ // if (validateFn()) { var
                 * searchCustomerJsonData = { StartDate: startDateField.getValue(),
                 * EndDate: endDateField.getValue() }; storeStatusJson =
                 * searchCustomerJsonData;
                 * 
                 * //reset back to page 1 //
                 * mainStoreStatusGrid.getStore().currentPage = 1;
                 * mainStatusStore.load({ jsonData: storeStatusJson,
                 * copyFiltersToJson: true, copySortToJson: true }); } // } } });
                 */
                /*******************************************************************
                 * Search Button
                 ******************************************************************/
                /*
                 * Ext.widget("button",{ renderTo: 'searchBtn', text: 'Search', cls:
                 * 'srchBtn', //href: 'mainStatus.do', handler: function(){
                 * //window.location="mainStatus.do"; //TODO do something, remove
                 * href mainStatusStore.clearFilter(); mainStatusStore.load({
                 * params:{ StartDate: startDateField.getValue(), EndDate:
                 * endDateField.getValue() } }); } });
                 */
    
                /*******************************************************************
                 * New Conversion Button
                 ******************************************************************/
                Ext.widget("button", {
                    renderTo : 'newConversionBtn',
                    text : 'New Conversion',
                    cls : 'srchBtn',
                    handler : function() {
                        window.location = "newconversion.do";
                    }
                });
    
                /*******************************************************************
                 * Store Status Grid
                 ******************************************************************/
                Ext.define('StoreStatus', {
                    extend : 'Ext.data.Model',
                    fields : [ "storeNumber", "rpmsite", "storeName", "user", {
                        name : "startTime",
                        type : "date",
                        dateFormat : 'time'
                    }, "status", {
                        name : "endTime",
                        type : "date",
                        dateFormat : 'time'
                    }, {
                        name : "statusId",
                        type : "number"
                    } ]
                });
    
                var itemsPerPage = 5;
    
                var mainStatusStore = Ext.create("Ext.data.Store", {
                    pageSize : itemsPerPage,
                    model : 'StoreStatus',
                    proxy : {
                        type : 'ajax',
                        url : 'storeListStatus.json',
                        extraParams : {
                            StartDate : startDateField.getValue(),
                            EndDate : endDateField.getValue()
                        },
                        reader : {
                            type : 'json',
                            root : 'items',
                            totalProperty : 'total'
                        }
                    },
                    listeners : {
                        beforeload : function(store, operation) {
                            operation.jsonData = storeStatusJson;
                            operation.copyFiltersToJson = true; // copies "start"
                                                                // and "limit"
                                                                // params to JSON
                            operation.copySortToJson = true; // copies "sort"
                                                                // params to JSON
                        }
                    }
                });
    
                /*
                 * mainStatusStore.load({ params:{ start:0, limit: itemsPerPage }
                 * });
                 */
    
                var mainStoreStatusGrid = Ext
                        .create(
                                'Ext.grid.Panel',
                                {
                                    id : 'mainStatusGridPanel',
                                    title : 'Store Status',
                                    store : mainStatusStore,
                                    renderTo : 'mainStatusTable',
                                    width : '100%',
                                    cls : 'grid',
                                    scroll : 'vertical',
                                    layout : 'fit',
                                    viewConfig : {
                                        trackOver : false,
                                        stripeRows : false,
                                        getRowClass : function(record, rowIndex,
                                                rowParams, store) {
                                            if (!record)
                                                return '';
                                            return getStatusPrefix(record.data.statusId)
                                                    + 'Row';
                                        }
                                    },
                                    columns : [
                                            {
                                                header : 'Store Number',
                                                dataIndex : 'storeNumber'
                                            },
                                            {
                                                header : 'RPM Site',
                                                dataIndex : 'rpmsite'
                                            },
                                            {
                                                header : 'Store Name',
                                                dataIndex : 'storeName',
                                                flex : 4,
                                                renderer : function(value, meta,
                                                        record) {
    
                                                    if (record.data.status == 'ERROR'
                                                            || record.data.status == 'Aborted') {
                                                        return Ext.String
                                                                .format(
                                                                        value,
                                                                        record.data.storeNumber,
                                                                        record.data.status,
                                                                        record.data.storeName);
                                                    } else {
    
                                                        return Ext.String
                                                                .format(
                                                                        '<a href="detailedStatus.do?storeInfo={1} - {3}&status={2}">{0}</a>',
                                                                        value,
                                                                        record.data.storeNumber,
                                                                        record.data.status,
                                                                        record.data.storeName);
                                                    }
                                                }
                                            },
                                            {
                                                header : 'Initiated By',
                                                dataIndex : 'user',
                                                flex : 2
                                            },
                                            {
                                                header : 'Start Time',
                                                dataIndex : 'startTime',
                                                flex : 5,
                                                xtype : 'datecolumn',
                                                format : 'Y-m-d h:i A'
                                            },
                                            {
                                                header : 'Status',
                                                dataIndex : 'status',
                                                flex : 3,
                                                renderer : function(value, meta,
                                                        record) {
    
                                                    var css = getStatusPrefix(record.data.statusId)
                                                            + "Label";
    
                                                    if (value == 'ERROR') {
                                                        return Ext.String
                                                                .format(
                                                                        '<span class="{0}">{1}</span>',
                                                                        css,
                                                                        value,
                                                                        record.data.storeNumber);
                                                    } else {
                                                        return Ext.String
                                                                .format(
                                                                        '<span class="{0}">{1}</span>',
                                                                        css, value);
                                                    }
                                                }
                                            }, {
                                                header : 'End Time',
                                                dataIndex : 'endTime',
                                                flex : 6,
                                                xtype : 'datecolumn',
                                                format : 'Y-m-d h:i A'
                                            }, {
                                                flex : 7,
                                                sortable : false
                                            } ],
                                    // paging bar on the bottom
                                    bbar : Ext.create('Ext.PagingToolbar', {
                                        store : mainStatusStore,
                                        displayInfo : true
                                    })
                                });
    
                /**
                 * Get the remaining space of the viewport for the grid height
                 */
                function getGridHeight() {
                    return getRemainingHeight("mainStatusGridPanel", [
                            "mainHeader", "header" ]);
                }
    
                // Have to set the grid height after the widget is created
                // so it can grab the padding values for the grid
                mainStoreStatusGrid.setHeight(getGridHeight());
    
                Ext.EventManager.onWindowResize(function() {
                    mainStoreStatusGrid.setHeight(getGridHeight());
                    mainStoreStatusGrid.forceComponentLayout();
                }, mainStoreStatusGrid);
    
                /*******************************************************************
                 * Search Button
                 ******************************************************************/
                Ext.widget("button", {
                    renderTo : 'searchBtn',
                    text : 'Search',
                    cls : 'srchBtn',
                    // href: 'mainStatus.do',
                    /*
                     * handler: function(){ //window.location="mainStatus.do"; var
                     * searchCustomerJsonData = { StartDate:
                     * startDateField.getValue(), EndDate: endDateField.getValue() };
                     * storeStatusJson = searchCustomerJsonData;
                     * 
                     * //reset back to page 1 //
                     * mainStoreStatusGrid.getStore().currentPage = 1;
                     * mainStatusStore.load({ jsonData: storeStatusJson,
                     * copyFiltersToJson: true, copySortToJson: true }); },
                     */
                    listeners : {
                        click : function() {
                            //    if (validateFn()) {                    
                            var searchCustomerJsonData = {
                                StartDate : startDateField.getValue(),
                                EndDate : endDateField.getValue()
                            };
                            storeStatusJson = searchCustomerJsonData;
    
                            //reset back to page 1
                            //   mainStoreStatusGrid.getStore().currentPage = 1;
                            mainStatusStore.load({
                                jsonData : storeStatusJson,
                                copyFiltersToJson : true,
                                copySortToJson : true
                            });
                        }
                    //    }
                    }
                });
            });

    I passed in limit and start to the dao and I am getting correct values from database. I am having trouble with display on the form. I looked at the params sent to json. My start date is not changing even I change it in the form. Any suggestion is appreciated.

  4. #4
    Sencha User
    Join Date
    Dec 2009
    Location
    Enschede, The Netherlands
    Posts
    327
    Answers
    16
    Vote Rating
    13
    flanders will become famous soon enough

      0  

    Default


    If I get it right (which I'm not sure about) the issue is that when the final handle fires the values for startDate and endDate in your request are not getting updated?

    This is because they are defined as fixed extraParams. I would recommend removing them from there and adding them as filters on the store. This way they will be send to the server and can you can update them using the filter() method on the store. (Don't forget to add id's to the filters to make sure you replace the existing onces)

    Might that be the issue?

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    16
    Vote Rating
    0
    sudhavani is on a distinguished road

      0  

    Default


    Yes. Can you please explain more or give em example of how I cna add filter to the store?

  6. #6
    Sencha User
    Join Date
    Dec 2009
    Location
    Enschede, The Netherlands
    Posts
    327
    Answers
    16
    Vote Rating
    13
    flanders will become famous soon enough

      0  

    Default


    It's all in the documentation:
    http://docs.sencha.com/ext-js/4-1/#!...-method-filter

    If, after reading and trying this, any specific questions remain. Feel free to ask them

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar