-
29 Feb 2012 10:35 PM #1
Answered: missing contentEl by using the Sencha Touch 2.0 RC2
Answered: missing contentEl by using the Sencha Touch 2.0 RC2
Well ...
Sencha touch 2.0 rc2 version in use.
What I want you sencha touch rc2 version of the base frame, and use
The content is written in html.
Tabpanel now generate a 5, but does not work properly.
Had some problems.
contentEl: 'show-div' option in the html element you can not scroll.
So, in the panel scrollable: true option,
does not show the contents of the div.
Is a bug?
Below is the html configuration.
index.html
Code:<div id="content1"> / / HTML content into the configuration .. content1 </div> <div id="content2"> / / HTML content into the configuration .. content2 </div> <div id="content3"> / / HTML content into the configuration .. content3 </div> <div id="content4"> / / HTML content into the configuration .. content4 </div> <div id="content5"> / / HTML content into the configuration .. content5 </div>
Code:index.tabpanel = Ext.create ('Ext.tab.Panel', { fullscreen: true, id: 'index_view', tabBarPosition: 'bottom', scrollable: true, items: [ { iconCls: 'star', title: 'region', items: [ index.toolbar [0], { xtype: 'panel', id: 'content1u', styleHtmlContent: true, contentEl: 'content1', } ] }, { iconCls: 'team', title: 'by party', items: [ index.toolbar [1], { xtype: 'panel', id: 'content2u', styleHtmlContent: true, contentEl: 'content2' } ] }, { iconCls: 'search', title: 'Election Schedule' items: [ index.toolbar [2], { xtype: 'panel', id: 'content3u', styleHtmlContent: true, contentEl: 'content3' } ] }, { iconCls: 'download', title: 'News', items: [ index.toolbar [3], { xtype: 'panel', id: 'content4u', styleHtmlContent: true, contentEl: 'content4' } ] }, { iconCls: 'info', title: 'About', items: [ index.toolbar [4], { xtype: 'panel', id: 'content5u', styleHtmlContent: true, contentEl: 'content5' } ] } ] });Last edited by mitchellsimoens; 1 Mar 2012 at 6:22 AM. Reason: fix HTML to be valid
-
Best Answer Posted by mitchellsimoens
Try this tabpanel:
I did a couple things. First I put the contentEl on the direct child of the tabpanel as you didn't need to nest a panel within to accomplish this. Also added some static toolbars as I didn't have anything for the index.toolbar array.Code:var tabpanel = Ext.create ('Ext.tab.Panel', { fullscreen : true, tabBarPosition : 'bottom', defaults : { scrollable : true, styleHtmlContent : true }, items : [ { iconCls : 'star', title : 'region', contentEl : 'content1', items : [ { xtype : 'toolbar', docked : 'top' } ] }, { iconCls : 'team', title : 'by party', contentEl : 'content2', items : [ { xtype : 'toolbar', docked : 'top' } ] }, { iconCls : 'search', title : 'Election Schedule', contentEl : 'content3', items : [ { xtype : 'toolbar', docked : 'top' } ] }, { iconCls : 'download', title : 'News', contentEl : 'content4', items : [ { xtype : 'toolbar', docked : 'top' } ] }, { iconCls : 'info', title : 'About', contentEl : 'content5', items : [ { xtype : 'toolbar', docked : 'top' } ] } ] });
-
1 Mar 2012 6:31 AM #2Sencha - Senior Forum Manager
- Join Date
- Mar 2007
- Location
- St. Louis, MO
- Posts
- 33,641
- Vote Rating
- 434
- Answers
- 3107
Try this tabpanel:
I did a couple things. First I put the contentEl on the direct child of the tabpanel as you didn't need to nest a panel within to accomplish this. Also added some static toolbars as I didn't have anything for the index.toolbar array.Code:var tabpanel = Ext.create ('Ext.tab.Panel', { fullscreen : true, tabBarPosition : 'bottom', defaults : { scrollable : true, styleHtmlContent : true }, items : [ { iconCls : 'star', title : 'region', contentEl : 'content1', items : [ { xtype : 'toolbar', docked : 'top' } ] }, { iconCls : 'team', title : 'by party', contentEl : 'content2', items : [ { xtype : 'toolbar', docked : 'top' } ] }, { iconCls : 'search', title : 'Election Schedule', contentEl : 'content3', items : [ { xtype : 'toolbar', docked : 'top' } ] }, { iconCls : 'download', title : 'News', contentEl : 'content4', items : [ { xtype : 'toolbar', docked : 'top' } ] }, { iconCls : 'info', title : 'About', contentEl : 'content5', items : [ { xtype : 'toolbar', docked : 'top' } ] } ] });Mitchell Simoens @SenchaMitch
Sencha Inc, Senior Forum Manager
________________
http://www.JSONPLint.com - Source to lint your JSONP!
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
https://github.com/mitchellsimoens
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services services@sencha.com
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is almost in print!
When posting code, please use BBCode's CODE tags.
-
1 Mar 2012 11:19 AM #3
thank you.
thank you.
Thank you.
With the help of you were able to solve the problem.


Reply With Quote