PDA

View Full Version : [HELP PLEASE !] DataView does not display records ! ?



merianos
11 Dec 2009, 11:12 AM
Hello all.

I try to create a File Manager based on Database.

On my page I have add a ViewPort that hold at the left a TreePanel and at the right a DataView.

Everythink is perfect with add items on tree, load sub noeds, change node positions on so on . . .

The problem now is that I don't see my data on the DataView, instead of my data I get the text of the 'emptyText' property that the DataView object have.

What I do is that :

When the user is clicking on a tree node a JsonStore is loading data that must be displayd on the DataView. Tha JsonStore is loading data in the following format :



{
"images":[
{
"id":"2",
"name":"DatacenterHellas-Logo-e-mailTemplate.png",
"size":44.1,
"path":"/Images/getFile/2"
}
,{
"id":"3",
"name":"DatacenterHellas-Logo-e-mailTemplate.png",
"size":44.1,
"path":"/Images/getFile/3"
}
,{
"id":"4",
"name":"800px-Flag_of_Finland_svg.png",
"size":11.5,
"path":"/Images/getFile/4"
}
,{
"id":"5",
"name":"gr300200.gif",
"size":1.8,
"path":"/Images/getFile/5"
}
,{
"id":"6",
"name":"Nelios SEO.pdf",
"size":126.3,
"path":"/Images/getFile/6"
}
,{
"id":"7",
"name":"???? ????.odt",
"size":19.6,
"path":"/Images/getFile/7"
}
,{
"id":"8",
"name":"url[1].doc&ei=lH8eS6roKd62jAezr6SnCw&usg=AFQjCNG2XP5dyEj0CwkgCT7cEproNGexBg&sig2=zspzfUX9kYVFdknfuO986g",
"size":436.5,
"path":"/Images/getFile/8"
}
,{
"id":"9",
"name":"twain.dll",
"size":105.8,
"path":"/Images/getFile/9"
}
,{
"id":"10",
"name":"winhlp32.exe",
"size":13.5,
"path":"/Images/getFile/10"
}
,{
"id":"11",
"name":"img26.jpg",
"size":68.1,
"path":"/Images/getFile/11"
}
]
}


And the code I have write is this :


var w;
var nodeSelected = 0;
var tree;
var store;
var dView;

var recordObj = new Ext.data.Record.create(
[
{
name: 'ID',
mapping: 'id'
},
{
name: 'NAME',
mapping: 'name'
},
{
name: 'SIZE',
mapping: 'size',
type: 'float'
},
{
name: 'URL',
mapping: 'path'
}
]
);

var tmpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id={ID}>',
'<div class="thumb">',
'<img src="{URL}" title="{NAME}" />',
'<span class="filename">{NAME}</span>',
'</div>',
'</div>',
'<div class="x-clear"></div>',
'</tpl>'
);

var tPanel = new Ext.tree.TreePanel(
{
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: true,
dataUrl: '/Fms/getNodes',
root: {
nodeType: 'async',
text: '/',
draggable: false,
id: 'source'
}
}
);

var addFrm = new Ext.FormPanel(
{
url: '/Fms/add',
defaultType: "textfield",
items: [
{
fieldLabel: '<?php e(__d('fm','FolderName')); ?>',
name: 'folderName',
allowBlank: false
},
{
xtype: 'hidden',
name: 'parentNode',
value: nodeSelected,
id: 'hiddenField'
}
],
buttons:[
{
text: '<?php e(__('Save')); ?>',
handler: function()
{
Ext.get('hiddenField').set({value:nodeSelected});

addFrm.getForm().submit(
{
success: function(s,a)
{
addFrm.getForm().reset();
w.hide();
w = null;
tree.root.reload();
}
}
);
}
},
{
text: '<?php e(__('Reset')); ?>',
handler: function()
{
addFrm.getForm().reset();
}
},
{
text: '<?php e(__('Cancel')); ?>',
handler: function()
{
w.hide();
}
}
],
height: 80,
labelWidth: 100,
frame: true,
bodyStyle: 'padding: 10px 5px 10px 5px'
}
)

var treeLoader = new Ext.tree.TreeLoader(
{
dataUrl: '/Fms/nodes'
}
);

var rootNode = new Ext.tree.AsyncTreeNode(
{
text: '/',
id: 'root'
}
);

tree = new Ext.tree.TreePanel(
{
region: 'west',
loader: treeLoader,
root: rootNode,
rootVisible: false,
width: 200,
autoScroll: true,
bodyStyle: 'padding: 5px',
collapsible: true,
tbar: [
{
text: '<?php e(__d('fm','CreateFolder')); ?>',
handler: function()
{

w = new Ext.Window(
{
width: 270,
height: 110,
title: '<?php e(__d('fm','CreateNewFolder')); ?>',
draggable: false,
resizable: false,
items: addFrm
}
);

w.show();

}
},
{
text: '<?php e(__('Delete')); ?>',
handler: function()
{
alert("You clicked me");
}
}
],
title: "<?php e(__d('fm','Folders')); ?>",
listeners: {
click: function(n)
{
nodeSelected = n.attributes.id;

store = null;

store = new Ext.data.JsonStore(
{
url: '/Fms/getFiles',
baseParams: {
parent: nodeSelected
},
root: 'images',
id: 'fileData',
fields: recordObj,
listeners: {
load: {
fn: function(store, records, options)
{
console.dir(records);
},
scope: this
}
}
}
);

store.load();
dView.refresh();

}
},
enableDD: true
}
);

tree.on(
'beforemovenode',
function(tree, node, oldParent, newParent, index)
{
Ext.Ajax.request(
{
url: '/Fms/order',
params: {
nodeid: node.id,
newparentid: newParent.id,
oldparentid: oldParent.id,
dropindex: index
}
}
);
}
);

var editor = new Ext.tree.TreeEditor(tree);

editor.on(
'beforecomplete',
function(editor, newValue, originalValue)
{
Ext.Ajax.request(
{
url: '/Fms/edit',
params: {
newval: newValue,
oldval: originalValue
}
}
);
}
);

var createWindow;
var fp = new Ext.FormPanel(
{
fileUpload: true,
frame: true,
autoWidth: true,
height: 85,
bodyStyle: 'padding: 10px 0 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
allowBlank: false,
xtype: 'textfield'
},
items: [
{
xtype: 'hidden',
name: 'FolderID',
value: nodeSelected,
id: 'hiddenFieldFile'
},
{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: '<?php e(__d('fm','SelectFile')); ?>',
fieldLabel: '<?php e(__d('fm','File')); ?>',
name: 'FileData',
buttonText: '<?php e(__d('fm','Open')); ?>'
}
],
buttons: [
{
text: '<?php e(__('Save')); ?>',
handler: function()
{
Ext.get('hiddenFieldFile').set({value:nodeSelected});

if(fp.getForm().isValid)
{
fp.getForm().submit(
{
url: '/Images/save',
waitMsg: '<?php e(__d('fm','FileUploading')); ?>',
success: function(fp, o)
{
Ext.Msg.show(
{
title: "<?php e(__d('fm','Success')); ?>",
msg: "<?php e(__d('fm','FileOnServer')); ?>",
minWidth: 200,
modal: true,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
}
);

$fp.getForm().reset();
createWindow.hide();
}
}
);
}
}
},
{
text: "<?php e(__('Reset')); ?>",
handler: function()
{
fp.getForm().reset();
}
}
]
}
);

store = new Ext.data.JsonStore(
{
url: '/Fms/getFiles',
autoLoad: false,
baseParams: {
parent: 1
},
root: 'images',
id: 'fileData',
fieldLabel: recordObj,
listeners: {
load: {
fn: function(store, records, options)
{
alert("OK");
},
scope: this
}
}
}
);

dView = new Ext.DataView(
{
store: store,
tpl: tmpl,
autoHeight: true,
id: 'dvObj',
emptyText: '<?php e(__d('fm','NoFiles')); ?>'
}
);

var pnl = new Ext.Panel(
{
region: 'center',
bodyBorder: true,
border: true,
title: '<?php e(__d('fm','Files')); ?>',
items: dView,
bodyStyle: 'padding: 5px;',
tbar: [
{
text: '<?php e(__d('fm','UploadFiles')); ?>',
handler: function()
{

createWindow = new Ext.Window(
{
title: '<?php e(__d('fm','UploadFiles_')); ?>',
width: 315,
height: 150,
closable: false,
items: fp,
buttons: [
{
text: '<?php e(__('Close')); ?>',
handler: function()
{
createWindow.hide();
createWindow = null;
}
}
]
}
);

createWindow.show();

}
}
]
}
);

var viewPort = new Ext.Viewport(
{
layout: 'border',
items: [
tree,
pnl
]
}
);


Please somebody to help me ! ! ! ! :)

Animal
12 Dec 2009, 12:48 AM
Your Store is not loaded. You need to debug that. And by "debug", I mean actually examine your program at runtime in a debugger.

merianos
14 Dec 2009, 3:42 AM
Any who can Help me please ?8-|

merianos
14 Dec 2009, 5:33 AM
Your Store is not loaded. You need to debug that. And by "debug", I mean actually examine your program at runtime in a debugger.

Hello. First of all thanks for your answer.

If you see my code at the "load" event of my JsonStore I have insert this line of code :

console.dir(records);

When I click on any of my Tree nodes this line of code return to me the JsonStore data and are correct.

I don't know if you have see that or you mean something else ?

Also because I'm new on JavaScript debugging I don't know how to debug my code in real time.
Do you have any tutorial to show me ?

Best regards
Merianos Nikos

fay
14 Dec 2009, 6:09 AM
See: http://www.extjs.com/learn/Ext_FAQ_Debugging#Use_a_debugger

merianos
14 Dec 2009, 7:11 AM
Somebody to help ?

I can't find the solution ! :(

As I see the data are loaded on JsonStore but there are not loaded on DataView !

How to fix this isue ?

Best regards
Merianos Nikos