StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POGridPanel as item of tabPanel
text
Body
copied!<p>I'm having trouble knowing if I syntactically have this setup right. From another <a href="https://stackoverflow.com/questions/6424785/grid-inside-tab">thread</a>, I understand to add the GridPanel to the tabBar items, which I do so below. In my App.js, I define a grid copied from the ExtJS example (<a href="http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.Component" rel="nofollow noreferrer">here</a>).</p> <pre><code>var grid = new Ext.grid.GridPanel({ // Details can be seen at // http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.Component?class=Ext.grid.GridPanel }); </code></pre> <p>Below that, I create an instance of my app:</p> <pre><code>appname.App = Ext.extend(Ext.TabPanel, { fullscreen: true, tabBar: { ui: 'gray', dock: 'bottom', layout: { pack: 'center' } }, cardSwitchAnimation: false, initComponent: function() { if (navigator.onLine) { // Add items to the tabPanel this.items = [{ title: 'Tab 1', iconCls: 'tab1', xtype: 'tab1', pages: this.accountPages }, { title: 'Tab 2', iconCls: 'tab2', xtype: 'tab2', pages: this.accountPages }, grid]; } else { this.on('render', function(){ this.el.mask('No internet connection.'); }, this); } appname.App.superclass.initComponent.call(this); } }); </code></pre> <p>The app normally loads just fine, but with the addition of <code>grid</code>, it breaks and nothing loads.</p> <p>Syntactically, should I be defining grid inside the app instantiation like A) <code>grid: ...</code>, B) <code>this.grid = new ...</code>, or C) as I have it as a regular <code>var</code> named <code>grid</code>?</p> <p>Many thanks.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload