PDA

View Full Version : ListView



g2eend4y
11 Jul 2013, 10:57 AM
Hi

please help me, we have this code: (listview example in extjs samples)



var listView = Ext.create('Ext.grid.Panel', {
width:425,
height:250,
collapsible:true,
title:'Simple ListView <i>(0 items selected)</i>',
renderTo: Ext.getBody(),


store: store,
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},


columns: [{
text: 'File',
flex: 50,
dataIndex: 'name'
},{
text: 'Last Modified',
xtype: 'datecolumn',
format: 'm-d h:i a',
flex: 35,
dataIndex: 'lastmod'
},{
text: 'Size',
dataIndex: 'size',
tpl: '{size:fileSize}',
align: 'right',
flex: 15,
cls: 'listview-filesize'
}]
});



1) Who can explain this line? {size:fileSize}

2) When can I see this text? "No Images to display"
i've removed picture from images folder, but cant see this text

3) field means property in oop?

thanks
my english language = 0 :D

skirtle
11 Jul 2013, 5:54 PM
1. {size:fileSize} will pass the size to the function Ext.util.Format.fileSize:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.util.Format-method-fileSize

However, I think there's a mistake in that example as the tpl will only have an effect for a Template column, which isn't being used:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Template

I suggest reading the docs for Ext.Template and Ext.XTemplate too.

2. Try the following in the console:


Ext.ComponentQuery.query('grid')[0].getStore().removeAll();

I would guess the reason you were struggling to get it to work is because of deferEmptyText:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.view.AbstractView-cfg-deferEmptyText

3. It is not true in general to say simply that 'field means property in oop'. However in some cases the two terms are interchangeable. The exact meaning of these terms varies between languages and frameworks, I don't think it's possible to make a generalization about OOP.

Generally ExtJS uses the term 'property' for a value stored on an object, whereas a 'field' is part of a model.

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Model-cfg-fields
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Field

g2eend4y
11 Jul 2013, 10:33 PM
Thank you so much for answering questions :)

g2eend4y
11 Jul 2013, 11:11 PM
thanks, i can see emptyText when i am using the command in console ( Ext.ComponentQuery.query('grid')[0].getStore().removeAll();)

but now i want see this text when my page is loaded and get-images.php cant found pictures.



Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*'
]);
Ext.onReady(function(){
Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'ImageModel',
proxy: {
type: 'ajax',
url: 'get-images.php',
reader: {
type: 'json',
root: 'images'
}
}
});
store.load();

var listView = Ext.create('Ext.grid.Panel', {
width:425,
height:250,
collapsible:true,
title:'Simple ListView <i>(0 items selected)</i>',
renderTo: Ext.getBody(),


store: store,
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},


columns: [{
text: 'File',
flex: 50,
dataIndex: 'name'
},{
text: 'Last Modified',
xtype: 'datecolumn',
format: 'm-d h:i a',
flex: 35,
dataIndex: 'lastmod'
},{
text: 'Size',
dataIndex: 'size',
tpl: '{size:fileSize}',
align: 'right',
flex: 15,
cls: 'listview-filesize'
}]
});


// little bit of feedback
listView.on('selectionchange', function(view, nodes){
var len = nodes.length,
suffix = len === 1 ? '' : 's',
str = 'Simple ListView <i>({0} item{1} selected)</i>';

listView.setTitle(Ext.String.format(str, len, suffix));
});
});




"Sorry for double post!"