PDA

View Full Version : Buttons not being shown after a couple of clicks to add/remove bbar in grid



WTom
28 Sep 2017, 2:33 AM
Hi there,
Could someone help me with a problem.
In the code below my buttons are not being shown after a couple of clicks on a method which adds and removes a bbar.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stateful Array Grid Example</title>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<script type="text/javascript" src="file:///C:/temp/ext-4.1.3/build/ext-all.js"></script>

<script>
function initGrid1() {
var bbar = Ext.getCmp('grid1Toolbar');
bbar.remove(bbar.items.get('seperator1'));
bbar.remove(bbar.items.get('seperator2'));
bbar.remove(bbar.items.get('seperator3'));
bbar.remove(bbar.items.get('buttonToev'));
bbar.remove(bbar.items.get('buttonWijzRaad'));
bbar.remove(bbar.items.get('buttonVerw'));
bbar.add({id: "seperator1", xtype: 'tbseparator'}); //separator
bbar.add({id: "buttonToev", text:"Toevoegen"});
bbar.add({id: "seperator2", xtype: 'tbseparator'}); //separator
bbar.add({id: "buttonWijzRaad", text:"Wijzigen/Raadplegen"});
bbar.add({id: "seperator3", xtype: 'tbseparator'}); //separator
bbar.add({id: "buttonVerw", text:"Verwijderen"});
}

function initGrid2() {
var bbar = Ext.getCmp('grid2Toolbar');
bbar.remove(bbar.items.get('seperator1'));
bbar.remove(bbar.items.get('seperator2'));
bbar.remove(bbar.items.get('seperator3'));
bbar.remove(bbar.items.get('buttonToev'));
bbar.remove(bbar.items.get('buttonWijzRaad'));
bbar.remove(bbar.items.get('buttonVerw'));
bbar.add({id: "seperator1", xtype: 'tbseparator'}); //separator
bbar.add({id: "buttonToev", text:"Toevoegen2"});
bbar.add({id: "seperator2", xtype: 'tbseparator'}); //separator
bbar.add({id: "buttonWijzRaad", text:"Wijzigen/Raadplegen2"});
bbar.add({id: "seperator3", xtype: 'tbseparator'}); //separator
bbar.add({id: "buttonVerw", text:"Verwijderen2"});
}

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
</script>
</head>

<body>
<script>
var bbar2 = [new Ext.Toolbar({
id : 'grid2Toolbar',
hidden : false,
height : 30,
style : 'margin-top:5px',
})];

var myGrid1 = Ext.create('Ext.grid.Panel', {
id: 'Grid1',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }],
height: 200,
width: 400,
dockedItems: [{
id : 'grid1Toolbar',
xtype: 'toolbar',
dock: 'bottom'
}],
renderTo: Ext.getBody()
});

var myGrid2 = Ext.create('Ext.grid.Panel', {
id: 'Grid2',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }],
height: 200,
width: 400,
dockedItems: [{
id : 'grid2Toolbar',
xtype: 'toolbar',
dock: 'bottom'
}],
renderTo: Ext.getBody()
});

</script>
<br>
<button type="button" onclick="initGrid1()">InitGrid1</button>
<button type="button" onclick="initGrid2()">InitGrid2</button>
</body>
</html>


Clicking on button "InitGrid1" may lead to changes in grid2.
Also clicking on button "InitGrid2" may lead to changes in grid1.
After clicking a couple of times on InitGrid1 and InitGrid2, buttons in both the grids disappear (see the yellow mark in the second picture in the attachment).

petrocomp
1 Oct 2017, 12:32 AM
Hi WTom,

The problem in your code was caused by IDs. This is not recommended to use the same IDs for objects on the same page.
In your example you have the same IDs in both functions initGrid1 and initGrid2.
I would suggest you to avoid using IDs in your app. It's very easy to brake your code.

I changed your code, so it should work:



<html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stateful Array Grid Example</title>
<!--<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.0/...ss/ext-all.css">-->
<!--<script type="text/javascript" src="file:///C:/temp/ext-4.1.3/build/ext-all.js"></script>-->


<script>
function initGrid1() {
var bbar = Ext.getCmp('grid1Toolbar');
if(bbar.items.get('seperator1')){
bbar.remove(bbar.items.get('seperator1'));
}
if(bbar.items.get('seperator2')){
bbar.remove(bbar.items.get('seperator2'));
}
if(bbar.items.get('seperator3')){
bbar.remove(bbar.items.get('seperator3'));
}
if(bbar.items.get('buttonToev')){
bbar.remove(bbar.items.get('buttonToev'));
}
if(bbar.items.get('buttonWijzRaad')){
bbar.remove(bbar.items.get('buttonWijzRaad'));
}
if(bbar.items.get('buttonVerw')){
bbar.remove(bbar.items.get('buttonVerw'));
}

bbar.add({
id: "seperator1",
xtype: 'tbseparator'
}); //separator
bbar.add({
id: "buttonToev",
text: "Toevoegen"
});
bbar.add({
id: "seperator2",
xtype: 'tbseparator'
}); //separator
bbar.add({
id: "buttonWijzRaad",
text: "Wijzigen/Raadplegen"
});
bbar.add({
id: "seperator3",
xtype: 'tbseparator'
}); //separator
bbar.add({
id: "buttonVerw",
text: "Verwijderen"
});
}


function initGrid2() {
var bbar = Ext.getCmp('grid2Toolbar');
if(bbar.items.get('seperator1Another')){
bbar.remove(bbar.items.get('seperator1Another'));
}
if(bbar.items.get('seperator2Another')){
bbar.remove(bbar.items.get('seperator2Another'));
}
if(bbar.items.get('seperator3Another')){
bbar.remove(bbar.items.get('seperator3Another'));
}
if(bbar.items.get('buttonToevAnother')){
bbar.remove(bbar.items.get('buttonToevAnother'));
}
if(bbar.items.get('buttonWijzRaadAnother')){
bbar.remove(bbar.items.get('buttonWijzRaadAnother'));
}
if(bbar.items.get('buttonVerwAnother')){
bbar.remove(bbar.items.get('buttonVerwAnother'));
}


bbar.add({
id: "seperator1Another",
xtype: 'tbseparator'
}); //separator
bbar.add({
id: "buttonToevAnother",
text: "Toevoegen2"
});
bbar.add({
id: "seperator2Another",
xtype: 'tbseparator'
}); //separator
bbar.add({
id: "buttonWijzRaadAnother",
text: "Wijzigen/Raadplegen2"
});
bbar.add({
id: "seperator3Another",
xtype: 'tbseparator'
}); //separator
bbar.add({
id: "buttonVerwAnother",
text: "Verwijderen2"
});
}


Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "[email protected]",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "[email protected]",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "[email protected]",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "[email protected]",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


</script>
</head>


<body>
<script>
var bbar2 = [new Ext.Toolbar({
id: 'grid2Toolbar',
hidden: false,
height: 30,
style: 'margin-top:5px',
})];


var myGrid1 = Ext.create('Ext.grid.Panel', {
id: 'Grid1',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}, {
header: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
dockedItems: [{
id: 'grid1Toolbar',
xtype: 'toolbar',
dock: 'bottom'
}],
renderTo: Ext.getBody()
});


var myGrid2 = Ext.create('Ext.grid.Panel', {
id: 'Grid2',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}, {
header: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
dockedItems: [{
id: 'grid2Toolbar',
xtype: 'toolbar',
dock: 'bottom'
}],
renderTo: Ext.getBody()
});


</script>
<br>
<button type="button" onclick="initGrid1()">InitGrid1</button>
<button type="button" onclick="initGrid2()">InitGrid2</button>
</body>


</html>




If you have any questions please let me know.