Erhan is typing…

WebDevelopment , PHP, Javascript, CakePHP, ExtJS

Items Per Page Plugin for ExtJS

| Comments

It is a plugin to change dynamically the number of items displayed in a grid.

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

/**
 * ExtJS component to display number of items per page
 * 
 * @copyright       2009 Erhan Abay
 * @author          Erhan Abay
 * @version         $Revision$
 * @lastmodified    $Date$
 */
Ext.ux.PerPageField = Ext.extend(Object, {

  beforeText : '',
  afterText : 'items per page',

  constructor : function(config) {
      Ext.apply(this, config);
  },

  init : function(grid) {
      this.grid = grid;

      this.grid.on({
          render : function() {
              this.grid.bottomToolbar.add(['-', '-',
                      this.beforeText, this.combo,
                      this.afterText]);
          },
          scope : this
      });

      this.combo = new Ext.form.ComboBox({
          store : ['5', '10', '20', '50', '100', '200'],
          mode : 'local',
          triggerAction : 'all',
          width : 50,
          listClass : 'x-combo-list-small',
          maskRe : /^[0-9]$/,
          value : grid.bottomToolbar.pageSize,
          listeners : {
              'collapse' : function(f) {
                  this.triggerEvent(f);
              },

              'specialkey' : function(f, e) {
                  if (e.getKey() == e.ENTER) {
                      this.triggerEvent(f);
                  }
              },
              scope : this
          }
      });
  },

  triggerEvent : function(f) {
      var o = {
          start : 0
      };
      var v = parseInt(f.getRawValue());
      this.grid.store.baseParams = this.grid.store.baseParams || {};
      this.grid.store.baseParams['limit'] = v;
      this.grid.bottomToolbar.pageSize = v;
      this.grid.store.reload({
          params : o
      });
  }
});

Ext.preg('perpagefield', Ext.ux.PerPageField);
Usage
1
2
3
4
5
6
7
8
9

var grid = new Ext.grid.GridPanel({
...
    plugins: [{
        ptype: 'perpagefield',
        beforeText: '',
        afterText: ''
    }],
...
});

Firefox localhost redirection solution

| Comments

This applies to Windows 7 and Firefox 3.52. I don’t know it works on other versions.

If your Firefox redirects localhost to www.localhost.com and makes you crazy follow the steps:

  • Open C:\Windows\System32\drivers\etc\hosts and remove # from 127.0.0.1       localhost. Don’t forget to open file with administrator rights otherwise you cannot save it. If  you can’t find the way, copy the file to desktop, edit and move to the original location.
  • Open network connection properties and disable IPv6

Windows 7 port 80 issue

| Comments

Bottom line comes first:

Don’t install any software if you don’t need it

If you wanna install Apache (or any other software which listens port 80 by default) on Windows 7 be sure those following services are stopped or not installed:

  • SQL Server Reporting Services (MSSQLSERVER)
  • SQL Server Integration Services 10.0

Don’t forget to set Startup type setting to Manual or Disabled.

PHP: lcfirst

| Comments

I need to make the first character of the string lowercase. I know ucfirst exists and I supposed that there is a [lcfirst](http://us2.php.net/manual/en/function.lcfirst.php) one as well.

When I started to type lcfirst, Zend Studio didn’t suggest me a function with this name and it was interesting. PHP documentation says that it is available but it throws an exception. What the hack goes wrong?

Here is the answer: It was too late and too hard to keep my eyes open :)

lcfirst function is available in newly released version of PHP, 5.3. I am still using 5.2.9. Here is a code snippet:

1
2
3
4
5

if (!function_exists('lcfirst')) {
    function lcfirst($string) {
        return substr_replace($string, strtolower(substr($string, 0, 1)), 0, 1);
    }
}

It is unbelivable that I don’t ever need the function lcfirst before. :)

Ext.Direct for ASP.NET MVC

| Comments

Sorry, I forgot that I have a blog. :)

Classic ASP was the last scripting language that I used from the universe of Microsoft. PHP is enough to make me happy and my clients. (Hey!, which client cares about the language of your choice? :D

Anyway, I won’t make a comparison of languages. I am not that stupid. I just want to tell you something about how I am impressed with Ext.Direct and the server-side stack for ASP.NET MVC.

DWR is popular enough in Java world. They know a lot the concept of remoting server-side methods to the client-side. Ext.Direct has implementations for several other languages and frameworks. Sadly, CakePHP is not in the list of supported frameworks but ASP.NET MVC has one of the powerful one.

You define couple of config values in web.config and that’s all! Just extend your controller from DirectController and use DirectResult typed methods to return your result to the browser. You can use several attributes for classes and methods to hide them in Ext.Direct remoting api object returned to the browser.

By the way, I was curious about ASP.NET. I learned MVC pattern from CakePHP. C# and PHP have similar syntax. Those smooth out my learning curve in ASP.NET MVC. We can discuss pros and cons of ASP.NET etc. but one thing is clear, Visual Studio. I am using Zend Studio and have tried several others but I have never met that quality of IDE before.

Finally, you are right. It is hard to follow. I was talking about ASP, PHP, then Ext.Direct and ASP.NET MVC came to the picture. Let’s say that this post is a sign of life. :D

I have a lot to share with you, jQuery, Mootools, Zend Framework, Posh, gadget development, new released ExtJS 3.0, Moodle, PHP 5.3 release, and much more…

Simplifying Icon Management in Ext JS

| Comments

New version of Ext JS, 2.2.1, is announced and we are so happy, aren’t we? ;)

Another Ext JS news: Ext Conference 2009. I wish, I could attend. I hope, I am going to be there in the next conference…

In this short tutorial, I am going to show you to simply the icon management in Ext JS. It is not a complete solution. If you want to see a more professional one, see Ext.ux.TDGi.iconMgr from TDG innovations.

When you want to use icons in your Ext JS application you either have to use icon config option by giving path to your icon or iconCls by defining a new CSS class. The latter one is more prefferable way of doing it but it means that you need to define a CSS class for each of your icons. Let’s create a new function to make it easy!

1
2
3
4
5
6
7

Ext.ux.Icon = function(icon){
  var path = 'img/icons/';
  if(!Ext.util.CSS.getRule('.icon-'+icon)){
    Ext.util.CSS.createStyleSheet('.icon-'+icon+' { background-image: url('path+icon+'.png) !important; }');
  }
  return 'icon-'+icon;
}

Change the value of path where your PNG icons are located. Don’t tell me you don’t hear the famous icon collection from famfamfam!

And call it like:

1
2
3

...,
iconCls: Ext.ux.Icon('excel'),
...,

It is going to add a new CSS rule icon-excel with background-image excel.png and add it to the head of your page.

I can hear you say why you have to use PNG extension? You are right, you don’t have. Just modify Ext.ux.Icon by adding a second argument, maybe, called as extension and pass the icon’s extension:

1
2
3
4
5
6
7

Ext.ux.Icon = function(icon, extension){
  var path = 'img/icons/';
  if(!Ext.util.CSS.getRule('.icon-'+icon)){
    Ext.util.CSS.createStyleSheet('.icon-'+icon+' { background-image: url('path+icon+'.'+extension+') !important; }');
  }
  return 'icon-'+icon;
}

1
2
3

...,
iconCls: Ext.ux.Icon('excel', 'png'),
...,

or by removing the extension part and passing the name of icon with its extension:

1
2
3
4
5
6
7

Ext.ux.Icon = function(icon){
  var path = 'img/icons/';
  if(!Ext.util.CSS.getRule('.icon-'+icon)){
    Ext.util.CSS.createStyleSheet('.icon-'+icon+' { background-image: url('path+icon+') !important; }');
  }
  return 'icon-'+icon;
}

1
2
3

...,
iconCls: Ext.ux.Icon('excel.png'),
...,

Don’t use Ext.ux.Icon if you are going to use hundreds of CSS rules because each class is defined in its own “style” tag and it can affect browser rendering performance.

It’s not important what you think, it’s important what you do… :)