autoEl

Ext.create("Ext.Component", {
renderTo: Ext.getBody(),
autoEl: {
html: "Link",
href: "#",
tag: "a"
}
});

fix for wcf error - Could not load file or assembly 'someapplicationname' or one of its dependencies. An attempt was made to load a program with an incorrect format.

To resolve the error, follow the below steps

1.Type "inetmgr" in run
2.click on Application Pools
3.right click on the application pool where your application is pointed to and select Advanced Settings
4.Set Enable 32 bit applications to True

Ext.form.Panel

    
Form panel class serves as the container for forms. You can add the controls in Ext.form.field package to the form panel class. The form panel provides support for processing form, validation etc.

Ext.create("Ext.form.Panel",
    {
        title: "Controls",
    items: [
    {
        xtype: "radiogroup",
        fieldLabel: "Title",
        vertical: true, columns: 1,
        items: [
        { boxLabel: "Mr", name: "title" },
        { boxLabel: "Ms", name: "title" }
        ]
    },
    {
        xtype: "textfield",
        fieldLabel: "Name",
        fieldLabel: "Name",
        allowBlank: false,
        maxLength: 50,
        msgTarget: "side"
    },
    {
        xtype: "datefield",
        fieldLabel: "Date of birth",
        msgTarget: "side"
    },
    {
        xtype: "textfield",
        fieldLabel: "Blog"
    },
    {
        xtype: "numberfield",
        fieldLabel: "Years of experience",
        minValue: 5,
        maxValue: 15
    },
    {
    xtype: "textarea",
    fieldLabel: "Address"
    },
    {
    xtype: "button",
    text: "Submit",
    listeners: {
        "click": function () { alert("yahoooooo"); }
    }
    }
    ],
    renderTo: Ext.getBody()
});

The form controls can be wired up with basic validation rules. For instance, the common validation properties of the text based controls are allowBlank, maxLength, minLength, and so on.

Another useful property called vtype can be used for using built-in validation rules like e-mail, URL, and so forth.
The blog text field we have used in our example can be configured to have a validation type as shown here.
{
xtype : "textfield",
fieldLabel : "Blog",
vtype : "url"
}

xtype

In Ext JS 4 every UI component class has an alias name or a short name known as ‘xtype.’ Using xtype in our code offers some advantages. Let’s discuss them by creating a Panel with a textbox and a button as shown below.

Ext.create("Ext.panel.Panel",{

items : [

Ext.create("Ext.form.field.Text",{

fieldLabel : "Name"

}),

Ext.create("Ext.Button",{

text : "Submit"

})]

});

Let’s move the creation of textbox and button out of the Panel as shown below.

var nameText = Ext.create("Ext.form.field.Text",{

fieldLabel : "Name"

});

var submitButton = Ext.create("Ext.Button",{

text : "Submit"

});

The Panel will refer to the nameText and submitButton variables in the items collection.

Ext.create("Ext.Panel",{

items : [

nameText,submitButton

]});

We have stored the textbox and button objects in separate variables and reused them inside the Panel. There are some disadvantages to writing code in this style, although it is useful to se[erate the container and the individual components.

Ext.create("Ext.form.field.Text") creates a text box and holds it in the DOM tree. It occupies memory even if we don’t render it on to the screen. Suppose we don’t add the nameText variable in the Panel, it would remain in the DOM tree occupying memory. In an application, we want to instantiate UI components only when required and not create them at will. At the same time we want the component creation code maintained separately.

Using the fully qualified class name like Ext.form.field.Text everywhere is a tedious task, particularly when we create custom components. It would be better if we can use the xtype of these UI components. Let’s rewrite the example as shown below.

var nameText = {

xtype : "textfield",

fieldLabel : "Name"

};

var submitButton = {

xtype : "button",

text : "Submit"

};

Ext.create("Ext.panel.Panel",{

renderTo : Ext.getBody(),

items : [

nameText,submitButton

]});

The nameText and submitButton are plain JavaScript objects. They have an additional xtype property with values textfield and button, respectively. The actual text box and button objects are created when they get added to the Panel and rendered to the body. This not only makes the code simpler but also provides us the lazy instantiation facility.

extjs define,create,constructor,property,config,extend,mixin,alias

Classes and Objects

You can define a new class in Ext JS 4 using the Ext.define method. You pass in the class name and the object where you define the attributes and behavior of the class as arguments to the Ext.define method.

Ext.define("Mobile",{});

If you have worked with Ext JS 3 or the earlier versions, you will notice that the Ext.define method incorporates the functionalities of using Ext.reg, Ext.ns, and Ext.extend methods.

You can create an object of the Mobile class using Ext.create method as shown here.

Ext.create("Mobile ");

In traditional OO languages the new keyword is used to create objects. You can use new to create objects in Ext JS 4 also.

var mobile1 = new Mobile ();

The Ext.create("classname") method dynamically loads all the JavaScript files that the classname is dependent on before creating an instance, whereas this is not possible when you use the new keyword.

Constructor

Constructor is the first function that’s called when an object is created. You can define constructors in our classes using the special property constructor. The constructor property is wired to a function that gets invoked when an object is created using Ext.create.

Ext.define("Mobile ",{

constructor : function(){

alert("Mobile created");

}

});

The second argument of the Ext.define method is an object that has a constructor property. On creating an object of class Mobile the constructor gets invoked and you’ll see Mobile created alert message.

You can define properties of the class and initialize them in constructors.

Property

Let’s define our Mobile class with two properties title and price. These two properties will be initialized in our constructors.

Ext.define("Mobile ",{

title : "sony xoeria neo v",

price : 17500,

constructor : function(title,price){

this.title = title;

this.price = price;

}

});

The two properties are initialized using the this keyword, which makes them visible to the objects of the class.You can instantiate the Mobile class and initialize it as shown below.

var sony = Ext.create("Mobile ","xperiaz",400000);

alert(sony.title);

alert(sony.price);

You can access title and price properties using the object reference. The above code snippet alerts xperiaz and 400000.

A class may have a number of attributes. It becomes tedious to define and initialize them one after the other using the constructor. It’ll be better if we can define the attributes with default values and initialize only the required ones.

Config

Ext JS 4 provides a config section for every class where you can list the attributes of the class with default values. The object can be created by initializing the attributes in which you are interested.

Ext.define("Mobile",{

config : {

title : "",

price : -1,

manufacturers :[]

},

constructor : function(cfg){

this.initConfig(cfg);

}

});

In the code snippet above, we’ve defined a Mobile class with title, price, and authors listed in the config section. The config section is initialized in the constructor by calling the initConfig method. The initConfig method that is present in Ext.Base class initializes the configuration object. You can create an object of the Mobile class as shown below.

var sony = Ext.create("Mobile",{

title : "xperiay", manufacturers: ["sony1","sony2"]

});

We’ve created the Mobile object by initializing the title and manufacturers attributes. As mentioned earlier, it’s not mandatory to initialize these attributes while creating the instance. The variables declared in the config section have the getter/setter methods generated automatically. In the above example where sony is a reference to the Mobile object,you can access the properties as shown below.

alert(sony.getTitle());

sony.setPrice(1200000);

alert(sony.getManufacturers()[0]);

In OO languages the getter and setter methods are usually known as accessor methods. They are used to access a variabl.If you have a variable called age, the accessor methods for it will be getAge() and setAge(age). The getAge method will return the value of age and the setAge method will modify the value of the age.

You can override the getter/setter methods if you want to take more control of the class. For example, say you want the price of the Mobile to have a minimum price of 5000. You can perform this validation in the overridden setPrice method

Validating the Mobile Price

Ext.define("Mobile", {

config: {

title: "",

price: 5000,

manufacturers: []

},

constructor: function (cfg) {

this.initConfig(cfg);

},

setPrice: function (priceVal) {

if (priceVal < 5000)

alert("Invalid value for price " + priceVal);

else

this.price = priceVal;

}

});

var sony = Ext.create("Mobile",{

title : "xperiaaaaaaaa", authors : ["sony3","sony4"]

});

sony.setPrice(3000);

alert(sony.getPrice());

sony.setPrice(30000);

alert(sony.getPrice());

the setPrice method has been overridden with the validation check. The output of the code will be

Invalid value of price 3000

5000

30000  

The config generates an apply method for every attribute automatically as well. The apply method is called internally by the setter method. you can override the applyPrice method to implement the validation rule

Overriding the applyPrice Method

Ext.define("Mobile", {

config: {

title: "",

price: 5000,

manufacturers: []

},

constructor: function (cfg) {

this.initConfig(cfg);

},

applyPrice: function (priceVal) {

if (priceVal < 5000)

console.log("Invalid value for price " + priceVal);

else

this.price = priceVal;

return this.price;

}

});

Methods

You can define custom methods in classes as shown below.

Ext.define("Mobile",{

config : {

title : "",

 price: 0

},

constructor : function(cfg){

this.initConfig(cfg);

},

run: function(){

alert("running " + this.getTitle());

}

});

The Mobile class has a run function that can be accessed using the object reference.

var sony = Ext.create("Mobile",{

title : "xperia", price:12000.00

});

sony.run(); //alerts running xperia

Ext JS 4 provides support for inheritance.

Inheritance

We have an extend keyword that can be used to inherit a class in Ext JS 4. Let’s create an Employee class and a Manager class that inherits the Employee class.

Ext.define("Employee",{

config : {

employeeid : "",

name : "",

salary : 0

},

constructor : function(cfg){

this.initConfig(cfg);

},

work : function(){

alert(this.getName() + " is working");

}

});

Ext.define("Manager",{

extend : "Employee",

config : {

level : 1

}

});

The Manager class inherits the Employee class using the extend keyword. The configuration properties and the work function in the Employee class are available to the Manager class.

We can create a Manager object and invoke the work function as shown below.

var mgr = Ext.create("Manager",{

employeeid:"1529", name: "mani kumar", level: 4

});

mgr.work(); //alerts mani kumar is working

We can override the Employee’s work function in Manager’s class.

Ext.define("Manager",{

extend : "Employee",

work : function(){

alert(this.getName() + " is in a meeting");

}

});

We can call the base class work function using this.callParent()

Ext.define("Manager",{

extend : "Employee",

work : function(){

this.callParent();

alert(this.getName() + " is in a meeting");

}

});

The arguments passed to the Manager’s work function can be supplied to the Employee’s work function by using the arguments keyword in JavaScript as shown below.

this.callParent(arguments);

You can extend a class and override the constructor as shown below. You can invoke the base class

constructor using this.callParent method.

Ext.define("Manager",{

extend : "Employee",

constructor : function(cfg){

this.callParent(arguments);

}

});

You can override the constructor of the base class whenever you inherit generic classes like Employee, Manager,etc. However, you have to be careful when you inherit UI classes. The constructor of the UI component classes have a set of operations like initializing events, plugins, etc. Inheriting a UI component class and overriding the constructor is not a recommended practice. The UI component classes provide a method called initComponent(), which is used to initialize the component. This initComponent method is usually invoked from the constructor. The general practice is to override the initComponent method in the derived class. Say you want to create a custom Button, then you can

do that as shown below.

Ext.define("MyButton",{

extend : "Ext.button.Button",

initComponent : function(){

//Your code goes here

}

});

Multiple inheritance is not supported in Ext JS 4. We have mixins for multiple inheritance similar to interfaces in Java and C#.

Mixins

Mixins help you to mix the behavior of different classes into your class. Your class can have the functionalities of any number of classes mixed together. It’s somewhat similar to interfaces in Java where a class can implement any number of interfaces.

Let’s create two classes, Aquatic and Terrestrial, with swim and walk functions, respectively.

Ext.define("Aquatic",{

swim : function(){

alert("Swimming");

}

});

Ext.define("Terrestrial",{

walk : function(){

alert("Walking");

}

});

We’ll create a class Reptile that can walk as well as swim. The Reptile class is created by mixing Aquatic and Terrestrial together.

Ext.define("Reptile",{

mixins : ["Aquatic","Terrestrial"]

});

A Reptile instance can invoke the walk and swim functions.

var reptile = Ext.create("Reptile");

reptile.swim();

reptile.walk();

We have discussed the basic OO concepts in Ext JS 4. Let’s learn few other features in the class system in Ext JS 4.

Alias

You can define an alias name for the classes. The alias name is mainly used when you create custom components.

You can use the alias property in the definition of the class as shown below.

Ext.define("Mobile.SmartPhone.Sony.Xperia", {

alias : "Mobile",

});

Ext.create("Mobile");

arguments, classes, json usage in javascript and extjs

The Arguments Keyword

The arguments keyword is an implicit parameter available to functions in JavaScript. It’s an array that is used to access

the function’s parameter list, which basically says you don’t really have to formally declare arguments for a function,

but you can still access the values passed, using the ‘arguments’.

Say you have a method to calculate the sum of all the values passed to a method.

function sum() {

        var sum = 0;

        for (var i = 0; i < arguments.length; i++) {

            sum += arguments[i];

        }

        alert(sum);

    }

   

sum(1, 2, 3); //Alerts 6

sum(10, 20, 30, 40, 50); //Alerts 150

Use of Arguments in Ext JS 4

Ext JS 4 API has many functions defined to accept a number of arguments, but you do not always invoke them by

passing all the arguments. For example, here is a code snippet where I handle the itemclick event for a data grid.

Both lines are valid; the difference lies in the number of arguments you pass to the function.

Ext.getCmp("mygrid").on("itemclick",function(src,record){...});

Ext.getCmp("mygrid").on("itemclick",function(src,record,index){...});

You can call a base class method from the derived class method in Ext JS 4 by writing this.callParent(arguments);

Notice the use of the arguments keyword.

Functions

In JavaScript functions are first class citizens, like classes in OO languages.

You can define a function in the traditional way like this.

function eat(){ alert("Eating"); }

You can invoke the eat() function even before you define it, as shown below.

eat();//alerts Eating

function eat(){alert ("Eating"); }

Though JavaScript is an interpreted language, function definitions are run first, irrespective of where they are placed in the code. So you can invoke a function even before you define it like the eat() function call.

You can also assign a function to a variable like this:

var eat = function(){ alert ("Eating"); }

Though eat is defined to be a variable, you can still invoke it like a normal function call: eat(). But what you have to watch out for is that you cannot invoke the eat() function before defining the variable. The following code will throw an error if the function is declared as an expression.

eat();

//Uncaught TypeError: Property 'eat' of object [object DOMWindow] is not a function

var eat = function(){alert ("Eating"); }

So what’s the use of assigning a function to a variable? You can pass the eat variable as an argument to other function

Functions as arguments

function work(arg){

arg();

}

work(eat);

work(function(){alert ("Coding");});

As shown above, the work() function accepts an argument which can be a reference to another function.

We can then invoke the passed function using the arg() call. A function that accepts another function as an argument is commonly referred as a Higher-order function.

Higher-Order Functions in Ext JS 4

In Ext JS 4 you have plenty of functions that accept other functions as arguments. For example, the function that’s called after the DOM is loaded is:

Ext.onReady(function(){

...

});

Ext.onReady() is a higher order function.

Classes in JavaScript

JavaScript is a functional language. It doesn’t have classes like those in OO languages. You can treat functions as classes, and create objects, by using the new keyword. You can create function objects that you can manipulate and pass around like objects. This feature can be used to write traditional OO code.

Say you want to create a class with variables and methods in JavaScript. Instantiate it just as you would in C# or Java. Let’s create a class Person with name and age attributes and an eat() method.

Person class

function Person(theName,theAge){

this.name = theName; //public variable

this.age = theAge;

this.eat = function(){

alert(this.name + " is eating");

}

}

If you now want to create an object of class Person and invoke its eat() method, you can use the new keyword just as in other OO languages.

var p1 = new Person("ManiKumar",23);

p1.eat(); //alerts ManiKumar is eating

alert(p1.age); // alerts 23

The new keyword creates an object from the Person function and returns a reference to the object. Notice the use of this keyword in the Person class. The this keyword binds a variable to the object that is created. You can treat this keyword like a public variable.

Use of Classes in Ext JS 4

The UI components in Ext JS 4 are available as classes. So if you want to create a button, you actually create an object of Button class like this.

var button = new Ext.button.Button();

Now you know how a Button class would be defined in Ext JS 4. It’s just a function.

JSON

One of the most popular and widely-used features of JavaScript is the JavaScript Object Notation (JSON). It’s used to represent a JavaScript object. It’s also used as a data format like XML. Here’s a JSON object.

var myDetails = {

name:"mani kumar",

address : "hyderabad",

test : function(){

alert("hello " + this.name);

}

};

The myDetails variable is a JSON object with some properties. The formats is an array and test() is a function.

Use of JSON in Ext JS 4

The properties of the UI components that you create in Ext JS 4 are specified in JSON

format. Here is some code that creates a button in Ext JS 4.

var btn = new Ext.button.Button({

text : "Click",

id : "mybutton",

handler : function(){

console.log("Button clicked");

}

});

As you can infer from the code, the button’s attributes like text, handler, id are specified as properties of a JSON object.