how can i call a function inside a content panel's item using extjs4

[mohaskuar]

//this is gird.js
Ext.ns('moha');
Ext.define('moha.cla', {
loadGrid:function(){

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
'text', 'parent_id'
]
});

var store=Ext.create('Ext.data.Store', {
model: 'User',
loadMask: true,
//method: 'GET',
pageSize: 10,
proxy: { type: 'ajax',
url : 'grid.php',

reader: {
type: 'json',
root: 'results',
totalProperty: 'total'
},
actionMethods:'POST'
}
});

var par = new Object();
par['start'] = 0;
par['limit']=5;
store.load({params: par});

var ngrid=Ext.create('Ext.grid.Panel', {

renderTo:'content-panel' ,
store: store,
width: 400,
height: 200,
stripeRows: true,
title: 'Application Users',
columns: [
{
text: 'id',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'id'
},
{
text: 'text',
width: 150,
dataIndex: 'text',
hidden:false
},
{
text: 'parent_id',
flex: 1,
dataIndex: 'parent_id'
}
],

bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})




});

}




});

**//and when i call that function on grid2.js it works fine.. using this code**

Ext.onReady(function () {
var f = Ext.create('moha.cla', 'f');
f.loadGrid();
});

**but my problem occurs when i want to use the above way inside a content panel's item like this...in grid3.js**

var f = Ext.create('moha.cla', 'f');
//var g= f.loadGrid();

var contentPanel = {

id: 'content-panel',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
items:[
{

title:'load griiid here',
itemId:1
},
f.loadGrid(),//everything works fine if i comment out this line

{

xtype:'tabpanel',
title:'tab panel three',
html:'this is tab panel three',
itemId:3
}
],
border: true,

}

[Boston]

HI!

did you try to add an listener?



[your code ...]
listeners:{
[EVENT]:{
fn: function(){
f.loadGrid()
}
}
}
[your code...]

[mohaskuar]

i tried it like this...
var f = Ext.create('moha.cla', 'f');

var contentPanel = {
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,

items:[
{
title:'load griiid here',
itemId:1
},

{
listeners:{
itemclick:{
fn: function(){

f.loadGrid();
}
}
}

},
{}]}

but am not sure that its possible to add a listener inside items.

[Boston]

As your code is not readable good (because \
\[/CODE\] tags are not used) I'm not sure but for me it looks like as if your listener is outside of the item.

May be that this works:

[CODE]
items:[{
title: 'load grid here',
itemId: 1,
listener:{
itemClick:{
fn: function(){
f.loadGrid();
}
}
}

}]

[mohaskuar]

and i will make my code readable ...

[Boston]

Hi!

In one of my projects this works in a tab panel:



var foobar = Ext.create('Ext.tab.Panel', {
id : 'foba',
title : "My Tab Panel Title ",
listeners:{
show:{
fn: function(a){
otherGrid.show();
}
}
},
autoRender : true,
hidden : true,
layout : 'fit',
items : [{
title : 'My title',
id : 'tab1',
items : [grid1],
listeners : {
beforeactivate : {
fn : function() {
fMyFunction('FOO');
}
},
}
}, {
[...]


BTW: are you sure, that there exists an itemClick event for this xtype? I can't find it here:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tab.Panel

[scottmartin]

See if this will help:



Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody(),
listeners: {
afterlayout: function() {
console.log('afterlayout');
},
el: {
click: function() {
alert('123');
}
}
}
});​


Scott.

[mohaskuar]

@boston you were right about the event (itemClick)...the listener works for me after a changed the event to ..activate. but not like as i wanted it..... when a navigation from west is clicked...the grid pushes the view port down and loades on top on every click. what shal i do now...any help please

37212
{
xtype:'panel',
title: 'load grid here',
itemId: 2,
listeners:{
activate:{

fn:function() {

f.loadGrid();

}

}

}