Saturday, 28 September 2013

Extjs, prevent images from being cached

 In order to prevent images from being cached just do one thing, append cache buster i.e cb=new Date() (or any other dynamic value could be replaced with new Date() object) to the the image source as query string , just as given below :

myImage.setSrc('../images/myImage/name.png'+'?cb='+new Date());

Thursday, 26 September 2013

Extjs, apply class on runtime on actioncolumn of grid

we can apply class on rederer funtion of actioncolumn by checking records property easily as shown below :

                    xtype: 'actioncolumn',
                    width: 70,
                    dataIndex: 'DataIndex',
                    menuDisabled: 'true',
                    text: 'text',
                    sortable: false,
                    fixed: 'true',
                    renderer: function (value, metadata, record) {
                        if (record.get('IsEnabled')) {
                            metadata.tdCls = 'cssClass'

Extjs, create view object , with some properties at runtime

Lets say I create instance of a view and I want to apply some property on it , then this is the way I can give properties to it on runtime.

var addView = Ext.create('App.view.Add', { flex: 1 });

Disable chrome security

By excuting this command "chrome.exe --disable-web-security" in run of your windows , you can disable your browser's security , mostly used for running sencha touch apps using api calls.

Extjs, Ext.string.format used to implement mailto functionality on anchor click inside grid column using renderer funtion

columns: [
        header: 'Email',
        dataIndex: 'email',
        renderer: function(value) {
            return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);

Extjs, UI manipulation using parent element id and get its childs from class applied

That's what use this logic on store load , one the stored load success then manipulate you UI( use this on render function of under use controll):

 onGridRendered: function (grid) {
           scope: this,
           callback: function (records, operation, success) {
               if (success) {
                   var parent = Ext.get('ID of element');
                   var elems ="div.class of elements").elements;
                   for (var i = 0; i < elems.length; i++) {
                       elems[i].hidden = true;


Scencha touch , check the OS i.e. is Desktop,Tablet etc

Following is the code snippet which tells you about current system ( actually sencha touch ):
}else if({

Extjs, how to implement delay

In order to use delay funtionality in extjs , you must create Ext.util.DelayedTask object and use its delay method which takes span of time to be delayed in miliseconds, i.e.

Following is an exmple of using delay functionality in extjs:

var task = new Ext.util.DelayedTask(function(){

Ext.get('myInputField').on('keypress', function(){

OOP concep of Shadowing , definition with example

Shadowing is very important concept of object orient programming (OOP), used with polymorphism because it involves runtime binding of objects ( pure polymorphism), it states that : " shadowing is actually stands for hiding overridden method implementation in drived class and used the implementation of parent class with drived class object", does it make sense ??, indeed but if not follwing example will make it clear for you.
This is full testable code of shadowing implementation :

class Program
        static void Main(string[] args)

            Person[] listPerson = new Person[2];
            listPerson[0] = new GoodPerson();
            listPerson[1] = new BadPerson();
            foreach (Person obj in listPerson)
            Console.WriteLine(new BadPerson().getCategory());

        public class Person
            public virtual string getCategory(){

                return "Hi I am a person";


        public class GoodPerson:Person
            public override string getCategory()

                return "Hi I am a Good Person";

        public class BadPerson:Person
            public new string getCategory()

                return "Hi I am a Bad Person";



The output of the program will be :

Hi I am a Good Person
Hi I am a person

The trip behind this is to use "new" keyword instead of "override" with your virtual methods and that's all.

Monday, 23 September 2013

Apprise V2 is rising , new features for your popups using jquery

AppriseV2 is On now , with new look and feel with amazing effects , check that out on library page :

Extjs, use function in tpl , in gridPanel's templateColumn

           header: '',
           xtype: 'templatecolumn',
           tpl: ['<div>' +
                    '<div>' +
                        '<tpl for="data">' +
                            '<tpl if="Title.length &gt; 0">'+
                                '<div>{Title}</div>' +
                            '</tpl>' +
                            '<div>{[this.shorten(values.fullName)]}</div>' +
                        '</tpl>' +
                   , {
                    shorten: function (noOfTimes) {

                        return noOfTimes;

That's how we can use functions in tpl.

Sunday, 22 September 2013

Custom controls introduction, Creation and usage in project

A best friend of mine recently requested me to create a post for "Custom Controls creation and use in " with example and detailed explanation , so today I am going to talk a bit about custom controls which leads to a practical example of how to create a custom control and how to use it in your project.
First lets have little introduction of custom controls :
"Custom controls are individual assemblies, compiled into a dynamic link library (DLL) and used as any other ASP.Net server control", we can create them by :
  1.  deriving from the base control class ( today's example )
  2. driving from one existing control ( extending functionality of existing one )
  3.  combing two or more existing controls ( combination of more than one existing controls )
Today we have example of first type , we are going to create a custom label , the functionality of this label is that , when we set its text , it will validate if the assigned text is a valid email or not and change its color and append message as prefix like this in screen shot :

Now lets see how to create an custom control first :
  • Open visual studio , go to File->New->Project
  • Select Web projects and select Server Control project
  • Name it , lets say CustomLabelControl
  • When you create project , you will have ServerControl1.cs class inherited from WebControl class, this is every thing for your custom control.
  • There will be a method " protected override void RenderContents( HtmlTextWriter output)", which is key , that is how your control will response to you visually , just copy and replace the following code with it :         

     protected override void RenderContents( HtmlTextWriter output)
                  if (!String.IsNullOrEmpty(this.Text))
                            if (this.IsValidEmailAddress())
                                    output.Write("This is a valid email : ");
                                      output.Write("<FONT size=5 color=Blue>");
                                                      output.Write("This is not a valid email : ");
                                                        output.Write("<FONT size=5 color=red>");

                                                                        output.Write("<FONT size=5 color=red>");
                                                                            output.Write("Must enter something to validate!");

                                                                    It is using IsValidEmailAddress() method which can be defined in the same class as :

                                                                       protected bool IsValidEmailAddress( )
                                                                                    // this is use for time saving, not optimal solution , but you can replace it with regular expression
                                                                                    MailAddress m = new MailAddress(this.Text);
                                                                                    return true;
                                                                                catch (FormatException)
                                                                                    return false;

                                                                    • And that's all , your custom control is ready to use , now build your project.
                                                                    Now second part starts from here , i.e how to use this control in your project, simple three step process :
                                                                    • Add reference of this control ( project dll ) to your project where you want to use it.
                                                                    • Register the control on the page where you want to use it , just directly below the @page directive like that :

                                                                    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CustomControlTest._Default" %>
                                                                    <%@ Register Assembly="CustomLabelControl"  Namespace="CustomLabelControl" TagPrefix="ccs" %>

                                                                    • Add control to your page like this :                                                                               <ccs:ServerControl1 runat="server" ID="ServerControl11" Text = "" />
                                                                    • Now just set the text of this control , behind any event , lets say on button click,                     protected void Button1_Click(object sender, EventArgs e)

                                                                                    this.ServerControl11.Text = this.TextBox1.Text;

                                                                          And this control will be automatically say if this is a proper email address or not.
                                                                          Sample solution project with custom control project and its use in project is attached here :    CustomControl Project.

                                                                          Thursday, 19 September 2013

                                                                          Custom validation message , Extjs

                                                                          With invalid text property we can display custom message :
                                                                                  xtype: 'datefield',
                                                                                  allowBlank: false,
                                                                                  fieldLabel: 'Start date',
                                                                                  msgTarget: 'under',
                                                                                  invalidText: 'This value is not a valid date!'
                                                                      = "error here";

                                                                          Attach view to button , Extjs

                                                                          To attach a view ( must be a floating component like window ) to a button , so that on clicking a button results a view to open attached to that button , you can use the following code inside your button click action inside your controller. i.e.

                                                                          var menu= Ext.create('Main.view.MyView', {
                                                                                      left: 0,
                                                                                      padding: 10,

                                                                          Apply tool tip to grid cells , Extjs

                                                                          To apply tool tip to grid cells first create renderer and set metadata.tdAttr to 'data-qtip='"your value "; i.e. as given below :

                                                                           renderer: function (value,metadata, record, rowIndex) 

                                                                          metadata.tdAttr = 'data-qtip="' + value + '"';

                                                                                       return value;

                                                                          and that's it :)

                                                                          Saturday, 14 September 2013

                                                                          jQuery , printer access ( print area inside a #div )

                                                                          In order to open the printing dialog into the same page you must follow the following steps:

                                                                          • Must include jquery script inside header
                                                                          • Create Iframe inside your html body , like this :                                                                                 <iframe id="iframe" width="0" height="0"></iframe>
                                                                          • User following lines on click event of any element ( lets say button ): $('iframe').contents().find('body').html($(this).html());                                         window.frames['iframe'].print();

                                                                          And that's just all.

                                                                          Friday, 13 September 2013

                                                                          Remove Application From IIS ( also from application pool , otherwise reconfiguration cause errors)

                                                                          You must remove application from two places :
                                                                          One is from tree coming at right side of IIS main window , that's easy one , just right click and remove
                                                                          Second one is to remove from application pool , for that purpose go to "C:\windows\system32\inetsrv\config" and edit "applicationHost.config" , find your application in it which must be in xml nodes format some thing like this :

                                                                          <application ...> </application> 

                                                                          Remove that node containing your application and refresh IIS.
                                                                          And that's just all what you need:)

                                                                          Saturday, 7 September 2013


                                                                          Creating objects that simulate the behavior of real objects. For example, " stubbing a database by implementing a simple in memory structure for storing records.

                                                                          Unit Testing

                                                                          Characteristics of Unit Test :
                                                                          • Fully automated
                                                                          • Can be run in any order ( if part of any other test)
                                                                          • Runs in memory ( no db access or file , must implement mocking )
                                                                          • Consistently returns the same results
                                                                          • Runs fast
                                                                          • Readable
                                                                          • Maintainable
                                                                          • Trustworthy

                                                                          Amazon S3

                                                                          Storage tor the internet, provides interface for store and retrieve any amount of data any time form anywhere on the web.

                                                                          Repository Pattern and Unit of work

                                                                           Repository Pattern:
                                                                          Isolate our application from changes in the data store.
                                                                          Help in automated testing and test driven development ( mocking i.e. in memory colleciton)

                                                                          Unit of Work:
                                                                          Maintains the list of objects effected by a business transaction and co-ordinates the writing out of changes and resolve concurrency problems.

                                                                          Rest Api

                                                                          REST stands for " Representational State Transfer" , stateless, client-server , cache-able communications protocol ( http protocol is used).

                                                                          Sencha Touch , Phonegap, cordova and XCode

                                                                           Sencha Touch:

                                                                          High performace HTML5 mobile application framework
                                                                          Only framework that enables developers to build apps that work on IOS, Android, Blackberry, Windows phone etc.
                                                                          Sencha CMD: full set of life cycle management features.

                                                                          • Built for speed
                                                                          • Built for great experience
                                                                          • Built for success
                                                                          PhoneGap + Apache Cordova :
                                                                          • Phonegap is free distribution of apache cordova
                                                                          • Phonegap is open source and free software.
                                                                          • Framework that allows you to create mobile apps using standardized apis for platform you care about.
                                                                          An IDE, containing suite for software development tools developed by apple for developking software for OSX and IOS ( Mac, iphone, iPad )

                                                                          JNI ( Java Native Interface ):
                                                                          Integrating java program to lagacy c/c++ code and embed JVM with your native application.

                                                                          Scaffolding ( mvc )

                                                                          Quickly generating a basic outline of the software that can be edit and customize easily. Just select the template, modl and DBContext(source) and all actions, views will be generated.

                                                                          What is Behavior Driven development ( BDD) .net implementation

                                                                          Behavior Driven Development ( BDD ) :

                                                                           It combines requirements and testing into one integrated approach, resulting in improvement understanding by both business and technical team.
                                                                          “A shipment cannot be created without specifying the recipient address” , BDD is specialized version of test driven development (TDD).
                                                                          It must :
                                                                          • ·         Define a test set for the unit first
                                                                          • ·         Implement the unit
                                                                          • ·         Finally verify that the implementation of the unit makes the test succeed

                                                                          To implement BDD we must know about :

                                                                          • SpecFlow : BDD library/framework , works on Given, When and Then keywords where Given relates to preconditions, when represents occurrence of an event and Then is testable outcome. Provides facility to write testing scenarios in human language ( DSL , domain specific language ).
                                                                          • Coypu:  Provides fast browsing of web applications to access elements i.e. buttons, links , fields and etc on a web page.
                                                                          • Resharper : To run unit tests.

                                                                          Caching ( MVC )

                                                                          Caching in MVC applications provides facility to cache the output of controllers and improve your application performance to many times.The output cache enables you to cache the content returned by a controller action.
                                                                          There are you ways to use output cache in your mvc applications :
                                                                          1. Declare on the top of the action ( or controller which will be applied on all actions inside it )
                                                                          2. Create Cache Profile ( define caching section inside web.config of your application)

                                                                          Declare on top of controller or action:
                                                                           You can specify cache for an action or controller by writing this line on the top of it , like this ,

                                                                          OutputCache(Duration=30, varyByParam="none" , Locaiton=OutputCacheLocationClient, NoStore=true)]

                                                                          You can set the Location property to any one of the following values:
                                                                          · Any
                                                                          · Client
                                                                          · Downstream
                                                                          · Server
                                                                          · None
                                                                          · ServerAndClient

                                                                          Creating Cache Profile:

                                                                          Define profile inside of system.web section of your web.config like this :

                                                                                  <add name="myCache" duration="3600" varyByParam="none"/>
                                                                          And you can then use this profile like that :
                                                                                  public string Index()
                                                                                      return DateTime.Now.ToString("T");
                                                                          In both of above cases "varyByParam" is a very important parameter , this actually enables us to create different cache versions of the same view ( request ) , for example on the basis of user id we are differentiating out views , so in that case we can set varyByParam to id so that different versions of cache are available for different users accordingly , very dynamic and easy solution.
                                                                          For further reading you can go to : "".

                                                                          Memcached , 3rd party distributed cache management system

                                                                          Memcached is basically key-value pair storage , provides cache facility from out side of your application. You just need to store your string , object etc by assigning it a unique value and whenever you want your value just call it from its unique key , best solution for multi-tire large applications dealing with thousands of records every single call , my using 3rd party cache like Memcached we can reduce database calls and store intermediate results into out separate cache management system.To use memcached you need to download memcached dot net library for your application to include and memcached manager to provide storage services for your application to use.

                                                                          Persistence ( in reference to databases usage in programming )

                                                                           When we go through with persistence we have these most important topics to know about.

                                                                          •  MySql
                                                                          • SqlServer
                                                                          • MySql Work bench 
                                                                          • Query optimization
                                                                          • No sql
                                                                           MY SQL WORKBENCH

                                                                          Mysql workbench has three very important portions
                                                                          1. SQL Development
                                                                          2. Data Modeling : Complete visual design and modeling
                                                                          3. Database Administration : GUI to start stop server, User accounts, Manage configuration files
                                                                          Query Optemization

                                                                          • Why 
                                                                                    - Large databases
                                                                                    - Complex queries to reterieve data
                                                                                    - More chances of table lock and data corruption
                                                                          •  How
                                                                                    - Understanding of how database is executing our queries i.e.EXPLAIN keyword
                                                                                      is used to see the query plan ( in Mysql).
                                                                                    - Retrieve as little data as possible  ( do not use select * )
                                                                                    - Store intermediate results i.e.User index, server tuning, an aggregate table,
                                                                                      vertical partitioning ( partition the table by column decreases the amount of data
                                                                                      to be process ),Horizontal partitioning ( partition the table by data value),
                                                                                      De-normalization ( avoid joins).

                                                                          NO SQL :
                                                                          • Non relational databases
                                                                          • Designed for distributed data stores to store large scale of data ( google, facebook )
                                                                          • No fixed schema, scale horizontally
                                                                          • Properties
                                                                                      Stands for not only SQL
                                                                                      No declarative query language
                                                                                      No predefined schema
                                                                                      Key value pair storage,column store,document store,graph store
                                                                                      Unstructured and unpredictable data
                                                                                      High performance , high availability and scalability

                                                                          • CAP Theory
                                                                                    1)  'C' for  Consistency : After each operation all users must see the same data.
                                                                                    2) 'A' for Availability : No down time.
                                                                                    3) 'P' for  Partition tolerance : System must continues to function even
                                                                                     communication among the servers is unreliable.
                                                                                   4) not possible to provide all 3 at same time, all available databases of the time are
                                                                                      providing   the 2 of 3 above described i.e.
                                                                                       I- CA
                                                                                      II- CP
                                                                                     III- AP

                                                                          •  Data storage formats
                                                                                   - Key-value pairs ( Cassandra )
                                                                                   - Document ( MongoDB)
                                                                                   - XML format ( BaseX)
                                                                                   - Graph format ( Neo4j)
                                                                          • Disadvantages
                                                                                   - No standards
                                                                                   - Limited query capabilities

                                                                          Sunday, 1 September 2013

                                                                 MVC4 database migrations with Entity Framework

                                                                          Hi all , in this post I am going to talk about database migrations and how you can use it in your project and why should you use that feature. In MVC Code first approach we use to create our model ( entities and their associations ) first and define our context class which contains the list of these entities implementing DBContext class. So when we change our code for any entity add or update case and run the application then an error screen comes which says your model is been updated , which means that to get rid of this error we must have to delete our old database and run our application again which will create new database for us with updated tables and what if we have thousands of records and we have any change in our model then ?
                                                                          In order to escape from this database deletion and creation process again and again we use database migrations.
                                                                          Yes this is the way a developer can update its models without effecting the database data , actually migration works on context , it just picks all changes and create migration file and update changes on single command. To take advantage of migrations you just need to know about 3 commands :

                                                                          1)  First step is open your project in Visual studio , go to Tools->Library Package Manager->Package Manager Console and click it , this will open a console with "PM> " as initials. Now first select the project which contains the context class as default project in this console. Then install or update EntityFramework package into your project with these commands :

                                                                          1. PM>Install-Package EntityFramework Or
                                                                          2. PM>Update-Package EntityFramework
                                                                          After that enable migrations in your selected project with this command :
                                                                          • PM>Enable-Migrations
                                                                          2) Now your setup is ready for starting the migrations, Enabling migrations will create Migrations folder into your project with Configuration.cs class and all future migrations will be automatically added into this folder.
                                                                          Now update your models and run add migration command :
                                                                          • PM> Add-Migration "any name"
                                                                          This command will create .cs file into migrations folder automatically, in which you can see your changes.

                                                                          3) Last and final step is updating database with following command :
                                                                          • PM> Update-Database
                                                                          That is how you can get benefit from database migrations in just 3 commands , this is very basic stuff you can have for you migrations , further advance skills will come from experience.Thanks