PDA

View Full Version : Trying to do something similar to a demo, but finally doesn't looks like it.



Elfayer
13 Sep 2012, 1:08 AM
Hi,

I'm trying to do something like the demo : http://docs.sencha.com/ext-js/4-1/#!...-dataview.html (http://docs.sencha.com/ext-js/4-1/#!/example/view/animated-dataview.html)

So I have a view :

Ext.define('EXC.view.viewCenter', {
extend: 'Ext.view.View',
alias: 'widget.viewCenter',

deferInitialRefresh: false,
autoScroll: true,
multiSelect: true,
itemSelector: 'div.file',
overItemCls: 'iconOver',
store: 'UserFiles',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="file">',
(!Ext.isIE6 ? '<img src="{fil_icon}" />' :
'<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'{fil_icon}\',sizingMethod=\'scale\')"></div>'),
'<strong><font color = white>{fil_label}</font></strong>',
'</div>',
'</tpl>'
),
plugins: [
Ext.create('Ext.ux.DataView.Animated', {
duration: 550,
idProperty: 'fil_id'
})
]
});

A panel view:

Ext.define('EXC.view.panelCenter', {
extend: 'Ext.panel.Panel',
alias: 'widget.panelCenter',

bodyStyle: { background: '#3399cc' },
region: 'center',
border: false,
layout: 'fit'
})

And when the 'UserFiles' is filled :

idProperty: 'fil_id',
fields: [
{ name: 'fil_id', type: 'int' },
{ name: 'fil_label', type: 'string' },
{ name: 'fil_icon', type: 'string' }
]

I added the viewCentre to the panelCenter in the controller :

displayFiles: function () {
var me = this;
var panel = Ext.ComponentQuery.query('panelCenter')[0];
var store = me.getUserFilesStore();

Ext.each(me.userFiles(), function (item) {
var icon;
me.getFilesStore().each(function (item2) {
if (item2.data.fil_id == item.fil_id) {
me.getFileTypesStore().each(function (item3) {
if (item3.data.ftp_id == item2.data.ftp_id) {
var model = Ext.create('EXC.model.UserFile');

model.set('fil_id', [item2.data.fil_id]);
model.set('fil_label', [item2.data.fil_label]);
model.set('fil_icon', [item3.data.ftp_icon]);
store.add(model);
}
})
}
})
})
var view = Ext.create('EXC.view.viewCenter');
panel.add(view);
}

And the result I got :38654

This is not draggable, and there is no multi select... Just like if it was html...

I don't understand what I'm missing. Once more, thanks in advance for your help !

vietits
13 Sep 2012, 5:00 AM
You should check CSS definition applied for your application.

Elfayer
13 Sep 2012, 5:03 AM
I really don't understand why my layout is different of their. The only differences are that I didn't reference my Ext.view.View as an item directly in the Ext.panel.Panel, but I do an
(Ext.ComponentQuery.query('panelCenter')[0]).add(Ext.create('viewCenter');

And the other thing I do differently is that I removed the size they specified in the templates for the images.

Which means nothing, why my templates are displayed in lines and their in boxes ?

Elfayer
13 Sep 2012, 5:04 AM
You should check CSS definition applied for your application.

Where can I see the CSS of that demo?

vietits
13 Sep 2012, 5:10 AM
If you install Ext 4.1.1 on your computer, you will find the example in "examples/view" sub-folder and the CSS is in "examples/view/animated-dataview.css"