Results 1 to 6 of 6

Thread: 2 Grids being created instead of 1

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    83
    Answers
    1

    Default Answered: 2 Grids being created instead of 1

    Hi.

    Upon click of a hyperlink, a grid gets created on the screen and loads data from server. Since it is one of my basic examples, i put everything in Ext.onReady.

    Code:
    Ext.onReady(function() {
    	var getUserList = function(){
        var userStore = Ext.create('Ext.data.Store', {
            model: 'User',
            pageSize: 15,
            proxy: {
            	type: 'ajax',
            	url : 'ActionServlet?task=userList',
            	reader: {
                	type: 'json',
                	model: 'User',
                	totalProperty  : 'total',
                	successProperty: 'success',
                	root: 'data'
            	}
        	}
        });
    
    
        	Ext.create('Ext.grid.Panel', {
            	renderTo: Ext.getBody(),
            	store: userStore,
            	width: 400,
            	height: 400,
            	title: 'Users',
            	columns: [
                	{
                    	text: 'Name',
                    	width: 100,
                    	sortable: true,
                    	hideable: false,
                    	dataIndex: 'name'
                	}
            	],
            	dockedItems: [{
            	xtype: 'pagingtoolbar',
            	store: userStore,   // same store GridPanel is using
            	dock: 'bottom',
            	displayInfo: true
        	}]
        });
        userStore.load({
       		params: {
            	// specify params for the first page load if using paging
            	start: 0,
            	limit: 15
       	 	}
    		});
    	};
    
    
    	//var myDiv = Ext.get('main');
    	Ext.get('userLink').on('click', getUserList);
    });
    This works perfectly fine. After that I took the getUserList function out of onReady. i,e:

    Code:
    var getUserList = function(){
    // entire grid creation and loading.
    }
    Ext.onReady(function() {	Ext.get('userLink').on('click', getUserList);
    });
    Now upon click of the very same hyperlink, there are two grids created, vertically. I am not conceptually clear with Ext js. Is there anything I need to know w.r.t onReady function. Why 2 grids ?

  2. Then you have two handlers getUserList() on the onCLick event of userLink.

    Can you post the Html element userLink?


    If you have in your code two times a command like this Ext.get('userLink').on('click', getUserList);
    getUserList will be triggered twice.

    The same if you defined the onlick event on the HtmlElement and and again with a statement like on('click', .....)

    There must be a double handler with a call to getUserList somewhere in your code.

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    Then you have two handlers getUserList() on the onCLick event of userLink.

    Can you post the Html element userLink?


    If you have in your code two times a command like this Ext.get('userLink').on('click', getUserList);
    getUserList will be triggered twice.

    The same if you defined the onlick event on the HtmlElement and and again with a statement like on('click', .....)

    There must be a double handler with a call to getUserList somewhere in your code.

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    83
    Answers
    1

    Default

    Hi

    Yes. Thanks for the diagnosis. Indeed it seems to be the problem. In addition to the Ext JS event handler, I have:
    Code:
    <a href ="javascript:getUserList()" id="userLink" style="font-size:15px; padding-left:20px">Distinct Users</a>
    Do I remove href attribute. I have never seen an anchor tag (for all my limited knowledge) without an href. I did remove it and now there is only one grid on display.
    Code:
    <a  id="userLink" style="font-size:15px; padding-left:20px">Distinct Users</a>
    // without the href attribute.
    Is this the correct approach to solve this problem ? After removing it I find all the css absent. It does not behave as a link - no underlining on mouse hover, no color change, none of that. It does get clicked and display the result but that is very unintuitive.

  5. #4
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    83
    Answers
    1

    Default

    One of the workaround (that works is) commenting the Ext.get(<html element>).on and letting href in anchor tag remain. But I want to use Ext, since i am learning that.
    Basically, the problem seems to be no effect of the following css if href is absent.
    Code:
            A:active {color: #535353; text-decoration:none}
    	A:visited {color: #535353; text-decoration:none}
    	A:hover {color: #0ca1e6; text-decoration:underline;}

  6. #5
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    If you only want to use ExtJs, why not using only Ext components like a button/menuitem instead of a a href link?

  7. #6
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    83
    Answers
    1

    Default

    Hmm...true...will look into it. Eventually, I have to use the richness offered if anything serious has to be developed. Thanks.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •