Ext JS Trivia Guide

Good afternoon, habra users! Today I would like to share with the problems that usually repel respectable programmers from using the framework - Ext JS. I will describe a specific situation: one day, after some time spent exploring the possibilities that Ext JS offers, there is an overwhelming desire to try it “in action”. The distribution kit downloads, is installed on a local server and beautiful examples of grids, forms and even the finished desktop are launched! The developer changes a couple of "phishing", everything seems to be easy and simple. Reasonably in the head of a boy scout there is an idea to make a certain commercial project on Ext JS (most often these are various types of CMS, admin panels, CRM). And here the most interesting begins ...

After a week of working with Ext JS, the head of a scout begins to semi-automatically generate thoughts of his own insignificance and the incredible complexity of Ext JS. And, offended by Ext JS, the developer is waving the ashes of the desire to work on this framework downwind. It's a pity…

Therefore, in this article I want to describe the problems that I encountered while developing a content management system and solving these problems. All examples tested on Ext JS version 3.4 .

1. Automatic adjustment of the size of the contents of the window.
Task: embed a form (Ext.form.FormPanel) into Ext.Window. The first thing that comes to mind:
')

Ext.onReady(function(){ var win = new Ext.Window({ title: "title", border: false, width: 400, height: 400, items: [{ width: 390, height: 380, items: [new Ext.form.FormPanel({ frame: true, items: {xtype: 'textfield'} })] }] }); win.show(); }); 

In this case, the developer needs to "fit" the size of the form to the window size. If fitted incorrectly, an annoying white stripe appears below:



For this situation, the Ext JS developers provided the layout parameter in the Ext.Window configuration. Layout is used specifically for this case: 'fit':

 Ext.onReady(function(){ var win = new Ext.Window({ title: "title", border: false, width: 400, height: 400, layout:'fit', items: [ new Ext.form.FormPanel({ frame: true, items: {xtype: 'textfield'} }) ] }); win.show(); }); 

2. The division of form fields into 2 or more columns (or placing several form fields on one line).
If you simply register several form fields in the form items, they will line up exactly under each other, something like this:

 Ext.onReady(function(){ var win = new Ext.Window({ title: "title", border: false, width: 400, height: 200, layout:'fit', items: [ new Ext.form.FormPanel({ frame: true, items: [{ xtype: 'textfield', fieldLabel: 'field1' },{ xtype: 'textfield', fieldLabel: 'field2' },{ xtype: 'textfield', fieldLabel: 'field3' },{ xtype: 'textfield', fieldLabel: 'field4' }] }) ] }); win.show(); }); 

We also want it to be like this:



This is done like this:
(Attention! It takes a bit of logical thinking to understand the next piece of code.)

 Ext.onReady(function(){ var win = new Ext.Window({ title: "title", border: false, width: 400, height: 200, layout:'fit', items: [ new Ext.form.FormPanel({ frame: true, //       layout: 'column', defaults: { xtype: 'form', columnWidth:0.5, labelAlign: 'top', anchor: '100%' }, //   // 1 items: [{ // 2,  1 items:[{ xtype: 'textfield', fieldLabel: 'field1' },{ xtype: 'textfield', fieldLabel: 'field2' }] },{ // 3,  2 items:[{ xtype: 'textfield', fieldLabel: 'field3' },{ xtype: 'textfield', fieldLabel: 'field4' }] }] }) ] }); win.show(); }); 

So. Let's start the analysis of the code. The first thing you need to separate the form into columns is the layout: 'column' parameter, which tells the form that the form should be divided into columns. Next comes the defaults parameter, which reports the default settings for the child items. These settings are passed to every object in this array (items 2, items 3 objects).

Why are there so many parameters in defaults and why are they needed for simple partitioning of the form into columns? I answer:
xtype: 'form' - without this parameter, the fieldLabel for each field would not be displayed,
columnWidth - defines the default column width (in objects 2 and 3, you can override the column width),
labelAlign - defines the position of the fieldLabel (top - on top),
anchor - the percentage width of objects 2 and 3.

Also note that, unlike the previous example, one more nesting level is added to the items in object 1.

3. Managing the rendering of records in the grid.
It often happens that you want to somehow change the contents of a grid cell, depending on the future value of this content. The grid parameter renderer comes to the rescue.

Suppose we have a grid at the start:



Source:

 var data = { totalCount : 3, banners: [{"is_active": 0,"ID": 1},{"is_active": 0,"ID" : 3},{"is_active": 1,"ID": 4}] } var view = new Ext.Viewport({ layout: 'fit', items: [{ xtype: 'grid', columns: [ {header: "ID", align : 'left', width: 30, sortable: true, dataIndex: 'ID'}, { header: "", align : 'left', width: 100, sortable: true, dataIndex: 'is_active' } ], store: new Ext.data.GroupingStore({ data: data, fields: [{name: 'ID'},{name: 'is_active'}], reader: new Ext.data.JsonReader({ root: 'banners', totalProperty: 'totalCount', id: 'ID' }, Ext.data.Record.create([ {name: 'ID'}, {name: 'is_active'} ]) ) }), view: new Ext.grid.GridView({ forceFit: false, }), listeners: {} }] }); view.render(Ext.getBody()); }); 

You can do this:


Source:

 var renderActivity = function(val) { if(val == 1) return "<span style='color: green'>"+val+"</span>"; else return "<span style='color: red'>"+val+"</span>"; } var data = { totalCount : 3, banners: [{"is_active": 0,"ID": 1},{"is_active": 0,"ID": 3},{"is_active": 1,"ID": 4}] } var view = new Ext.Viewport({ layout: 'fit', items: [{ xtype: 'grid', columns: [ {header: "ID", align : 'left', width: 30, sortable: true, dataIndex: 'ID'}, { header: "", align : 'left', width: 100, sortable: true, dataIndex: 'is_active', renderer: renderActivity } ], store: new Ext.data.GroupingStore({ data: data, fields: [{name: 'ID'},{name: 'is_active'}], reader: new Ext.data.JsonReader({ root: 'banners', totalProperty: 'totalCount', id: 'ID' }, Ext.data.Record.create([ {name: 'ID'}, {name: 'is_active'} ]) ) }), view: new Ext.grid.GridView({ forceFit: false, }), listeners: {} }] }); view.render(Ext.getBody()); }); 

As you can see, the renderActivity function was first added, which colors the cell contents depending on the value in green or red. Further this function is called in the description of the settings of the column “Activity” - renderer: renderActivity. Thus, the contents of grid cells can be easily and simply changed for any, even, sometimes, not quite decent, needs.

If you dedicate more time to exploring Ext JS, you really are amazed at the flexibility this framework provides. Many say that Ext JS sites are difficult to customize. Do not believe it. Personally, I think that the framework simply has a high enough entry threshold.

Developing on Ext JS for about a year, I “ate more than one dog.” I have a lot of such little things. Therefore, if the community wants to continue reading my articles on Ext JS, I will be happy to write them.

On this you please finish my first article, I hope you liked it.