Friday, July 29, 2011

ExtJs 4 MVC get reference of views

In old version of ExtJs how do we get reference of any component? Either we use control.getComponent() method or we use Ext.getCmp('controlID') method. This will give you an instance of particular component. So how do we get instance of views in ExtJs 4 MVC?

it has something called refs. You can add reference to any views in any controller.


refs: [
        {
            ref : 'myGrid',
            selector: 'myGrid'
        }
]


Here selector is the type of the component. This use can set with alias for views. For Example.


Ext.define('myApp.myGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.myGrid',

    initComponent: function () {   
        this.callParent(arguments);
    }
});


ExtJs MVC has something called component query. This will be used to get reference of particular type of component.

ref  creates a function with name specified there and you can use that function to get reference of that particular component.

You will get reference of myGrid by following code inside controller.

var myGrid = this.getMyGrid();

Remember here that it will not create new instance of grid. It will give a reference to an existing instance. If no instance is available it will return null. To know how to create an instance of view check out my earlier blog here.


Posted by at 4 comments:

Tuesday, July 26, 2011

ExtJs 4.0.2 - Print Grid

Recently I tried ExtJs 4.0.2a. Here I am going to share a trick to print ExtJs grid. Concept is to open a new window. Render grid inside window and print grid.

Add a button in toolbar of grid panel. Call it a print button. Set handler for the button and add following code in handler. First of all open a new window.

var printDialog = window.open('', 'PrintPortfolioGrid');

Add some basic HTML to newly open a window. Most important thing is to add link to ExtJS core files and CSS so we can properly render grid.

var html = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"'
            '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' +         
            '<html>' +
            '<head>' +
            '<title>Print Portfolio Grid</title>' +
            '<ink rel="stylesheet" type="text/css" href="ext-4.0.2a/resources/css/ext-all.css" />' +
            '<link rel="stylesheet" type="text/css" href="styles/Triskell.css" />' +
            '<script type="text/javascript" src="ext-4.0.2a/ext-debug.js"></script>' +
            '</head>' +
            '<body></body>' +
            '</html>';

printDialog.focus();
printDialog.document.write(html);
printDialog.document.close();

Now add some events to initialize document and Ext so that we can render grid.

printDialog.onload = function () {
            printDialog.Ext.onReady(function () {
                printDialog.Ext.create('Ext.grid.Panel', {
                    store: printDialog.Ext.create('Ext.data.Store', {
                        fields: ['Name','Cost'],
                        data: [
                                { Name: 'IT Portfolio, Cost: '1500$'},
                                { Name: 'Product Portfolio', Cost: '2500$'},
                                { Name: 'Asset Portfolio', Cost: '4500$'},
                                { Name: 'NPD Portfolio', Cost: '3500$'},
                            ]
                    }),
                    renderTo: printDialog.Ext.getBody(),
                    columns: [
                                   { header: 'Name', dataIndex: 'Name', flex: 1 },
                                   { header: 'Cost', dataIndex: 'Cost', flex: 1 }
                                  ],
                    width: 723,
                    height: 500
                });
                printDialog.print();                
            });
        }

That's it and it will open a print dialog.Select a required printer and it will print your grid.



Posted by at 1 comment:
Labels: , ,

Friday, July 22, 2011

ExtJs MVC- Dynamically Load Views

Hello,

Recently I tried ExtJs 4.0.2a and MVC application architecture and I must say that's an awesome improvement. Using MVC you have so much of flexibility. Now you can organize your whole application in proper structure that can be easily maintained and updated. It's really powerful feature available in ExtJs 4.0. You can get more details about this from this link. The MVC Architecture

They have explained a straight forward application with a grid with CRUD operations. What I will explain is dynamically loading views. Please read above article before further reading this post.

I was having requirement to dynamically load different views on all the the use actions. For example I have following four views for my content panel.

app/view/content/UsersGrid.js
app/view/content/ProjectsGrid.js
app/view/content/PremimumUsersGrid.js
app/view/content/PortfolioGrid.js

and let's say I have assigned following aliases to all of the above views.

UsersGrid => 'UsersGrid'
ProjectsGrid => 'ProjectsGrid'
PremimumUsersGrid => 'PremimumUsersGrid'
PortfolioGrid => 'PortfolioGrid'

I have a content panel in my view port and in which above views would be loaded dynamically. I can add reference of ContentPanel in my content controller to get the instance of it dynamically.


refs: [
        {
            ref :  'contentPanel',
            selector: 'ContentPanel'
        }
]

refs is the new way in MVC to get the reference of the the control. Above code will create a function getContentPanel() dynamically and I can use it to get reference of Content Panel. Here ref property specify name of function. Selector specify xtype of control. This xtype can be set using alias as follow.

alias : 'widget.ContentPanel'

Now consider I have a button. On click of button I want to load UsersGrid. Following will be code to load content panel and creating and adding view dynamically.

var contentPanel = this.getContentPanel();
contentPanel .removeAll(); //removing existing views.

var usersGrid = Ext.create('MyApp.view.Content.UsersGrid');

contentPanel.add(usersGrid);
contentPanel.doLayout();

Same way you can load other views as well.
Posted by at 13 comments:
Labels: , ,
Subscribe to: Posts (Atom)