Archive

Posts Tagged ‘ExtJS’

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,
	...

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

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: ,

Problem with scrolling in ExtJS 4.0.7 Grid object

February 13th, 2013 No comments

Version 4 instead of scrolling which creates browser uses his scroll. It often happens that in its content “freeze”. Version 4.1 is returned to the natural scroll. For those who still use some of the 4.0.x version here’s the solution:

Ext.define('Ext.ux.grid.Panel', {
  extend: 'Ext.grid.Panel',
 
  initComponent: function()
  {
    var me = this;
    me.callParent(arguments);
    me.on('scrollershow', function(scroller)
    {
      if (scroller && scroller.scrollEl) {
        scroller.clearManagedListeners();
        scroller.mon(scroller.scrollEl,'scroll',scroller.onElScroll,scroller);
      }
    });
  },
 
  onViewRefresh: function()
  {
    var me = this;
    try { me.callParent(); }
    catch (e) {};
  }
});

This code is set at the top of the page, or save as a separate file and load. In your code instead of calling the object

Ext.create('Ext.grid.Panel', { ...

do this:

Ext.create('Ext.ux.grid.Panel', { ...
Categories: JavaScript Tags: ,

Combobox loadMask issue

February 13th, 2013 No comments

The problem is visible in ExtJS 4.0.7. It happens, not always. The list is loaded, but the mask stays over so the combobox automatically unusable.

The problem is solved in version 4.1, but for those who are still using 4.0.7 here’s the solution. Somewhere at the beginning of the code, insert code that overwrites the original loadMask attribute:

Ext.override(Ext.LoadMask,
{
    onHide: function() { this.callParent(); }
});

This code switches automatically solves the problem at all combobox fields on the page.

Categories: JavaScript Tags: ,

ExtJS4 Grid Cell click event

February 13th, 2013 No comments

If you need to Grid object react by clicking on a specific cell, not the entire row, this post is for you. It was first implemented into the ExtJS 3. On this occasion used the index of the column, can not use the name of the column used for the header.

Example of adding events would be:

	
listeners: {
    cellclick: function(gridView,htmlElement,columnIndex,dataRecord)
    {
        if(columnIndex == 3) {
            // Here insert the code that will be executed
            // when you click on the 4th column in the Grid object
        }
    }
}
Categories: JavaScript Tags: , ,

Tab tooltip in ExtJS4

November 24th, 2012 No comments

The third version of the popular work environment existed attribute for this action. It is tabTip attribute. In version 4 is thrown but here are two suggestions on how to do this.
The first uses tabConfig attributes as follows:

tabConfig : {
    tooltip:'tooltip text'
}

The second method is using the tab object as follows:

tabObj.tab.setTooltip('tooltip text');
Categories: JavaScript Tags: ,

(srpski) ExtJS 4 Selektovanje tacke stabla na osnovu internog ID-a

November 24th, 2012 No comments

Sorry, this entry is only available in Serbian.

Categories: JavaScript Tags: , ,