1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    56
    Vote Rating
    1
    Bob Wilson is on a distinguished road

      0  

    Default Answered: proxy param start doesn't work

    Answered: proxy param start doesn't work


    Hi all,

    I'm trying to change the "start" param of my Ajax proxy, but nothing is changed when I check the Chrome Network Debugger.

    Here is the simple piece of code :

    Code:
    jsonReader = Ext.create('Ext.data.reader.Json', { 
    	id: 'id',
    	root: 'viewentry', 
    	totalProperty: '@toplevelentries',
    	fields:
    	[
    		{name:'@position',		mapping:'@position'},
    		{name:'@unid', 			mapping:'@unid'},
    		{name:'@description',	mapping:'entrydata[0].text[0]'}
    	] 
    }); 
       
    var proxy = Ext.create('Ext.data.proxy.Ajax', {
    	url: 'http://192.168.1.2/iCore.nsf/lookupResourcesByName?ReadViewEntries&outputformat=JSON',
    	start: 1,
    	reader: jsonReader
    });
                    
    myDataStore = Ext.create('Ext.data.Store', { 
    	proxy: proxy,		
    	fields: ['@position', '@unid', '@description'],
    	autoLoad: true
    });
    console.log(myDataStore);
    Whatever the start param I put, Chrome show me this request, with a start : 0
    Code:
    • ReadViewEntries:
    • outputformat: JSON
    • _dc: 1340292354962
    • page: 1
    • start: 0
    • limitIndex: 25
    Is it a bug ?

  2. I don't believe that Ajax proxy has a start config option.

    The start parameter is part of the paging mechanism of the store and is mapped to the configured startParam in the proxy. Do a quick search for start in this file to see how it works:

    http://docs.sencha.com/ext-js/4-1/so...a-proxy-Server

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    Answers
    545
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I don't believe that Ajax proxy has a start config option.

    The start parameter is part of the paging mechanism of the store and is mapped to the configured startParam in the proxy. Do a quick search for start in this file to see how it works:

    http://docs.sencha.com/ext-js/4-1/so...a-proxy-Server

  4. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    56
    Vote Rating
    1
    Bob Wilson is on a distinguished road

      0  

    Default LOTUS DOMINO VIEW to EXT 4.1 GRID with JSON

    LOTUS DOMINO VIEW to EXT 4.1 GRID with JSON


    This is the mistake ! Thank you !!!
    There is only a startParam, which is, in fact, not the same at all...

    As a lot of people helped me on this forum, here is my small contribution, with a minimal working example to demonstrate how to use IBM LOTUS DOMINO VIEWS to fill EXTJS 4.1 GRIDS.

    You can find some info on the forums, but nothing really 'packaged', and often with deprecated methods of Ext3 (and previous versions...)

    I hope it will save a lot of time to people like me that got a headacke with those field mapping rules and this ***** start param (I finally found the answer in a very old post of Jack Slocum. Thank you Jack) :

    Code:
    // DOMINO VIEW to EXT GRID
    //
    // The minimal example using json and readviewentries
    // Use the following URL syntax to output your view :
    // http://domain/database/view?ReadViewEntries&outputformat=JSON
    
    
    var proxy = Ext.create('Ext.data.proxy.Ajax', {
        url: './lookupResourcesText?ReadViewEntries&outputformat=JSON', // Your view
        startParam: 'start',
        limitParam: 'count', // Map Domino limit parameter
        reader: {
            type: 'json',
            root: 'viewentry',
            totalProperty: '@toplevelentries'            
        }
    });
                 
    myDataStore = Ext.create('Ext.data.Store', { 
        proxy: proxy,    
        fields: [
            // Retrieve position in the view
            {name: 'a', mapping: '@position'},
            
            // Retrieve document unid for further processing
            {name: 'b', mapping: '@unid'},
            
            // retrieve column 0 data.
            // Use entrydata[1].text[0] to retrieve column 1, and so on...
            {name: 'c', mapping: 'entrydata[0].text[0]'}
        ],
    });
     
    var grid = Ext.create('Ext.grid.GridPanel', { 
        renderTo:'example',
        store:myDataStore, 
        columns:[ 
            // For the columns data, use the field names as defined in the proxy
            // For the example, I've used a, b, c...
            {header: "id", width: 100, sortable:'true', resizable: false, dataIndex: 'a'},
            {header: "name", width: 220, resizable: false, dataIndex: 'b'},
            {header: "description", width: 220, resizable: false, dataIndex: 'c'}
        ],
        bbar:[
            {
                text: 'Load data',
                scale: 'large',
                handler: function() {
                    
                    myDataStore.load({
                        scope: this,
     
                        // !!! BE CAREFUL, start param is 1-based
                        // ...and NOT 0-based !!!
                        // A start param with 0 will NOT return any document
                        start: 1,
    
    
                        // Retrieve only 20 documents
                        limit: 20,
                        
                        callback: function(records, operation, success) {
                            // Do something brilliant here
                        }                    
                    });
    
    
                }
            }
        ]
    });
    Enjoy !
    Last edited by Bob Wilson; 21 Jun 2012 at 8:35 PM. Reason: Tabulations adjustments

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    Answers
    545
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Passing the start parameter into the load call is a bit fragile. Personally I would subclass the proxy and make the necessary overrides in there to tweak the request parameters based on the operation. That way paging will work reliably no matter how the requests are initiated.

  6. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    56
    Vote Rating
    1
    Bob Wilson is on a distinguished road

      0  

    Default Thanks for the advice

    Thanks for the advice


    I've tried this but my ExtJS level is too low to handle things correctly.

    In a previous try, I've indirect my code as you suggest with a Ext.data.Operation object, but, when I've called the operation with the proxy.read(myOperation) method, the grid didn't update as it does when I'm using the store.load method.

    I'm sure it's possible to do as you said, but I didn't find how to update my grid once the poxy.read is finished.

    Any advice ?

  7. #6
    Sencha User
    Join Date
    Sep 2010
    Posts
    56
    Vote Rating
    1
    Bob Wilson is on a distinguished road

      0  

    Default OK, got it !

    OK, got it !


    After a few catch & tries, I've seen that I don't need to call proxy.read(operation).
    I can directly use the store.load(operation) and that's it.

  8. #7
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    Answers
    41
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    Quote Originally Posted by Bob Wilson View Post
    After a few catch & tries, I've seen that I don't need to call proxy.read(operation). I can directly use the store.load(operation) and that's it.
    Does your previous sample reflect your latest findings? Thanks!

  9. #8
    Sencha User
    Join Date
    Sep 2010
    Posts
    56
    Vote Rating
    1
    Bob Wilson is on a distinguished road

      1  

    Default Here is the last version of my code

    Here is the last version of my code


    No, I didn't update my example, but as you ask, here his my last work. It could be useful for some people.

    I've built a reusable function to build a JsonStore from any notes view.
    The column model is fairly (too) simple at the moment, but I don't have time to dig more for now.
    I'm still praying everyday that Jack releases a great Ext.ND view using Ext 4.1 and fast JSON (instead of XML agent conversion), with search features, paging, sorting, grouping...

    To retrieve data within grids, just use 'c1' for view column 1, 'c2' for column 2, and so on.
    Use 'unid' to retrieve the document unique id.

    Here is the function that builds my store.
    Feel free to comment, and criticize also.

    Code:
    /**
     * Build a json store from a domino view
     *
     * @param {String} targetView : The url of the target view
     * @param {Integer} start : The start index to retrieve data
     * @param {Integer} limit : The number of documents that should be returned
     * @param {String} restricToCategory : The category to filter if required. Set it to null if not needed.
     * @param {Integer} columns : The number of columns to extract from the view 
     * 
     * @return {Ext.data.JsonStore} A JSON store containing the view entries, directly usable in Ext grids
     *
     * TODO :
     * Use DXL to build the column model automatically...
     * Columns model is currently static, with :
     * - a column 'unid'
     * - N columns named 'c1' to 'cn', where n is the columns parameter
     */
    function buildStore(targetView, start, limit, restrictToCategory, columns)
    {
    	
    	url = targetView + "?ReadViewEntries&outputformat=JSON";
    	if (restrictToCategory != null) url = url + '&restrictToCategory=' + restrictToCategory;
    	
    	var columnsModel = [];
    	columnsModel[0] = {name: 'unid', mapping: '@unid'};
    	for (i = 1; i <= columns; i++)
    	{
    		newCol = {name: 'c'+i.toString(), mapping: 'entrydata[' + (i-1).toString() + '].text[0]'};
    		columnsModel.push(newCol);
    	}
    	
    	var model = Ext.define('Ext.document',
    	{
    		extend: 'Ext.data.Model',
    		fields: columnsModel		
    	})
    	
    	var proxy = Ext.create('Ext.data.proxy.Ajax', {
    		url: url,
    		startParam: 'start',
    		limitParam: 'count',
    		reader: {
    			type: 'json',
    			root: 'viewentry',
    			totalProperty: '@toplevelentries'			
    		}
    	});
    	
    	newStore = Ext.create('Ext.data.Store', { 
    		proxy: proxy,
    		model: model
    	});
    	
    	var operation = Ext.create('Ext.data.Operation', {
    		action: 'read',
    		start: start,
    		limit : limit
    	});
    	
    	newStore.load(operation);
    	return newStore;
    }

    And here is a grid example using this function.
    I've added useful examples like :
    - creating an action column to manipulate the document (edit, delete, etc...)
    - handle the doubleclick on row
    - setting a special CSS class on a row according to a column value (this one asked me a lot of time to figure out)

    Enjoy :-)

    Code:
    myViewStore = buildStore('../lookupFormItems', 1, 1000, null, 5);
    
    
    var fieldList = Ext.create('Ext.grid.GridPanel', {
    	store: myViewStore,
    	renderTo: Ext.getBody(),
    
    
    	columns:[
    		{
    			// Example of how to create an action button to edit the document
    			xtype: 'actioncolumn',
    			sortable: false,
    			resizable: false,
    			width: 50,
    			items: [
    			{
    				icon: '../ICON_32x32_Edit.png',
    				handler: function(grid, rowIndex, colIndex)
    				{
    					var rec = grid.getStore().getAt(rowIndex);
    					var unid = rec.get('unid');
    					var url = '../0/' + unid + '?editdocument'; 
    					document.location = url;
    				}
    			}]
    		},
    		{header: "UNID", flex: 1, dataIndex: 'unid'},
    		{header: "Column 1", flex: 1, dataIndex: 'c1'},
    		{header: "Column 2", flex: 1, dataIndex: 'c2'},
    	],
    
    
    	viewConfig: {
    		// Example of how to use a column content to highlight a grid row
    		// In the example below, we colorize the row with the CSS class 'RED' if the value of column 1 = 'URGENT'
    		getRowClass: function(record, index) {
    			var c = record.get('c1');
    			if (c == 'URGENT') return 'RED';
    		},
    		
    		// Example of how to handle doubleclick on a row.
    		// In this example, it opens the clicked document in edit mode.
    		listeners: {
    			'itemdblclick': function(view, rec, node, index, e, options ) {
    				var unid = rec.get('unid');
    				var url = '../0/' + unid + '?editdocument'; 
    				document.location = url;
    			}	    
    		}
    	},
    });

  10. #9
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    Answers
    41
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    Thanks a lot!! I'll give it a try a.s.a.p.!

  11. #10
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    Answers
    41
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    @Bob: your sample helped me a lot to get a working sample of accessing our domino server. As I like the MVC approach very much, I baked the code into an MVC app. Also I wanted to use paging (as domino does this very well with ReadViewEntries). Whilst implementing the ext paging toolbar I noticed two things:
    1. clicking the FIRST PAGE button of the toolbar uses (again) a ZERO based START option... (already did a feature request to optimize that). So I had to override the loadPage() method of the store to correct this.
    2. the paging toolbar uses the pageSize of the store for paging. So setting this in my store once will use it for the store load AND the paging.
    Thanks again for your efforts!