Inspiration
Tuesday this week, Roland Schütz presented at the ExtJS San Francisco Meetup Group Bancha. Unfortunately (for everyone else) we did not have good attendance which gave me a bunch of time to talk with Roland (or better I should say for Roland to teach me stuff about ExtJS and the web in general). It was fun to learn so much from someone half my age and twice as smart. Meanwhile, while I was showing Roland my latest problem, he noticed I was showing and hiding elements by changing XTemplates. He pointed out how inefficient that is and showed me a better way with CSS. I have always known this is possible, but until now did not have the specifics for how to achieve it. In this article, I’ll show you what Roland showed me.
The Problem
Let’s imagine we want to build an app (Sencha ExtJS in this case) that allows to show rows of data from a database, but easily toggle hiding some of the data. Say it was a security app where we do now want to show security data. For our example, we are just going to make it toggle by pressing a button but in the real world, this gets pretty involved.
[wp-js-fiddle url="http://jsfiddle.net/pkellner99/qr2BJ/10428/" style="width:100%; height:400px; border:solid #4173A0 1px;"]
A less correct way to do this would be create an XTemplate with an if clause in it, then based on the value of some button state or checkbox change what is showing from the store to be blank or the value. This would cause a bunch of javascript to be run. In this example, it would be fast so there would be no issue but in most cases, not optimal.
The Strategy
The basic strategy is this. You create two CSS classes as follows:
<style TYPE="text/css"> .adminsection { display: none; } .show-adminsection .adminsection { display: inline; } </style>
You create a html structure as follows:
<div class="show-adminsection"> <p>Do not hide this</p><br /> <span class="adminSection">Hide THIS!!!</span </div>
Then, in your JavaScript, you simply add and remove the class show-adminsection and the Hide THIS! will come and go!
You can see this in it’s full detail list a list view in the code below as well as the JS Fiddle Project shown above (hopefully, it’s my first fiddle).
Basically, when you press the button to hide or show, one DOM element has a class inserted or deleted to it. That’s it!
HTH’s!
The Code
Ext.Loader.setConfig({ enabled: true, disableCaching: true });
Ext.application({
name: 'TestApp',
launch: function () {
<span style="color: #0000ff;">var</span> store = Ext.create(<span style="color: #006080;">'Ext.data.Store'</span>, {
storeId: <span style="color: #006080;">'employeeStore'</span>,
fields: [<span style="color: #006080;">'name'</span>,
<span style="color: #006080;">'seniority'</span>, <span style="color: #006080;">'department'</span>, <span style="color: #006080;">'clearance'</span>],
data: {
<span style="color: #006080;">'employees'</span>: [
{
<span style="color: #006080;">"name"</span>: <span style="color: #006080;">"Richard Nixon"</span>, <span style="color: #006080;">"seniority"</span>: 7,
<span style="color: #006080;">"department"</span>: <span style="color: #006080;">"Management"</span>,
<span style="color: #006080;">"clearance"</span>: <span style="color: #006080;">"low"</span>
},
{
<span style="color: #006080;">"name"</span>: <span style="color: #006080;">"Jimmy Carter"</span>,
<span style="color: #006080;">"seniority"</span>: 2, <span style="color: #006080;">"department"</span>: <span style="color: #006080;">"Sales"</span>,
<span style="color: #006080;">"clearance"</span>: <span style="color: #006080;">"hight"</span>
},
{
<span style="color: #006080;">"name"</span>: <span style="color: #006080;">"Ronald Reagan"</span>, <span style="color: #006080;">"seniority"</span>: 3,
<span style="color: #006080;">"department"</span>: <span style="color: #006080;">"Sales"</span>, <span style="color: #006080;">"clearance"</span>: <span style="color: #006080;">"medium"</span>
},
{
<span style="color: #006080;">"name"</span>: <span style="color: #006080;">"George Washington"</span>, <span style="color: #006080;">"seniority"</span>: 4,
<span style="color: #006080;">"department"</span>: <span style="color: #006080;">"Accounting"</span>, <span style="color: #006080;">"clearance"</span>: <span style="color: #006080;">"medium"</span>
},
{
<span style="color: #006080;">"name"</span>: <span style="color: #006080;">"George Bush"</span>, <span style="color: #006080;">"seniority"</span>: 5,
<span style="color: #006080;">"department"</span>: <span style="color: #006080;">"Accounting"</span>, <span style="color: #006080;">"clearance"</span>: <span style="color: #006080;">"none"</span>
}
]
},
proxy: {
type: <span style="color: #006080;">'memory'</span>,
reader: {
type: <span style="color: #006080;">'json'</span>,
root: <span style="color: #006080;">'employees'</span>
}
}
});
<span style="color: #0000ff;">var</span> tpl1 = <span style="color: #0000ff;">new</span> Ext.XTemplate(
<span style="color: #006080;">'<tpl for=".">'</span>,
<span style="color: #006080;">'{name} {seniority}<br/>'</span>,
<span style="color: #006080;">'<span class="adminsection">{clearance}</span><br/>'</span>,
<span style="color: #006080;">'<hr/>'</span>,
<span style="color: #006080;">'</tpl>'</span>
);
<span style="color: #0000ff;">var</span> view = Ext.create(<span style="color: #006080;">'Ext.view.View'</span>, {
region: <span style="color: #006080;">'center'</span>,
title: <span style="color: #006080;">'Employees'</span>,
store: Ext.data.StoreManager.lookup(<span style="color: #006080;">'employeeStore'</span>),
tpl: tpl1,
});
<span style="color: #0000ff;">new</span> Ext.Viewport({
items: [
{
xtype: <span style="color: #006080;">'button'</span>,
text: <span style="color: #006080;">'Show Admin Section'</span>,
region: <span style="color: #006080;">'north'</span>,
handler: <span style="color: #0000ff;">function</span> (button) {
<span style="color: #0000ff;">var</span> panel = button.up();
panel.addCls(<span style="color: #006080;">"show-adminsection"</span>);
},
},
{
xtype: <span style="color: #006080;">'button'</span>,
text: <span style="color: #006080;">'Hide Admin Section'</span>,
region: <span style="color: #006080;">'north'</span>,
handler: <span style="color: #0000ff;">function</span> (button) {
<span style="color: #0000ff;">var</span> panel = button.up();
panel.removeCls(<span style="color: #006080;">"show-adminsection"</span>);
}
}, view
],
layout: <span style="color: #006080;">'border'</span>
});
}
});