Jump to content

Progress indicator in UniDBGrid


codeb

Recommended Posts

Hi codeb!

 
Try this:
 
UniDBGrid1 -> ClientEvents -> ExtEvents add reconfigure
function reconfigure(sender, store, columns, oldStore, the, eOpts)
{
  // columns[your_column_index]
  columns[0].width = 110;
  columns[0].renderer = function (v, m, r) { var id = Ext.id();Ext.defer(function () {Ext.widget('progressbar', { renderTo: id, value: v / 100, width: 100 });}, 50);return Ext.String.format('<div id="{0}"></div>', id);};
}

post-906-0-91468400-1388834250_thumb.png

 

http://ext4all.com/post/progress-bar-inside-a-grid-cell

 
Sincerely.
Link to comment
Share on other sites

  • 1 month later...
  • 5 months later...
  • 1 year later...
  • 11 months later...
  • 2 years later...

Sorry, but this trick is not working anymore (at least for me using uniGUI_1.90.0.1514).

First you will think that everything is OK, but under real "usage" conditions it will make everything unstable. 

So
DON'T USE THIS !

Link to comment
Share on other sites

21 minutes ago, Kattes said:

Sorry, but this trick is not working anymore (at least for me using uniGUI_1.90.0.1514).

Well, 6 years..!
There have been many changes on both the ExtJS side and the UniGUI side.

Now use WidgetColumn:

\FMSoft\Framework\uniGUI\Demos\Desktop\Grid - WidgetColumn2

 

  • Like 1
Link to comment
Share on other sites

OK, I got it working, but the example (\FMSoft\Framework\uniGUI\Demos\Desktop\Grid - WidgetColumn2) is not really self explaining.

The screen shot below is using ProgressWidget (column Progr) and some HTML hard coded solution from me (column Progress).

Question: Is there a way to center the widget vertically? I tried it using margins, but that does not seem to work.

image.png.955edb65c2e4c49153bdab93200ace49.png

 

Link to comment
Share on other sites

Actually my approach is not relevant here, but I can of course tell you how I did it:

I simply created in my MySQL DB a table view, which contained a field:

Concat('<progress max="100" value="',Progr,'">',Progr,'%</progress>') as  progress

This made the trick for me. But I am more interested in the widget approach, because it is using pre-defined themes and will look for browsers equal.

Link to comment
Share on other sites

On 2/1/2020 at 1:37 PM, Kattes said:

Just another little cosmetic question. As you can see in the title of the grid, the "g" of the word "progress" is cut off. Can this be cured by a simple CSS statement, too?

Hi,

You can try this CustomCSS:

.x-column-header-inner {
    padding: 5px 10px;
    line-height: normal;
}

 

  • Like 1
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...