Archive

Archive for the ‘JavaScript’ Category

Leap year

January 31st, 2015 No comments

Here’s an Javascript example how to check if a year is leap r not:

var isLeap = (((cYear%4)==0) || (((cYear%100)!=0) && ((cYear%400)==0)));

Where cYear variable where is stored the year number.

Categories: JavaScript Tags:

Adding QTips to GridPanel cell in ExtJS 4.0

November 8th, 2014 No comments

Need to add a custom tooltip (quick tip) to cell in a GridPanel in ExtJS 4.0? In your column definitions, simply add a attribut “rendered”, passing a custom function.

...
columns [
    ...
    {
      text:"Bookmark", 
      dataIndex:"title", 
      flex:1, 
      renderer:function(value,metaData) 
      {
        metaData.tdAttr = 'data-qtip="' + value + '"';
        return value;
      }
    },
    ...
}
...

A couple notes:

  1. To show tooltip, you need to add line “Ext.QuickTips.init();” before Grid definition
  2. data-qtip is one of four attributes for tooltip. Tooltip attributes are:
    • data-qtip – Set tooltip text content
    • data-qtitle – Set the title
    • data-qwidth – Set tooltip width
    • data-qalign – Represented by a reference point that corresponds to the original, which reference point. For example: “tl-br” is represented by the tip of the upper left corner, corresponding to the lower right corner of the original

With such a modification, you get a nice tooltip generated for each cell in your grid.

Categories: JavaScript Tags: , ,

Extjs4 tree (un)check all children

October 20th, 2014 No comments

If you use Extjs treePanel with checkbox to select elements, here’s the solution how to check/decheck all tree elements.

Example for check:

Ext.getCmp('tree-list').getRootNode().cascade(function(n) 
{
    n.set("checked",true); 
});

Example for uncheck:

Ext.getCmp('tree-list').getRootNode().cascade(function(n) 
{
    n.set("checked",false); 
});
Categories: JavaScript Tags: ,

Extjs change grid cell background based on value

October 20th, 2014 No comments

If you want to change the color of a Grid cell Grid, use the renderer attribute.
Example: Suppose you have a cell that has a numeric value. If this value is greater than 0, then the background color is green, otherwise it is red.
Here’s a code that describes:

renderer : function(v, md) 
{
    if(parseInt(v) > 0)
        md.style = "background-color:green;";
    else
        md.style = "background-color:red;";
}

Extjs 4 only numbers textfield

February 17th, 2014 No comments

ExtJS 4 contains the field type “numberfield” to enter numbers. If the numbers have a lot of digits, this field can create problems. On this occasion, it can help a text field (“textfield”) with a filter for input only numbers.

Within the setting properties of the text field, enter the attribute “maskRe”. It allows you to create masks with regular expressions. Here is a mask that allows you to enter only the numbers:

    maskRe:/[0-9.]/
Categories: JavaScript Tags: ,

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';