PDA

View Full Version : How to load content dynamically for tabpanel



sdd0
18 Jul 2013, 9:52 PM
Hi,

I want to use the tree panel(region:'west') to link to a tab panel(region:'center'), each tab panel loads the content when the tab changes. The result is as below:-/, it seems that the panel did not be rendered to content area, it seems that the response text is just posted on the tabpanel!

Could anyone please help me to figure out what my problem is?

44943

when one item of tree panel is selected, the controller of tree panel will load a store, the store decides what pages should be added in tabpanel, initialy, I only add tab title:


Ext.define('zldapp.controller.Treepanel.Treepanel', {
extend: 'Ext.app.Controller',

stores: [ 'Treepanel.Treepanel',
'Treepanel.TreeMonitor',
'Treepanel.TreeConfiguration',
'Treepanel.TreeMaintenance',
'Treepanel.TreeDashboard',
'Common.JsonStore'],
models:['Zytab.Zytab'],

init: function() {
var myheader = this.header;
this.control({
'treepanel > zytreepanel': {
select: this.onPanelSelect
}
});
},

onPanelSelect: function(selModel, record) {
if (record.get('leaf')) { //it's a leaf
var url = './data/Zytab/'+record.getId()+".json";//We know what tabs need to be added.
var model = 'zldapp.model.Zytab.Zytab';
var root = 'tabs';
var storeId = 'tabstore';

var store = Ext.create('zldapp.store.Common.JsonStore', {
model: model,
proxy: {
type: 'ajax',
url: url,
reader: {
root: root
}
}
});
store.load({// add all tabs
callback: function() {
var contentPanel = Ext.ComponentQuery.query('viewport > panel[region="center"]');
var tabs = Ext.create('widget.zytab');
var i=0;
store.each(function(rec){
var url = rec.get('url');
var name = rec.get('name');
var id = rec.get('id');

tabs.add({
// we use the tabs.items property to get the length of current items/tabs
title: name,
id:id,
autoload:i==0? true: false,
loader:{
url: url,
scripts: true

}
});
i++;
});
contentPanel[0].removeAll();
contentPanel[0].add(tabs);
contentPanel[0].doLayout();

}
});
}
}
});


this is the code of tabpanel, when tabchange event occurs, it loads content dynamically



Ext.define('zldapp.controller.Common.Zytab', {
extend: 'Ext.app.Controller',
views:['Zytab.Zytab'],

init: function() {
this.control({
'zytab': {
//beforerender: this.loadStore
tabchange:this.onTabchange
}
});
},
loadStore: function() {

},
onTabchange: function (tabpanel, tab) {
//var tabs = Ext.ComponentQuery.query('viewport > #zytabpanel');
//vpnconnection = Ext.create('widget.vpnconnection');
tab.loader.load();
}
});



The final code is the page which should be loaded dynamically to the tabpanel.



Ext.define('zldapp.view.VPN.Connection', {
alias: 'widget.vpnconnection',
extend: 'Ext.Panel',
views:['Zytab.Zytab'],

initComponent: function() {

Ext.apply(this, {
layoutOnTabChange:true,
autoload:true,
header:false,
activeTab: 0,//for tab
id: 'vpnconnection',
region: 'center', // this is what makes this panel into a region within the containing layout
border: false,
renderTo: 'zytabpanel' ,
items: [{
html: 'VPN Connection says go, Im loaded from loader'
}]
});

this.callParent(arguments);
}

});
Ext.onReady(function(){
/*var contentPanel = Ext.ComponentQuery.query('viewport > panel[region="center"]');
var tabs = Ext.ComponentQuery.query('viewport > #zytabpanel'); */
vpnconnection = Ext.create('widget.vpnconnection');
vpnconnection.render('zytabpanel');
});

slemmon
24 Jul 2013, 1:34 PM
The scripts: true config will execute scripts located in <script> tags. It looks like the response doesn't have the javascript / ExtJS wrapped in <script> tags.

Also, the code wrapped in the onReady listener won't run I don't believe. It's listening for the browser's ready event and that will have fired long before this loader runs.

sdd0
29 Jul 2013, 8:36 AM
According to your reply, I added a debugger into the page which I want to use the loader to load, I added in the onReady function to make sure if it is executed or not, I found an error message there:

Uncaught TypeError: Cannot read property 'scope' of undefined
ext-all-debug.js:35662


This error occurs in the function onComplete of Ext.ElementLoader, it seems to execute onComplete twice, in the first time, 'scope' has value, but the second time, 'scope' is undefined so it causes the error, but I don't know why it execute twice, do you have any idea? Is there any wrong design in my pages?

Thank you!

[the first onComplete]:

45091

[the second onComplete]:

45092

slemmon
30 Jul 2013, 10:49 AM
I would recommend setting your "Ext.defined"ed script in a class file and have it loaded by your controller so that when "zldapp.view.VPN.Connection" is needed as an instance (or especially views needed to be loaded just in time by the Loader) then you can just pass down configs for the view in the Loader response, not the Ext.define() which defines the class in the first place.

sdd0
31 Jul 2013, 2:20 AM
just pass down configs for the view in the Loader response. its a new direction! I will try it, although I still could not figure out how to do immediately. Thanks.


I found an example by the keyword 'loader response', it would be something like below, right?
http://ext4all.com/post/panel-with-component-loader

slemmon
31 Jul 2013, 12:53 PM
Your renderer on the Loader will normally be 'component'.

Here's an very simple example:

Client Code:


Ext.widget('tabpanel', {
renderTo: document.body,
height: 300,
weidth: 300,
items: [{
title: 'First Tab'
}, {
title: 'Second Tab',
layout: 'fit',
loader: {
url: 'data/json.json',
autoLoad: true,
renderer: 'component'
}
}]
});


Server response from data/json.json


{
"xtype": "form",
"border": "false",
"items": [{
"xtype": "textfield"
}]
}

sdd0
1 Aug 2013, 2:03 AM
It works:)):)):)) Thank you for your great help!

Finally I let treepanel code as below:



Ext.define('zldapp.controller.Treepanel.Treepanel', {
extend: 'Ext.app.Controller',

stores: [ 'Treepanel.Treepanel',
'Treepanel.TreeMonitor',
'Treepanel.TreeConfiguration',
'Treepanel.TreeMaintenance',
'Treepanel.TreeDashboard',
'Common.JsonStore'],


models:['Zytab.Zytab'],

init: function() {
var myheader = this.header;
this.control({
'treepanel > zytreepanel': {
select: this.onPanelSelect
}
});
},

onPanelSelect: function(selModel, record) {
if (record.get('leaf')) { //it's a leaf
var url = './data/Zytab/'+record.getId()+".json";//We know what tabs need to be added.
var model = 'zldapp.model.Zytab.Zytab';
var root = 'tabs';
var storeId = 'tabstore';

var store = Ext.create('zldapp.store.Common.JsonStore', {
model: model,
proxy: {
type: 'ajax',
url: url,
reader: {
root: root
}
}
});


store.load({// add all tabs
callback: function() {


var contentPanel = Ext.ComponentQuery.query('viewport > panel[region="center"]');
var tabs = Ext.create('widget.zytab');
var i=0;
store.each(function(rec){
var url = rec.get('url');
var name = rec.get('name');
var id = rec.get('id');

tabs.add({
// we use the tabs.items property to get the length of current items/tabs
title: name,
id:id,
loader:{
url: 'data/Form.json',
autoLoad: true,
renderer: 'component'
}
});
i++;


});
contentPanel[0].removeAll();
contentPanel[0].add(tabs);
contentPanel[0].doLayout();

}
});
}
}
});


and add "removeAll" for clearing the previous tabpanel.



Ext.define('zldapp.controller.Common.Zytab', {
extend: 'Ext.app.Controller',
views:['Zytab.Zytab'],

init: function() {
debugger;
this.control({
'zytab': {
//beforerender: this.loadStore
tabchange:this.onTabchange
}
});
},
onTabchange: function (tabpanel, tab) {
//var tabs = Ext.ComponentQuery.query('viewport > #zytabpanel');
//vpnconnection = Ext.create('widget.vpnconnection');
tab.removeAll();
tab.loader.load();
}

});


My page in form.json is as below



{
xtype: "form",
labelWidth:160,
items: [
{
xtype: 'textfield',
fieldLabel: "User Name",
value: "aaa"
},
{
xtype: "textfield",
fieldLabel:"License Status",
value: "expired"
},
{
xtype: "textfield",
fieldLabel: "License Type",
value: "Golden"
}]
}


But I met a problem, why do all labels disappear? I have set the form width, the label width, and set tabpanel default layout as fit, but they don't work, when I collapse the tree panel, it appears. Do you have any idea?
[no label]
45156


[labels appear when you collapse the tree panel]

45157

slemmon
2 Aug 2013, 9:56 AM
I'm not sure. I wasn't able to reproduce the issue in 4.2.1 with the test case below:

Client code


Ext.widget('panel', {
renderTo: document.body,
height: 300,
width: 500,
layout: 'border',
items: [{
title: 'West',
region: 'west',
width: 200,
collapsible: true
}, {
xtype: 'tabpanel',
region: 'center',
items: [{
title: 'First Tab'
}, {
title: 'Second Tab',
layout: 'fit',
loader: {
url: 'data/json.json',
autoLoad: true,
renderer: 'component'
}
}]
}]
});


Loader response:


{
xtype: "form",
labelWidth: 160,
items: [{
xtype: 'textfield',
fieldLabel: "User Name",
value: "aaa"
}, {
xtype: "textfield",
fieldLabel: "License Status",
value: "expired"
}, {
xtype: "textfield",
fieldLabel: "License Type",
value: "Golden"
}]
}