View is creating multiple toolbars (screenshots included)

[NMFord]

Hey guys,

I am still new to Sencha Touch so I have probably made a rookie error but it is a problem that is driving me up the wall.

In the code below, you can see I have a function that is passed information from the controller and adds a bottom docked toolbar with paging buttons on it. The issue is, every time someone makes a new search or clicks a paging button I am creating a new 'botBar'. How do I write my script to check for an existing botBar and destroy it before making a new one?

Here are the screenshots so you can see the issue, what you see is what happens when the paging buttons are pressed:
http://imgur.com/a/NIYAo#0

Here is the code for the view:

BioGene.views.SearchListView = Ext.extend(Ext.Panel, {
layout: 'fit',
type: 'vbox',
scroll: 'vertical',
readIntoView: function (jsonData,pagingData) {

if (pagingData.next){
this.nextButton = new Ext.Button({
iconCls: 'arrow_right',
iconMask: true,
handler: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'search',
slideDirection: 'left',
query: pagingData.query,
page: pagingData.page+1
});
},
scope: this
});
}
else {
this.nextButton = new Ext.Button({
iconCls: 'arrow_right',
iconMask: false,
scope: this
});
}

if (pagingData.previous){
this.prevButton = new Ext.Button({
iconCls: 'arrow_left',
iconMask: true,
handler: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'search',
slideDirection: 'right',
query: pagingData.query,
page: pagingData.page-1
});
},
scope: this
});
}
else {
this.prevButton = new Ext.Button({
iconCls: 'arrow_right',
iconMask: false,
scope: this
});
}

var botBar = new Ext.Toolbar({
title: pagingData.start+' - '+pagingData.end+' of '+jsonData.count,
defaults: {
ui: 'plain'
},
dock: 'bottom',
layout: 'hbox',
items: [
this.prevButton,
{ xtype: 'spacer' },
this.nextButton
]
});

BioGene.views.searchListView.dockedItems.add(botBar);
//BioGene.views.searchListView.topToolbar.add(nextButton);
BioGene.views.searchListView.doComponentLayout();
},
initComponent: function () {

this.backButton = new Ext.Button({
text: 'Search',
ui: 'normal',
handler: this.onCloseTap,
scope: this
});

this.topToolbar = new Ext.Toolbar({
title: 'Genes',
items: [
//{ xtype: 'spacer' },
this.backButton
]
});

this.dataList = new Ext.List({
id: "dataList",
singleSelect: false,
store: BioGene.stores.geneStore,
onItemDisclosure: function(record, btn, index) {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'search',
query: record.get('gene_symbol')
});
},
itemTpl: '<tpl for="."><b>{gene_symbol}</b><br /><small><span style="color:#505050">{gene_organism}</span></small></tpl>',
scroll: 'vertical'
});

this.items = [this.dataList];

this.dockedItems = [this.topToolbar];

BioGene.views.SearchListView.superclass.initComponent.call(this);
},

onCloseTap: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'index',
slideDirection: 'right'
});
}

});

[mitchellsimoens]

Where is the readIntoView method being executed from? From the store?

[NMFord]

Where is the readIntoView method being executed from? From the store?

No, from the controller, you can see it here, look under the search function:

Ext.regController('BioGeneController', {

'index': function (options) {

if (!BioGene.views.mainView) {
BioGene.views.mainView = new BioGene.views.MainView();
}

if (options.settingsSubmit) {
var settings = BioGene.views.settingsView.getValues();
Ext.Ajax.request({
url: 'codeigniter/index.php/search/set_cookies/'+settings.organism+'/'+settings.genes_per_page+'/'+settings.rifs_per_page,
success: function(response, opts) {
Ext.Msg.alert('Settings', 'Your settings have been saved.', Ext.emptyFn);
}
});
}

BioGene.views.mainView.setActiveItem(
BioGene.views.searchIndexView,
{ type: 'slide', direction: options.slideDirection }
);
},

'search': function (options) {

var panel = BioGene.views.mainView;

panel.setLoading(true, true);

Ext.Ajax.request({
url: 'codeigniter/index.php/search/go/'+options.query+'/'+options.page,
success: function(response, opts) {
panel.setLoading(false);
var jsonData = Ext.util.JSON.decode(response.responseText);
console.log(jsonData);
if(jsonData.count > 1) {
var pagingData = new Array();
pagingData.query = options.query;
pagingData.page = options.page;
pagingData.start = (options.page * getCookie("bg_results")) - getCookie("bg_results") + 1;
if ((options.page * getCookie("bg_results")) <= jsonData.count) {
pagingData.end = options.page * getCookie("bg_results");
}
else if ((options.page * getCookie("bg_results")) > jsonData.count) {
pagingData.end = (options.page * getCookie("bg_results"))-((options.page * getCookie("bg_results"))-jsonData.count);
}
if (jsonData.count > (options.page * getCookie("bg_results"))) {
pagingData.next = true;
}
else {
pagingData.next = false;
}
if (options.page > 1) {
pagingData.previous = true;
}
else {
pagingData.previous = false;
}
BioGene.views.mainView.setActiveItem(
BioGene.views.searchListView,
{ type: 'slide', direction: options.slideDirection }
);
BioGene.views.searchListView.readIntoView(jsonData,pagingData);
BioGene.stores.geneStore.proxy.data = jsonData;
BioGene.stores.geneStore.load();
}
else if((jsonData.count == 1) && (jsonData.return_code = "SUCCESS")) {
BioGene.views.mainView.setActiveItem(
BioGene.views.geneView,
{ type: 'slide', direction: 'left' }
);
BioGene.stores.geneStore.proxy.data = jsonData;
BioGene.stores.geneStore.load();
}
else if(jsonData.return_code != "SUCCESS") {
alert("No Results");
}
}
});

},

'settings': function (options) {

BioGene.views.mainView.setActiveItem(
BioGene.views.settingsView,
{ type: 'slide', direction: 'up' }
);

},

'information': function (options) {

BioGene.views.mainView.setActiveItem(
BioGene.views.informationView,
{ type: 'slide', direction: 'up' }
);

var panel = BioGene.views.informationView;

panel.update('');
panel.setLoading(true, true);

Ext.Ajax.request({
url: 'codeigniter/index.php/search/information',
success: function(response, opts) {
panel.update(response.responseText);
panel.scroller.scrollTo({x: 0, y: 0});
panel.setLoading(false);
}
});

}

});

BioGene.controllers.bioGeneController = Ext.ControllerManager.get('BioGeneController');

[mitchellsimoens]

So the easiest way is to set the toolbar onto the component and if it is present, don't create one and add it.

[NMFord]

So the easiest way is to set the toolbar onto the component and if it is present, don't create one and add it.

How do I check if it is present in the function? (So then I can point the script to either creating it if it is not created yet or modifying it if it is)

[mitchellsimoens]

if (!BioGene.views.searchListView.botBar) {
//create botBar

BioGene.views.searchListView.botBar = botBar;
}

[NMFord]

if (!BioGene.views.searchListView.botBar) {
//create botBar

BioGene.views.searchListView.botBar = botBar;
}

For some reason the if statement isn't working, I still am getting multiple bars created even with that conditional statement in place.

I tried adding this as well to the top of the function to check and it didn't display the alert when scrolling through the pages.

if (BioGene.views.searchListView.botBar) {
alert("Script is catching bar's existence");
}

I then tried to add (alert(BioGene.views.searchListView.botBar);) and the alert text was "undefined", when paging, both before and after the item is created.

[mitchellsimoens]

Did you put the botBar onto that class? It won't do it automatically.

[NMFord]

Thanks! Fixed it now.

Here is the resulting code if you're interested:

BioGene.views.SearchListView = Ext.extend(Ext.Panel, {
layout: 'fit',
type: 'vbox',
scroll: 'vertical',
readIntoView: function (jsonData,pagingData) {
if (BioGene.views.searchListView.botBar)
{
BioGene.views.searchListView.dockedItems.remove(BioGene.views.searchListView.botBar);
BioGene.views.searchListView.botBar.destroy();
}
console.log(BioGene.views.searchListView);
if (pagingData.next){
this.nextButton = new Ext.Button({
iconCls: 'arrow_right',
iconMask: true,
handler: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'search',
slideDirection: 'left',
query: pagingData.query,
page: pagingData.page+1
});
},
scope: this
});
}
else {
this.nextButton = new Ext.Button({
iconCls: 'arrow_right',
iconMask: false,
scope: this
});
}

if (pagingData.previous){
this.prevButton = new Ext.Button({
iconCls: 'arrow_left',
iconMask: true,
handler: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'search',
slideDirection: 'right',
query: pagingData.query,
page: pagingData.page-1
});
},
scope: this
});
}
else {
this.prevButton = new Ext.Button({
iconCls: 'arrow_right',
iconMask: false,
scope: this
});
}

this.botBar = new Ext.Toolbar({
title: pagingData.start+' - '+pagingData.end+' of '+jsonData.count,
defaults: {
ui: 'plain'
},
dock: 'bottom',
layout: 'hbox',
items: [
this.prevButton,
{ xtype: 'spacer' },
this.nextButton
]
});

BioGene.views.searchListView.dockedItems.add(this.botBar);
//BioGene.views.searchListView.topToolbar.add(nextButton);
BioGene.views.searchListView.doComponentLayout();
},
initComponent: function () {

this.backButton = new Ext.Button({
text: 'Search',
ui: 'normal',
handler: this.onCloseTap,
scope: this
});

this.topToolbar = new Ext.Toolbar({
title: 'Genes',
items: [
//{ xtype: 'spacer' },
this.backButton
]
});

this.dataList = new Ext.List({
id: "dataList",
singleSelect: false,
store: BioGene.stores.geneStore,
onItemDisclosure: function(record, btn, index) {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'search',
query: record.get('gene_symbol')
});
},
itemTpl: '<tpl for="."><b>{gene_symbol}</b><br /><small><span style="color:#505050">{gene_organism}</span></small></tpl>',
scroll: 'vertical'
});

this.items = [this.dataList];

this.dockedItems = [this.topToolbar];

BioGene.views.SearchListView.superclass.initComponent.call(this);
},

onCloseTap: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'index',
slideDirection: 'right'
});
}

});