PDA

View Full Version : loadMask: true in Ext.ux.Portlet



meanrat
24 Sep 2009, 7:31 AM
Dear people,

Below is my code, but I don't see the loading-box appear before rendering the grid. I think it might be because 'loadMask: true' is not possible within a ux.Portlet. Is there a solution to add a loadMask?



var newsPanel = new Ext.ux.Portlet({
id: 'thisPanel',
layout: 'fit',
title: 'News',
tools: tools,
loadMask: true,
items: [{
xtype: 'grid',
store: newsStore,
autoHeight: true,
columns: [
<?php
$js_body = array();

foreach($this->columns as $columnName => $column) {
$js_body[] = sprintf(
"{ id: '%s', dataIndex: '%s', header: '%s', width: %s }",
$columnName,
$columnName,
$column['columnTitle'],
$column['width']);
}

echo implode(", ", $js_body);
?>
],
afterRender : function() {
this.getSelectionModel().singleSelect = true;
this.on('rowdblclick', function(e) {
window.location = '<?php echo url('News/Edit') ?>?id=' + this.getSelectionModel().getSelected().id;
});
}
}]
});

hendricd
24 Sep 2009, 7:41 AM
@meanrat--
Portlets do not have builtin loadMask support, but the GridPanel does. Why not use it?
(Don't load the store until the Grid is rendered.)


var newsPanel = new Ext.ux.Portlet({
id: 'thisPanel',
layout: 'fit',
title: 'News',
tools: tools,

items: [{
xtype: 'grid',
store: newsStore,
autoHeight: true,
loadMask: {msg: 'Loading Articles..'},
columns: [
<?php
$js_body = array();

foreach($this->columns as $columnName => $column) {
$js_body[] = sprintf(
"{ id: '%s', dataIndex: '%s', header: '%s', width: %s }",
$columnName,
$columnName,
$column['columnTitle'],
$column['width']);
}

echo implode(", ", $js_body);
?>

],
afterRender : function() {
this.getSelectionModel().singleSelect = true;
this.store.load(); //shows the loadMask
this.on('rowdblclick', function(e) {
window.location = '<?php echo url('News/Edit') ?>?id=' + this.getSelectionModel().getSelected().id;
});
}
}]
});

meanrat
24 Sep 2009, 11:41 PM
Tnx for the help. But it actually does not solve the problem so far. First I got the problem CM is undefined. When looking at a grid-example on this site, I noticed that 'items:' was not used with a GridPanel. So I removed that. Success, the grid was loading, but I got to problems now:

1. The loading mask is still not showing
2. The blue title 'News' is not showing anymore (it was with the portlet)



var newsPanel = new Ext.grid.GridPanel({
id: 'thisPanel',
layout: 'fit',
tools: tools,
loadMask: {msg: 'Loading data...'},
store: newsStore,
autoHeight: true,
columns: [
<?php
$js_body = array();

foreach($this->columns as $columnName => $column) {
$js_body[] = sprintf(
"{ id: '%s', dataIndex: '%s', header: '%s', width: %s }",
$columnName,
$columnName,
$column['columnTitle'],
$column['width']);
}

echo implode(", ", $js_body);
?>
],
autoExpandColumn: 'title',
title: 'News',
afterRender : function() {
this.getSelectionModel().singleSelect = true;
this.store.load();
this.on('rowdblclick', function(e) {
window.location = '<?php echo url('News/Edit') ?>?id=' + this.getSelectionModel().getSelected().id;
});
}
});


Thanks for the help again.
Maarten

meanrat
25 Sep 2009, 4:06 AM
Still haven't figured it out yet, but I found out about another problem. When I use GridPanel, I can't drag it anymore. I really want to drag the grid to specific places on my webpage. That's more important than a loader. Can I use anything other than GridPanel so I can have both the loader and a draggable grid?

Best regards...

hendricd
25 Sep 2009, 4:25 AM
Still haven't figured it out yet, but I found out about another problem. When I use GridPanel, I can't drag it anymore. I really want to drag the grid to specific places on my webpage. That's more important than a loader. Can I use anything other than GridPanel so I can have both the loader and a draggable grid?

Best regards...

Easy, just place the same Grid in an Ext.Window (with layout:'fit').

footballermahesh
25 Sep 2009, 5:05 AM
load_msg = new Ext.LoadMask(Ext.getBody(),{msg:"Loading Please wait..."});
load_msg.show();

// then in the Grid store on load..define like this


MYstore.on({
'load': {
fn: function() {
load_msg.hide();
}
}
});


//or after the panel render
window.show();
load_msg.hide();

meanrat
25 Sep 2009, 6:25 AM
Tnx for the hint.

First, I find it hard to learn Ext JS. I still don't see the clue to the system. When you say it's easy...just add the gridPanel to an Ext.Window. Ha! Easy? No! I know what you mean, but how to accomplish it? Searching on the forum for the right solution is more of a needle in a haystack than searching for PHP solutions. But...i managed to find something similar.

This is what I've done so far:


var newsWindow = new Ext.Window({
id: 'elWindow',
title: 'News',
layout: 'fit',
width: 500,
height: 300
});

newsWindow.on('show', function() {
var newsPanel = Ext.grid.GridPanel({
id: 'thisPanel',
layout: 'fit',
xtype: 'grid',
store: newsStore,
autoHeight: true,
loadMask: {msg: 'Loading...'},
columns: [
<?php
$js_body = array();

foreach($this->columns as $columnName => $column) {
$js_body[] = sprintf(
"{ id: '%s', dataIndex: '%s', header: '%s', width: %s }",
$columnName,
$columnName,
$column['columnTitle'],
$column['width']);
}

echo implode(", ", $js_body);
?>
],
afterRender : function() {
this.getSelectionModel().singleSelect = true;
this.store.load(); //shows the LoadMask
this.on('rowdblclick', function(e) {
window.location = '<?php echo url('News/Edit') ?>?id=' + this.getSelectionModel().getSelected().id;
});
}
});
});


Unfortunately nothing appears in the window. No grid, just a Window with lightblue in it. Empty.

Now, I am interested in how to fill the grid with my store. But...actually it is not what I am looking for after all. This window is draggable all over the screen. And we have a system where there are area's where you can drop your panel in. This window is not locking to those area's.

Hopefully there's still a solution. If not, can you still please explain how to fill in the grid? It's interesting, for I think it'll help me learning Ext JS.

Tnx
Maarten

hendricd
25 Sep 2009, 6:43 AM
@meanrat -- Close, but no. This way:


var newsWindow = new Ext.Window({
id : 'elWindow',
title : 'News',
layout : 'fit',
width : 500,
height : 300,
constrain : true,
items : [
new Ext.grid.GridPanel({
id : 'newsGrid',
store: newsStore,
autoHeight: true, //managed by the fit layout now.
loadMask: {msg: 'Loading...'},
columns: [
<?php
$js_body = array();

foreach($this->columns as $columnName => $column) {
$js_body[] = sprintf(
"{ id: '%s', dataIndex: '%s', header: '%s', width: %s }",
$columnName,
$columnName,
$column['columnTitle'],
$column['width']);
}

echo implode(", ", $js_body);
?>
],
afterRender : function() {
this.getSelectionModel().singleSelect = true;
this.store.load(); //shows the LoadMask
this.on('rowdblclick', function(e) {
window.location = '<?php echo url('News/Edit') ?>?id=' + this.getSelectionModel().getSelected().id;
});
}
})
]
});

Now, I am interested in how to fill the grid with my store. But...actually it is not what I am looking for after all. This window is draggable all over the screen. And we have a system where there are area's where you can drop your panel in. This window is not locking to those area's.
Clearly there is much you haven't mentioned about your goals in this project. :-?
Keep moving with basics first. Get comfortable with Layouts and getting that store loaded.

Worry about Drag/Drop zones and targets next week. ;)

meanrat
1 Oct 2009, 1:50 AM
Hey there, thanx again for help.

I managed now to put a gridpanel in a window, still the loading mask does NOT show.

But before you help me with the above, let me point out what I...or rather, what WE want here. You were right about being a bit vague about what the end result should be. Well, this is it:

We have several panels (now they're all portlets) divided into two rows, left and right. You can drag the panels to the left and the right row, or in the same row above or below other panels. When you do so, you will see dotted lines where the panel will lock on when you release your mouse button. What we still miss, is a loading mask for each grid before the grid is fully loaded.

The result I got with the above solution not only looks different, it is also a floating panel. Just drag it anywhere on the page, it'll stick right where you release it. It does NOT lock on to our left or right rows. And actually...there's not even a loading mask.

I hope either that you can tell me the solution, or (maybe rather) that you can point out the direction where I have to go. Again, Ext JS is very new to me, and I'm having a hard time learning it with so few documentation and examples on the internet, in comparison to PHP solutions. Thanx again for all the help and best regards...

Maarten