PDA

View Full Version : 2 Grids being created instead of 1


Rajat Sharma
1 Dec 2011, 8:41 PM
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.



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:



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 ?
tvanzoelen
2 Dec 2011, 4:07 AM
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.
Rajat Sharma
2 Dec 2011, 4:50 AM
Hi

Yes. Thanks for the diagnosis. Indeed it seems to be the problem. In addition to the Ext JS event handler, I have:


<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.


<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.
Rajat Sharma
2 Dec 2011, 5:06 AM
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.


A:active {color: #535353; text-decoration:none}
A:visited {color: #535353; text-decoration:none}
A:hover {color: #0ca1e6; text-decoration:underline;}
tvanzoelen
2 Dec 2011, 5:18 AM
If you only want to use ExtJs, why not using only Ext components like a button/menuitem instead of a a href link?
Rajat Sharma
2 Dec 2011, 5:30 AM
Hmm...true...will look into it. Eventually, I have to use the richness offered if anything serious has to be developed. Thanks.