GridPanel as item of tabPanel - javascript

I'm having trouble knowing if I syntactically have this setup right. From another thread, 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 (here).
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
});
Below that, I create an instance of my app:
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);
}
});
The app normally loads just fine, but with the addition of grid, it breaks and nothing loads.
Syntactically, should I be defining grid inside the app instantiation like A) grid: ..., B) this.grid = new ..., or C) as I have it as a regular var named grid?
Many thanks.

There is no inbuilt GridPanel comes with Sencha Touch. So, that Ext.grid.GridPanel will not work here. However, you can use Simoen's TouchGrid extension from here.
All the source codes are available here.

Related

ExtJS Can I use an IF statement inside the same component

I'm managing a software with a framework ExtJS 3.3.1.
My problem is that I want to use a component depending by the caller.
I have a region of a tabpanel and I want to use this pseudo-code:
items: [{
region: 'center',
title: 'List of Transmissions',
// PSEUDO CODE START
IF (RECEIVE A CALLER BY THIS COMPONENT) {
id: 'idTab1'
xtype: 'typeA'
}
ELSE IF(RECEIVE A CALLER BY THIS COMPONENT) {
id: 'idTab2'
xtype: 'typeB'
}
// PSEUDO CODE END
}]
Could someone help me to translate it in ExtJS 3.3.1 ?
Thank you
You can used binding function for hide/show typeA and typeB with a caller variable.
You can used afterrender or boxready listener for create you'r cmp after the load of the parent panel.
I can't create fiddle cause i don't have forum sencha account yet but you can tried with this code on this https://fiddle.sencha.com/ :
var callerVar = false;
new Ext.Panel({
renderTo: document.body,
items: [
{
xtype: 'panel',
html: 'firstPanel',
hidden: callerVar
},
{
xtype: 'panel',
html: 'scndPanel',
hidden: !callerVar
}
]
});
You to decide how to update callerVar, i don't how you want to do this.
Thanks to Enzo BLACHON and his idea.
I'm trying to solve using the layout:'card' and add/remove the ID. According to me even if it solve my problem, it's too compicated, I would like to ask if there is a manner less complicated and more useful to improve the quality of the code:
id: 'flip_ID',
region: 'center',
layout: 'card',
activeItem: 0,
items: [
{
itemId: 'idTab1',
xtype: 'typeA'
},
{
itemId: 'idTab2',
xtype: 'typeB'
}]
When there is a call to the first component I added this code:
var center = Ext.getCmp('flip_ID');
center.add(Ext.ComponentMgr.create({
itemId: 'idTab1',
xtype: 'typeA'
}));
center.getLayout().setActiveItem('idTab1');
center.remove('idTab2', true);
When there is a call to the second component I added this code:
var center = Ext.getCmp('flip_ID');
center.add(Ext.ComponentMgr.create({
itemId: 'idTab2',
xtype: 'typeB'
}));
center.getLayout().setActiveItem('idTab2');
center.remove('idTab1', true);

How can I handle the exception "cannot call method getRange of null" in ExtJs?

I've searched the net for answer but didn't find anything. Hope you can help.
So I am relativly new to extJs. I have a navigation bar on the left. When I press the first button there, a new window opens, which contains a table and loads its data automatically. The first time it works perfect but when I close the window and open it again I get the error "cannot call method getRange of null".
If I open the second window (when I click the other button in my navigation bar), I have 4 tabs, which contain a table each. Each Tab has a toolbar with buttons (create, change, etc.). Here happens the same thing as by the first window.
I can also print those tables as a List and the first time works fine, but when I cancel the print action I get the error again.
I made sure that all buttons and tables have a different reference, so I really don't know what this could be.
Any ideas?
I add my panels, which will open the new windows here:
items: [
{
xtype: 'tabpanel',
region: 'center',
items: [{
// 1. Tab
xtype: 'componentTap-panel',
title: UMA.Locale.rm.component.componentTitle,
id: 'componentTab'
}, {
// 2. Tab
title: UMA.Locale.rm.componentGroup.componentGroupTitle,
xtype: 'componentGroupTap-panel',
id: 'componentGroupTab'
}, {
// 3. Tab
title: UMA.Locale.rm.componentTemplateTitle,
xtype: 'componentTamplate-panel',
id: 'componentTemplateTab'
},
{
//4.Tab
title: UMA.Locale.rm.inventoryTitle,
xtype: 'inventoryTab-panel',
id: 'inventoryTab'
}
]
}
]
When the window opens I add my table and toolbar:
items: [{
xtype: 'toolbar',
region: 'north',
reference: 'componentToolbar',
items: [{
text: UMA.Locale.rm.buttonCreate,
action: 'createComp'
}, {
text: UMA.Locale.rm.buttonChange,
action: 'changeComp'
}, {
text: UMA.Locale.rm.buttonMove,
action: 'moveComp'
}, {
text: UMA.Locale.rm.buttonDelete,
action: 'deleteComp'
},{
text: UMA.Locale.rm.buttonPrint,
action: 'print',
margin: {
left: 8
}, {
xtype: 'componentTable-panel',
region: 'center'
}, {
xtype: 'componentsFilter-panel',
width: 300,
region: 'east'
}]
and then autoload my table:
items:[{
xtype: 'filtergrid',
reference: 'componentGrid',
paging: true,
hideHeaders: false,
region: 'center',
selModel: new Ext.selection.RowModel({
mode: "MULTI"
}),
store: {
model: 'Component',
autoLoad: true
},
columns: [{ ...
As Sergey Novikov mentioned that getRange() is a store method.
I also faced the same error for my grid's store and after some review again and again I found that whenever I close the tab and reopen it again I am getting two instance of grid's view (which can be checked by grid.getView()) and then I reached a conclusion that whenever the grid is creating the second time the selection model of grid view is having two instances because of I am using the code for selModel as new Ext.selection.CheckboxModel({
showHeaderCheckbox: true,
width: 50,
mode: 'MULTI'
})
then I changed the code for selModel as
selModel: {
selType: 'checkboxmodel',
showHeaderCheckbox: true,
width: 50,
mode: 'MULTI'
}
and the error is gone for me.
Hope this will help you. :)
Use the Object() constructor to test whether the object is one of three subtypes:
null object
object object
array object
For example:
function foo() { return {"hi":"bye" } }
function bar() { return null }
function baz() { return [1,2,3] }
function testObject(myObject)
{
if (Object(myObject).hasOwnProperty("0") )
{
/* Call getRange */
return 'yes';
}
else
{
/* throw an exception */
return 'no';
}
}
console.log(testObject(foo()), testObject(bar()), testObject(baz()) );

Sencha Touch 2.x - How to load a custom view into a tab panel? Use xtype?

I am completely new to Sencha 2 Touch. This is my second day playing with it.
I have a custom class (app/view/Howdy.js):
Ext.define('MyApp.view.Howdy', {
extend: 'Ext.Panel',
xtype: 'howdy', // <--- this creates the 'howdy' xtype reference right?
requires: [
'Ext.SegmentedButton'
],
config: {
fullscreen: true,
html: ['Hello Word.'].join("")
}
});
and I am now trying to load it into a tab when clicked:
Ext.define('MyApp.view.Main', {
extend: 'Ext.tab.Panel',
config: {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
title: 'TAB 1',
iconCls: 'star',
xtype: 'howdy', // <--- WHY IS THIS CRASHING MY APP?
},
]
}
});
If I remove the xtype declaration inside TAB 1 and replace it with an html everything works fine. As soon as I try and load my custom view into the tab all I get is a white screen in my browser and console shows no errors ???
P.S Yes everything is setup correctly already in App.js:
views: ['Howdy','Main'],
HELP PLEASE!
Late to update this thread but the solution was simply to remove the fullscreen: true declaration from inside the config in MyApp.view.Howdy.
I hope that this will help you:
MyApp.view.Howdy
Ext.define('MyApp.view.Howdy', {
extend: 'Ext.Container',
xtype: 'howdy',
requires: [
'Ext.SegmentedButton'
],
config: {
incoCls: 'star',
title: 'TAB 1',
html: ['Hello Word.'].join("")
}
});
MyApp.view.Main
Ext.define('MyApp.view.Main', {
extend: 'Ext.tab.Panel',
config: {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{xclass: 'MyApp.view.Howdy'},
]
}
});
You should use alias: widget.XTYPE
Ext.define('MyApp.view.Howdy', {
extend: 'Ext.Panel',
alias: 'widget.howdy', // <--- this creates the 'howdy' xtype reference right?
requires: [
'Ext.SegmentedButton'
],
config: {
fullscreen: true,
html: ['Hello Word.'].join("")
}
});
A couple of things. First, xtype is what you use to define the type if you're adding it instantly...if you haven't already defined it with Ext.create. If you've already created it, then you don't need it. When creating panels, each item contains all the info for itself, title, icon, everything. Then, just add the item(s) into a tabPanel:
var a = Ext.create('Ext.Panel',{
iconCls:'star',
title:'tab1',
html:'tab one content'
});
var b = Ext.create('Ext.Panel',{
iconCls:'star',
title:'tab2',
html:'tab two content'
});
var panel = Ext.create('Ext.TabPanel',{
items:[a,b]
});

Sencha : Uncaught TypeError: Object function (){h.apply(this,arguments)} has no method 'setActiveItem'

I am using the following code in my application as an xtype. My list item is appearing the way i want but when i click on an item i have this error everytime i click on an item that is supposed to load a new page with datas : Uncaught TypeError: Object function (){h.apply(this,arguments)} has no method 'setActiveItem'. Any idea of how can i fix it? The refered items lines are commented in the code.
Here is my code :
var AppsBack = new Ext.Toolbar({
dock: 'top',
items: [{
text: 'back',
ui: 'back',
handler: function(){
Home.setActiveItem('home'); //Here is the second problem
}
}]
});
var AppsDetails = new Ext.Panel({
id: "appsdetails",
tpl: "{game}",
dockedItems: [AppsBack]
});
var AppsList = new Ext.List({
id: "appslist",
store: AppsStore,
layout: 'card',
emptyText: "No game found",
itemTpl: "{game}",
listeners: {
itemtap: function(view, index, item, e) {
var rec = view.getStore().getAt(index);
AppsDetails.update(rec.data);
AppsBack.setTitle(rec.data.game);
Home.setActiveItem('appsdetails') //Here is the first problem
}
}
});
var AppsListWrapper = new Ext.Panel({
id: "appslistwrapper",
layout: 'card',
items: [AppsList],
dockedItems: []
});
var Home = Ext.extend(Ext.Panel, {
id: "home",
iconCls: 'home',
title: 'Home',
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(this, {
items: [AppsListWrapper, AppsDetails]
});
Home.superclass.initComponent.apply(this,arguments)
}
});
Ext.reg('appsList', Home);
Thanks for your help
After a couple manipulation, i've discovered that the only reason why i am experiencing this trouble is because i am trying to extend the panel. In other terms if i use
new Ext.Panel
intead of
Ext.extend(Ext.Panel, {...
everything works fine excepted i can't use xtype in this case. Any ideas?
I figured it out!!!
MY solution consists in giving the new extended class as few arguments as possible. Therefore i divided the home extended class into two objects like this :
var Home = new Ext.Panel({
id: "home",
layout: 'card',
cardSwitchAnimation: 'slide',
items: [AppsListWrapper, AppsDetails]
});
var HomeTab = Ext.extend(Ext.Panel, {
iconCls: 'home',
title: 'Home',
layout: 'card',
initComponent: function() {
Ext.apply(this,{
items: [Home]
});
HomeTab.superclass.initComponent.apply(this,arguments);
}
});
Ext.reg('home', HomeTab);
Don't ask me how come, i won't be able to answer. I just followed my intuition ;)

Ext js FormPanel is not showing panel items when toolbar is present

I seem to be having a weird issue here. An extended component has the following code:
MyApp.panels.RelationshipDetails = Ext.extend(Ext.FormPanel, {
closable: true,
relationshipId: null,
documentId: null,
title: 'Relationship',
initComponent: function () {
if (!this.verifyRequiredData()) {
MyApp.panels.RelationshipDetails.superclass.initComponent.call(this);
return;
}
// Build components
this.tbar = this.buildToolbar();
this.items = this.buildDetailItemArray();
MyApp.panels.RelationshipDetails.superclass.initComponent.call(this);
},
verifyRequiredData: function () {
// Verification code here
},
buildDetailItemArray: function () {
return [{
xtype: 'fieldset',
title: 'Details',
collapsible: true,
autoHeight: true,
items: [{
xtype: 'hidden',
name: 'Id'
}, {
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name'
}, {
xtype: 'textfield',
fieldLabel: 'Description',
name: 'Description'
}, {
xtype: 'button',
text: 'Save',
name: 'saveButton'
}]
}];
},
buildToolbar: function () {
return new Ext.Toolbar({
// Toolbar Config
});
}
});
The issue is that when this panel renders, the toolbar is the only thing that renders. Through debugging I can see that BuildDetailItemArray() is being called correctly and returning the correct result.
It gets even weirder when I comment out the this.tbar = line, because when the toolbar is not present, the fieldset and field renders correctly. This occurs even if I extend Panel instead of FormPanel. I also tried abstracting out the form fields into it's own component, and the same thing occurs.
Anyone have any idea why this doesn't seem to work?
What sort of layout are you trying to put this panel into? Also, are you setting a height for this panel?
Often, if you aren't specifying a height for the component to be added (in your case, this panel), or you're not setting an anchor if using an AnchorLayout, component content won't be shown, but the toolbar still will.
It'd be good to know the context of this panel in your overall layout.

Categories