PDA

View Full Version : How to change template of a DataView at runtime



alwintom
20 Jun 2011, 5:47 AM
Hi,

I am trying to create a 'Windows Explorer'-like window with extjs. I want to let the users change the view-mode of the dataview at runtime. like in explorer 'Large', 'Extra Large', 'List'.....

My initial approach was to define 3 seperate Xtemplates for each of the view mode and change the 'tpl' property of the DataView accordingly. I searched through the documentation, but I dont see any method defined in DataView, which lets me change the template. Is there any way to do this?

Thanks

bromske
21 Jun 2011, 5:20 AM
[EXT4] I've the same problem :((
you got the problem solved?

alwintom
22 Jun 2011, 12:34 AM
Unfortunately, no. I'm still trying out different things, but none of them seems to work. If you search it on google, you wont find any page about it. So I guess may be it is not possible. Anyway, I will later try to extend the dataview class and see if I can add this functionality. I will let you know if I get the problem fixed.

bromske
22 Jun 2011, 1:12 AM
I think i've solved our Problem (a little bit :-?)
I try to write down the solution, i think it will work in Ext3 the same as in Ext4 (i use EXT4)

1. i use only 1 template with some if clauses like this:



tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<tpl if="this.isSmall(this)==1">',
'<div class="dataview_itemtpl">First Template Stuff</div>',
'</tpl>',
'<tpl if="this.isSmall(this)==0">',
'<div class="dataview_itemtpl">Second Template Stuff</tpl>',
'</tpl>',
'</tpl>',
{
smallx: 1,
disableFormats: true,
isSmall: function(t) {
return t.smallx;
}
}


2. i change the variable to switch between template stuff 1 and 2



items: [{
xtype: 'button',
text: 'T1 ',
listeners: {
'click': function() {
var root = Ext.getCmp('testcontainer');
var dvroot = root.down('#dataViewItem');
dvroot.tpl.smallx = 1;
dvroot.refresh();
}
}
},{
xtype: 'button',
text: ' T2',
listeners: {
'click': function() {
var root = Ext.getCmp('testcontainer');
var dvroot = root.down('#dataViewItem');
dvroot.tpl.smallx = 0;
dvroot.refresh();
}
}
}]

alwintom
23 Jun 2011, 12:38 AM
Thanks. I will surely try it. Although ExtJS 3 documentation does not mention about DataView.tpl as a public property. BTW, one of my friends tried to extend the DataView class and added a method to change template. He says it works too.

alwintom
23 Jun 2011, 3:56 AM
Your method works fine!! Thanks a lot. You are a life saver!!!

I made some modifications to your technique. BTW use 'this' keyword intead of using t.tpl

Here is my version

var tplContentsPane = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<tpl if="this.viewMode == 1">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'</tpl>',
'<tpl if="this.viewMode == 2">',
'<div class="icon"><img src="{url}" title="{name}"></div>',
'</tpl>',
'<tpl if="this.viewMode == 3">',
'<div class="list"><img src="{url}" title="{name}"></div>',
'</tpl>',
'<span>{name}</span></div>',
'</tpl>',
{
viewMode: 1,
disableFormats: true,
getCurrentViewMode: function() {
return this.viewMode;
},
setViewMode: function(viewMode) {
if(viewMode > 3 || viewMode < 1)
viewMode = 1;
this.viewMode = viewMode;
}
}
);I am using three view modes and set a css class to the div tag accordingly. To change the view mode just do this



<name of dataview>.tpl.setViewMode(1/2/3);
<name of dataview>.refresh();

alwintom
23 Jun 2011, 7:09 AM
Found a better (atleast for my needs) method to do exactly what I wanted.

The above method has slight disadvantage. If you are using multiple dataviews and all of them use the same template, changing the icon size this way will affect all of them. In my case, I have 8 dataviews and I needed to change the icon size in them individually. So the above method was not sufficeint

New Method:

Basically, I create 3 templates for 3 icon sizes. Then I add a method to dataview, which will allow us to change its template. Heres the code


var dvOfficeForms = new Ext.DataView({
tpl: tplContentsPane_thumb,
...............
................
setTemplate: function(template){
this.tpl = template;
this.refresh();
}
});

Now when you want to change the template, do this

dvOfficeForms.setTemplate(tplContentsPane_thumb);
replace tplContentsPane_thumb with any XTemplate object.

After having succes with this, I created a new custom DataView class for better code (You see with this, I have to type this function to all 8 dataviews). So heres the custom class


Ext.ux.MultiDataView = function(config) {

Ext.ux.MultiDataView.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.MultiDataView, Ext.DataView,{
setTemplate: function(template){
this.tpl = template;
this.refresh();
}
});

and the dataview creation part changes to this

var dvOfficeForms = new Ext.ux.MultiDataView({
tpl: tplContentsPane_thumb,
...............
................

});

Rest of the code is just the same.

I hope this will help somebody out

skirtle
24 Jun 2011, 3:33 AM
You should be able to shrink that down even further:


Ext.ux.MultiDataView = Ext.extend(Ext.DataView, {
setTemplate: function(template) {
this.tpl = template;
this.refresh();
}
});

suamikim
6 Sep 2012, 11:50 PM
If someone needs a working example, i just created one on jsfiddle:
http://jsfiddle.net/suamikim/pnK3Z/

I hope it's ok to bring up this old thread...

jvandemerwe
4 Dec 2016, 5:58 AM
If someone needs a working example, i just created one on jsfiddle:
http://jsfiddle.net/suamikim/pnK3Z/

I hope it's ok to bring up this old thread...

Nicely done.

It still works without a flaw in ExtJS 6.2.1. I've put in a Sencha Fiddle.

https://fiddle.sencha.com/#view/editor&fiddle/1lod