EXTJS 4.X: showing nested data in grid columns

Here is the response:

{"orderRequest":[
   {
      "detail":"dfvdfvdfv"
      ,"id":"1"
      ,"orderRequestStatus":{"id":"1","name":"registrada solicitud de pedido"}
      ,"orderRequestStatusId":"1"
      ,"purchaseOrderDate":"2013-05-28T00:00:00-05:00"
      ,"purchaseOrderNumber":"dfvdfv"
      ,"requestorName":"dfvd"
      ,"subject":"fv"
},{
   "detail":"wef"
   ,"id":"51"
   ,"orderRequestStatus":{"id":"1","name":"registrada solicitud de pedido"}
   ,"orderRequestStatusId":"1","purchaseOrderDate":"2013-05-28T00:00:00-05:00"
   ,"purchaseOrderNumber":"wef"
   ,"requestorName":"wef"
   ,"subject":"wef"
},{
  "detail":"fv"
   ,"id":"101"
   ,"orderRequestStatus":{"id":"1","name":"registrada solicitud de pedido"}
   ,"orderRequestStatusId":"1"
   ,"purchaseOrderDate":"2013-05-28T00:00:00-05:00"
   ,"purchaseOrderNumber":"dfvd"
   ,"requestorName":"dfvd"
   ,"subject":"fv"}
]}

The model:

Ext.define('WebMonitorClass.model.OrderRequestModel', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'id'
            ,type: 'int'
        },{
            name: 'subject'
            ,type: 'string'
        },{
            name: 'detail'
                ,type: 'string'
        },{
            name: 'requestorName'
                ,type: 'string'
        },{
            name: 'orderRequestStatusName'
            ,type: 'string'
            ,mapping: 'orderRequestStatus.name' // here
        }               
    ]
    ,idProperty: 'id'    
});

Grid panel columns:

columns:[
            {
                text     : 'ID',
                flex     : 1,
                sortable : false,
                width    : 300,
                dataIndex: 'id'
            },
            {
                text     : 'Nombre Solicitante',
                width    : 150,
                sortable : true,
                dataIndex: 'requestorName'
            },{
                text     : 'Resumen',
                width    : 150,
                sortable : true,
                dataIndex: 'subject'
            },{
                text     : 'Detalle',
                width    : 150,
                sortable : true,
                dataIndex: 'detail'
            },{
                text     : 'Estado',
                width    : 150,
                sortable : true,
                dataIndex: 'orderRequestStatusName' // here
            }
        ]

Reference:
http://stackoverflow.com/questions/10500367/extjs-model-fields-with-subfields

ExtJS4: paggingtoolbar refresh button is not working propertly

The refresh button wasn't refreshing when I was clicking it. After hours of searching on the web I finally got the problem. The initial code was a definition of a gridpanel:


Ext.define('WebMonitorClass.view.BodegaGridPanel', {    
    extend: 'Ext.grid.Panel'
    ,alias: 'widget.bodegaGridPanel'

...
...
...
,store: Ext.create('WebMonitorClass.store.BodegasCrudGridPanelStore')
,bbar: {
            xtype: 'pagingtoolbar'
            ,dock: 'bottom'
            ,store : Ext.create('WebMonitorClass.store.BodegasCrudGridPanelStore')                                   
        }
...
...
...

}

The way to make it work is instantiating the store an setting it to the grid store and to the paging toolbar. All this occurs in the initComponent method  :

Ext.define('WebMonitorClass.view.BodegaGridPanel', {    
    extend: 'Ext.grid.Panel'
    ,alias: 'widget.bodegaGridPanel'
...
...
...
,initComponent: function() {
        
           this.store = Ext.create('WebMonitorClass.store.BodegasCrudGridPanelStore'); // initialize store
        
        this.bbar = Ext.create('Ext.toolbar.Paging', {
            // se obtiene error Uncaught TypeError: Cannot read property 'id' of undefined             
            //xtype: 'pagingtoolbar'
            dock: 'bottom'
            ,store : this.store // setting the previously initialized store to the pagging toolbar
            ,displayInfo: true
            ,displayMsg: 'Displaying topics {0} - {1} of {2}'
            ,emptyMsg: "No topics to display"
            ,listeners: {                
                afterrender: function (component){
                    //component.down('#refresh').hide()
                }
            }                              
            });
        
        this.callParent();
        
    }
...
...
...

}

Resource:
http://try.sencha.com/extjs/4.1.1/community/extjs4-mvc-paging-grid/

ExtJS 4.1: “Uncaught TypeError: Cannot call method 'substring' of undefined”

I was getting the error :

“Uncaught TypeError: Cannot call method 'substring' of undefined”

When I was trying to initialize an object from this class definition:


Ext.define('WebMonitorClass.view.CrearBodegaFormPanel', {    
    extend: 'Ext.form.FormPanel'
    ,alias: 'widget.crearBodegaFormPanel'       
    ,layout:'absolute'
    ,border:false
    ,padding : '0 0 5 0'
    ,bodyStyle:'background-color: #DFE9F6;'
    ,width:360
    ,height:110
    ,initComponent: function() {                                                    
        this.callParent();                                    
    }
    ,items:[
        {xtype: 'bodegaDatosBasicosFieldSet'}
    ]
    ,buttonAlign:"center"
    ,buttons:[]
});

the solution was adding the require config parameter importing the file which that contains the definition of the bodegaDatosBasicosFieldSet class:

,requires: [ 'WebMonitorClass.view.BodegaDatosBasicosFieldSet' ]

So, the resulting class definition was


Ext.define('WebMonitorClass.view.CrearBodegaFormPanel', {    
    extend: 'Ext.form.FormPanel'
    ,requires: [ 'WebMonitorClass.view.BodegaDatosBasicosFieldSet' ] // here is what I added
    ,alias: 'widget.crearBodegaFormPanel'       
    ,layout:'absolute'
    ,border:false
    ,padding : '0 0 5 0'
    ,bodyStyle:'background-color: #DFE9F6;'
    ,width:360
    ,height:110
    ,initComponent: function() {                                                    
        this.callParent();                                    
    }
    ,items:[
        {xtype: 'bodegaDatosBasicosFieldSet'}
    ]
    ,buttonAlign:"center"
    ,buttons:[]
});

ExtJS 4 : How to submit form or set listener to button without using Ext.getCmp and setting id

Use the up() method to get the ancestor element (ie form):

{
    xtype:'button' 
    ,text:'Crear Bodega'
    ,listeners: {                                      
         'click' : function(){               
              // get the form type ancestor which contains the button                                      
              var myFormPanelObj = this.up('form');
              var data  =   myFormPanelObj.getForm().getValues();
              console.log("data: " + Ext.JSON.encode(data));
                                             
           }
      }
}

Resource:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.button.Button-method-up

ExtJS4: date formatting reference

Here is a nice guide to handle date formatting with ExtJS4:

http://senchaexamples.com/2012/05/03/formatting-dates-using-ext-js-4/

ExtJS4: date format reference

There is a very useful link with the reference of the Extjs4 date formatting

http://senchaexamples.com/2012/05/03/formatting-dates-using-ext-js-4/

Extjs4.1: center buttons in formPanel

use the config buttonAlign:

{
   ...
   ,...
   ,buttonAlign: "center" // here

   ,buttons: [
     { text: 'Button 1' }
   ]

}

Resource:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Panel-cfg-buttonAlign

ExtJS4.1: Modal Window

Use the modal config:


                      var myWindow = Ext.create("Ext.Window",{
                                width : 200
                                ,height: 200
                                ,title : 'Crear Usuario'                                
                                ,layout: 'absolute'
                                ,closable : true
                                ,modal:true // here
                            }).show();

Resources:
http://stackoverflow.com/questions/6053847/how-to-make-a-full-modal-window-in-ext-4

ExtJS4.1: Set background color to Panel

Use bodyStyle config:

 new Ext.Panel({
    width:200,
    height:200,
    bodyStyle:'background-color: #DCE8EA;' // here  
});

Resources:
http://www.sencha.com/forum/showthread.php?75830-Panel-background-color

ExtJS4.1 : Uncaught TypeError: Cannot call method 'getWidth' of undefined

I created a formpanel, which has a predefined width and height:

var myCrearUsuarioFormPanel = Ext.create('WebMonitorClass.view.CrearUsuarioFormPanel');

Know I needed to put my myCrearUsuarioFormPanel into a window. I needed to set the window width and height the same as the myCrearUsuarioFormPanel width and height:
                         
                            var myWindow = Ext.create("Ext.Window",{
                                width : myCrearUsuarioFormPanel.getWidth() //  here I tried that
                                ,height: myCrearUsuarioFormPanel.getHeight() // here I tried that
                                ,title : 'Crear Usuario'                                
                                ,layout: 'absolute'
                                ,closable : false                                
                                ,items:[myCrearUsuarioFormPanel]
                            }).show();

But I Got:

Uncaught TypeError: Cannot call method 'getWidth' of undefined 

in this line

width : myCrearUsuarioFormPanel.getWidth()

The solution is to use the offsetWidth and offsetHeight properties:


                          var myWindow = Ext.create("Ext.Window",{
                                width : myCrearUsuarioFormPanel.offsetWidth // Here is the solution
                                ,height: myCrearUsuarioFormPanel.offsetHeight // Here is the solution
                                ,title : 'Crear Usuario'                                
                                ,layout: 'absolute'
                                ,closable : false                                
                                ,items:[myCrearUsuarioFormPanel]
                            }).show();

Resource:
http://stackoverflow.com/questions/5249723/wrong-div-width-when-getting-it-with-javascript
http://stackoverflow.com/questions/10634282/in-extjs-when-dragdrop-offsetwidth-is-null-or-not-an-object-error-for-ie7

Javascripy: simple encode/decode Json LIbrary

Use the Extjs JSON library

// create new object
var myObject = new Object();
// set properties to the object
myObject["RB"] = "(aBc+ABC)";
myObject["RA"] = "(aBC+AbC)";
myObject["SA"] = "(abc+ABc)";
myObject["SB"] = "(abC+Abc)";
//from javascript object to json text:
var myJsonString = Ext.JSON.encode(myObject);


//from jsontext to javascript object
var myResponseString = '{"RB":"(aBc+ABC)","RA":"(aBC+AbC)","SA":"(abc+ABc)","SB":"(abC+Abc)"}';
var myResponseObject = Ext.JSON.decode(myResponseString);
alert(myResponseObject["RB"]) // "(aBc+ABC)"
alert(myResponseObject["RA"]) // "(aBC+AbC)"
alert(myResponseObject["SA"]) //  "(abc+ABc)"
alert(myResponseObject["SB"]) //  "(abC+Abc)"

Resources:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.JSON
http://www.sencha.com/forum/showthread.php?3333-json-encode-decode

Symfony2 and EXTJS4.1: Load the ExtJS client into Symfony2

I have a JavaScript Client with the following file/folder structure:

./client
./client/index.html --- main html file in the ExtJS architecture where are loader the libs and the resources
./client/app --- folder with the extjs architecture
./client/app/data
./client/app/model
./client/app/store
./client/app/view
./client/app/app.js
./client/libs  --- folder with the external libraries
./client/libs/ext-4.1.0-gpl
./client/libs/jquery-1.6.4
./client/resources --- folder with my resources like, css and images
./client/resources/css
./client/resources/images

After installing Symfony2, copy your JavaScript Client (ie. client) inside the Symfony/web/ so you can access in your browser the Symfony/web/client/index.html without bothering with the assets stuff. The assets are useful for your PHP server business logic, not for your full HTML/JavaScript client.

ExtJS4.1: gridPanel Scroll problem

It you have a gridPanel that it's scroll bar is not been shown .Look if you have the layout: 'absolute' config value set and try deleting that config parameter. That worked.for me.


Before:
Ext.define('WebMonitorClass.view.PlanillaActivacionGridPanel', {    
    extend: 'Ext.grid.Panel'
    ,alias: 'widget.planillaActivacionGridPanel'
    ,layout: 'absolute'
    ,frame:true
    ,columnLines: true    
    ,store: Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'column1',     type: 'string'}
           ,{name: 'column2',     type: 'string'}                      
        ],
        data: [['data 11','data12'],
                ['data 21','data22'],
            ]})
        ,x:0
        ,y:0
        ,height: 200
        ,width: 150
        ,columns: [
            {
                text     : 'Column 1',                
                sortable : false,
                width    : 75,
                dataIndex: 'column1'
            },{
                text     : 'Column2',              
                sortable : false,
                width    : 105,
                dataIndex: 'column2'
            }
        ]          
    ,initComponent: function() {                                                    
        this.callParent();        
    }    
    ,items: []
});


After (Scroll Works Perfectly)
Ext.define('WebMonitorClass.view.PlanillaActivacionGridPanel', {    
    extend: 'Ext.grid.Panel'
    ,alias: 'widget.planillaActivacionGridPanel'
    //,layout: 'absolute' // with layout:absolute the scroll doesn't work           
    ,frame:true
    ,columnLines: true    
    ,store: Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'column1',     type: 'string'}
           ,{name: 'column2',     type: 'string'}                      
        ],
        data: [['data 11','data12'],
                ['data 21','data22'],
            ]})
        ,x:0
        ,y:0
        ,height: 200
        ,width: 150
        ,columns: [
            {
                text     : 'Column 1',                
                sortable : false,
                width    : 75,
                dataIndex: 'column1'
            },{
                text     : 'Column2',              
                sortable : false,
                width    : 105,
                dataIndex: 'column2'
            }
        ]          
    ,initComponent: function() {                                                    
        this.callParent();        
    }    
    ,items: []
});


Reference:
http://docs.sencha.com/ext-js/4-1/#!/example/grid/grid-plugins.html

EXTJS4: not-editable textfield

Add readOnly boolean config parameter:

,readOnly:true


for example:

                     {
                            xtype:'textfield'                                                        
                            ,x:830
                            ,value:"MyDefaultvalue"
                            ,readOnly:true
                            ,y:40
                            ,width:220                           
                        }


Reference:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Text-cfg-readOnly

ExtJS4: get values from ExtJS form

Use the form.getValues() Method:

var  myFormPanelObj  = Ext.getCmp("myFormPanelId");
var data  =   myFormPanelObj.getForm().getValues();  
console.log("data: " + Ext.JSON.encode(data)); // {field1name : "field1value" , field2name : "field2value"}

References:
http://www.sencha.com/forum/showthread.php?62958-ExtJs-Jquery-form-submit

ExtJS 4: Uncaught Ext.Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class:

if you get the error:

Uncaught Ext.Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: SIBismark.view.Viewport


Add the following line at the beginning of your js file

Ext.Loader.setConfig({enabled:true});


In Example in the app.js :



Ext.Loader.setConfig({enabled:true});
Ext.application({
    name: 'SI'
    ,requires:['SI.view.Viewport']
    ,autoCreateViewport: true
    ,launch: function() {        
        // This is fired as soon as the page is ready
    }
}); 


Reference:
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3/