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

Saturday, July 16, 2011

How to create and use templates in PHP

Hello,

This blog is for freshers in PHP.

First of all why Templates?


Templates are for reusable piece of code.  Consider an example. You have to send mail on some events and all the events are being invoked on different pages. However mail content is always same only some values are changed like sender name and sender signature etc. So instead of building message body every time you build a reusable templates that can be used by simply replacing some values in it. Another advantage of templates is you just need to change only templates and changes are visible at every place where template is used. Email template is just an example you can also build dynamic websites using templates. Here in this blog I will give example of email templates. So let's start our example.

First of all create an HTML file for your mail message with following syntax.

<div style="width: 800px;">

<span>Hello </span><span>%%client_full_name%%</span><br />
<span>%%email_introduction_text%%</span><br />

<b> Thank you for your query, we will get back to you soon</b>

<span>%%sales_rep_name%%</span><br />
<span>%%sale_rep_phone_num%%</span><br />
</div>

If you carefully check above HTML all the variables enclosed in %% %% are the variables which will be replaced by values dynamically when you use mail template. Following is the code for it.

First of all build an array with all the variable names as a key and with their values.


$variablesArray=array(
   '%%client_full_name%%'=>$clientName,
   '%%email_introduction_text%%'=>$emailIntroductionText,
   '%%sales_rep_name%%'=>$salesRepName,
   '%%sale_rep_phone_num%%'=>$sale_rep_phone
   );

Now read the mail template file and replace all the variables with respective values.

$myFile = "mail_template.html";

$fh = fopen($myFile, 'r');
$body = fread($fh, filesize($myFile));
fclose($fh);
       
foreach($variablesArray as $variable=>$value)
{
         $body=str_replace($variable,$value,$body);
}

That's it $body will have all the values replaced now and you can use this while sending mail. This way you can also build dynamic website also.

Hope this post helps you.
Posted by at No comments:
Subscribe to: Posts (Atom)