Set background color for Grid column in ExtJS4

August 6th, 2013 1 comment

If you need a specific grid column set to a different color, for example. red, you can do the following:

  • In the column settings for a given column add the attribute tdCls:’cell-red’ where the cell-red is CSS class and then
  • In the CSS file where the styles for your application (be sure the CSS load after extjs-all.css) add the following line:
    .cell-red	.x-grid-cell-inner	{ background-color:#ffe0e0; } 
    

If necessary, you can further modify column style.

How to eliminate ExtJS form to post emptyText?

July 27th, 2013 No comments

If you insert emptyText attribute in the form field, do not forget to set the attribute

submitEmptyText: false

in the part of the confirmation form. If you do not do this, the text of the attribute emptyText will be sent as a regular content.

Example:

this.up('form').getForm().submit({
	method			: 'POST',
	params			: { kontakti:izmene_kontakti },
	waitMsg			: core_messages.snimanje,
	submitEmptyText	: false,
	...

Delete selected rows in Grid

July 27th, 2013 No comments

Here’s an example of how to delete selected row in the Grid object:

I guess that somewhere you have a button that will click to perform the action. In this example, it is a button located in the toolbar on the grid object

tbar : [{
    iconCls: 'cross- line ',
    text: 'Delete',
    tooltip:{ title:'Delete Rows' , text: 'Delete selected rows' },
    handler : function(ths, e)
    {
       Ext.Msg.confirm('Delete Confirmation', 'Delete selected rows?', function(btn)
        {
            if (btn == 'yes') {
                store_object.remove( ths.up('grid').
                                         getView().
                                         getSelectionModel().
                                         getSelection() );
            }
        });
    }
}]

If the user confirms delete, the selected rows will be removed from the store. In order to reach the selected rows is necessary to pass through the structure.

“ths” variable is the first in a series. She points to the button that we clicked. The button is part of the grid toolbar. The function up (‘grid’) take the first grid that is above it in the hierarchy (the parent). In a similar way you can request other objects, e.g. tree or form. When you get the grid object, pass through it and take the selected rows.

Removing the refresh button of the pagination object

July 27th, 2013 1 comment

When turned on paging (Pagination object) within the grid object receives the full range of tools for navigation. Once I had a request to turn off the refresh button on this line and move it to the toolbar located above the grid object. The procedure would be as follows:

First you need to exclude refresh button in the navigation as follows:

...
	bbar: Ext.create('Ext.toolbar.Paging', {
		store			: storeObject,
		displayInfo		: true,
		beforePageText	: 'Page',
		afterPageText	: 'of  {0}',
		displayMsg		: 'Elements {0} - {1} of {2}', 
		emptyMsg		: 'No elements',
		listeners		: { afterrender	: function() { this.child('#refresh').hide(); } }
    }),
...

The point is to follow the event “afterRender”, more precisely, to wait until the object is displayed on the page. Then, the hides a button whose itemId is “#refresh”. Similarly, you can disable any of the elements in the navigation.

After this, insert a refresh button to the toolbar and in handler add:

storeObject.pageLoad(storeObject.currentPage);

Create PHP object without class

July 20th, 2013 No comments

Within JavaScript, you can easily create an object without the class as follows:

myObj = {};
myObj.abc = "Here we go";

Within PHP, you can do the following:

$myObj = new stdClass();
$myObj->abc = 'Here we go';

Set timezone from MySQL

July 20th, 2013 No comments

Date and time within MySQL, you can check with NOW() (MySQL does not distinguish between uppercase and lowercase, so you can write now()). An example would be:

mysql> select now();
+---------------------+
| now()               |
+---------------------+
| 2013-07-20 11:11:11 | 
+---------------------+
1 row in set (0.00 sec)

If the time differs from the time in your time zone, use the following command to set the appropriate timezone:

SET GLOBAL time_zone = '+1:00';
Categories: MySQL Tags: ,

Apply Defaults attribute to all grid columns

July 20th, 2013 No comments

In almost every object that has a list in the ExtJS 4 it is possible to extract common attributes in the defaults section. The following is an example of how to do a column Grid object.

The first example without using defaults attribute:

var mygrid = Ext.create('Ext.grid.Panel', {
    //... store config, other config...
    columns: [
        { 
            header: 'ID', 
            dataIndex: 'id',
            hidden:true,
            sortable:true,
            width:65
        },
        {
            header: 'Firma', 
            dataIndex: 'company_name', 
            hidden:false, 
            sortable:true, 
            width:100
        },
        { 
            header: 'Adresa', 
            dataIndex: 'company_address', 
            hidden:false, 
            sortable:true, 
            width:100 
        }
    ]
});

Now an example with defaults attribute:

var mygrid = Ext.create('Ext.grid.Panel', {
    //... store config, other config...
    columns: {
        items: [
            { 
                header: 'ID', 
                dataIndex: 'id', 
                width: 65, 
                hidden:true 
            },
            { 
                header: 'Firma', 
                dataIndex: 'company_name' 
            },
            { 
                header: 'Adresa', 
                dataIndex: 'company_address' 
            }
        ],
        defaults: { 
            hidden:false, 
            sortable:true, 
            width:100 
        }
    }
});
Categories: JavaScript Tags: ,

In ExtJS 4.2 hidden field occupies space

May 21st, 2013 No comments

ExtJS 4.2 has been with us for some time and like every first major version has minor errors. One of them is that the hidden fields in the form are not entirely hidden. The fields are not visible, but they can be seen in the table that the field is thus creates about 3-5px height for each hidden field.

Error has been detected by the people of Sencha team and will be corrected in the next version. In the meantime, here’s a simple way how to patch. In the CSS file that you use for your style insert the following line

.x-form-item-hidden { display:none; }

CSS style is in the above table. In this way, the hidden field become completely hidden.

More about this problem

ExtJS 4 – Tree Grid with lines

May 14th, 2013 No comments

ExtJS 4 gives you the ability to combine two objects: Tree and Grid. To do this you need to add the attribute “column” in the object tree. You specify the columns you want to display, as it did for the grid. Tree is shown in this way there is no border bottom which separates the rows.\r\n\r\nnull\r\n\r\nIf you want to display lines need to create additional CSS style that will then be included in the configuration part of tree. For this occasion, I create two styles:\r\n\r\n\r\n.border-line &gt; td {\r\n border-bottom: 1px solid #eee !important;\r\n}\r\n.border-cell &gt; td {\r\n border-bottom: 1px solid #eee !important;\r\n border-right: 1px solid #eee !important;\r\n}\r\n\r\n\r\nThe second step is to call the appropriate style as follows:\r\n\r\n\r\nviewConfig: {\r\n getRowClass: function(record) { return ”border-line”; }\r\n}\r\n\r\n\r\nAbove code will create a line under each row of trees that might look something like this:\r\n\r\nline\r\n\r\nAnd if you replace “<em>border-line</em>” with “<em>border-cell</em>”, you can get an effect similar to the following figure:\r\n\r\ncellExtJS gives you the ability to combine two objects: Tree and Grid. To do this you need to add the attribute “column” in the object tree. You specify the columns you want to display, as it did for the grid. Tree is shown in this way there is no border bottom which separates the rows.\r\n\r\nnull\r\n\r\nIf you want to display lines need to create additional CSS style that will then be included in the configuration part of tree. For this occasion, I create two styles:\r\n\r\n\r\n.border-line &gt; td {\r\n border-bottom: 1px solid #eee !important;\r\n}\r\n.border-cell &gt; td {\r\n border-bottom: 1px solid #eee !important;\r\n border-right: 1px solid #eee !important;\r\n}\r\n\r\n\r\nThe second step is to call the appropriate style as follows:\r\n\r\n\r\nviewConfig: {\r\n getRowClass: function(record) { return ”border-line”; }\r\n}\r\n\r\n\r\nAbove code will create a line under each row of trees that might look something like this:\r\n\r\nline\r\n\r\nAnd if you replace “<em>border-line</em>” with “<em>border-cell</em>”, you can get an effect similar to the following figure:\r\n\r\ncellExtJS gives you the ability to combine two objects: Tree and Grid. To do this you need to add the attribute “column” in the object tree. You specify the columns you want to display, as it did for the grid. Tree is shown in this way there is no border bottom which separates the rows.

null

If you want to display lines need to create additional CSS style that will then be included in the configuration part of tree. For this occasion, I create two styles:

.border-line &gt; td {
  border-bottom: 1px solid #eee !important;
}
.border-cell &gt; td {
  border-bottom: 1px solid #eee !important;
  border-right: 1px solid #eee !important;
}

The second step is to call the appropriate style as follows:

viewConfig: {
  getRowClass: function(record) { return 'border-line'; }
}

Above code will create a line under each row of trees that might look something like this:

line

And if you replace “<em>border-line</em>” with “<em>border-cell</em>”, you can get an effect similar to the following figure:

cell

Date validation in PHP

May 10th, 2013 No comments

What happens if a user enters as birthday 31/02/2000.?
Is the date will be properly stored in the database?

Of course not. 03.03.2000 will be saved, because we have 3 days exceeded the number of days in February. It would be nice to warn him of the mistake. To do this, they would have to make a function that would control date.

PHP already has a function to check the validity date:

bool checkdate(int $month, int $day, int $year);

For the month, day and year, the function will return if the date is correct or not.

Categories: PHP Tags: ,