Archive

Posts Tagged ‘grid’

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

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