Friday, September 18, 2015

Build Where Clause Dynamically Using Linq PredicateBuilder to filter data from DataTable C#

To filter some data from a DataTable based on two or more condition is not possible using the below code. As the Linq where condition not allowed more than one condition.
var filtered = dataTable.Where(x => x["Name"].Equals("Venkat") && x => x["Age"].Equals("26")).ToList()

So using the PredicateBuilder we can build where clause dynamically. Check the below code.,

As you can see, the below code is constructing the where clause dynamically. You can pass multiple column name and value as filter condition dynamically.
var predicate = PredicateBuilder.True();
predicate = predicate.And(x => x["Name"].Equals("Venkat"));
predicate = predicate.And(x => x["Age"].Equals("26"));
predicate.Compile();
var filtered = dataTable.Where(predicate).ToList();

public static class PredicateBuilder
{
    public static Expression<Func<T, bool>> True<T>() 
    { 
        return f => true; 
    }

    public static Expression<Func<T, bool>> False<T>() 
    { 
        return f => false; 
    }

    public static Expression<Func<T, bool>> Or<T>(this Expression<Func<T, bool>> expr1, Expression<Func<T, bool>> expr2)
    {
        var invokedExpr = Expression.Invoke(expr2, expr1.Parameters.Cast<Expression>());
        return Expression.Lambda<Func<T, bool>> (Expression.OrElse(expr1.Body, invokedExpr), expr1.Parameters);
    }

    public static Expression<Func<T, bool>> And<T>(this Expression<Func<T, bool>> expr1, Expression<Func<T, bool>> expr2)
    {
        var invokedExpr = Expression.Invoke(expr2, expr1.Parameters.Cast<Expression>());
        return Expression.Lambda<Func<T, bool>> (Expression.AndAlso(expr1.Body, invokedExpr), expr1.Parameters);
    }
}

Friday, September 11, 2015

How to convert CSV to EXCEL using C#

It is possible using the EPPLUS .net library. It is free and available in epplus.codeplex.com. You have to pass both CSV and the EXCEL file path where it should be saved. The ExcelTextFormat class has more conditions, based on that it reads the CSV file. Check the below console application sample code that accomplish that task.
static void Main(string[] args)
{
 string csvFilePath = @"D:\sample.csv";
 string excelFilePath = @"D:\sample.xls";

 string worksheetsName = "TEST";
 bool firstRowIsHeader = false;

 var excelTextFormat = new ExcelTextFormat();
 excelTextFormat.Delimiter = ',';
 excelTextFormat.EOL = "\r";

 var excelFileInfo = new FileInfo(excelFilePath);
 var csvFileInfo = new FileInfo(csvFilePath);

 using (ExcelPackage package = new ExcelPackage(excelFileInfo))
 {
  ExcelWorksheet worksheet = package.Workbook.Worksheets.Add(worksheetsName);
  worksheet.Cells["A1"].LoadFromText(csvFileInfo, excelTextFormat, OfficeOpenXml.Table.TableStyles.Medium25, firstRowIsHeader);
  package.Save();
 }

 Console.WriteLine("Converted!");
 Console.ReadLine();
}
EPPLUS Setup

The EPPLUS can be installed through Visual Studio Nuget package also. Follow the below steps to install it.

  • Right click the Visual Studio solution and select "Manage NuGet Packages for Solution".
  • And in the window search for EPPlus. 
  • From the searched list select EPPlus and click install.

Wednesday, September 9, 2015

How to use Sass/Scss in Visual Studio

Visual Studio update 2 has the native Scss support. So we can write Scss code but, to compile it, we need Sass compilers. Those are available as Visual Studio extensions.

There are many extensions available in the internet. You can use Web Workbench extension as it is very simple to use. Using Web Workbench extension in visual studio, files are compiled automatically to CSS with the same name whenever you save it.

So you should refer the compiled CSS files to the project to make the CSS work.

Folow the below steps to install the Web Workbench extension in Visual Studio,
  • Download the extension from here
  • Double click to Install it
  • Restart the Visual Studio
  • You will see a new MINDSCAPE menu in Visual Studio.
Reference: http://www.mindscapehq.com/products/web-workbench

Sass - CSS Stylesheet Language

Sass (Syntactically Awesome Style Sheets) is an extension of CSS that adds power and elegance to the basic language. It is an open source project that is coded in Ruby. It was created in order to simplify CSS development. It adds a feature set to your stylesheet markup that makes writing styles more organized way.



When I work with Sass the file extensions were scss. So what is Scss in Sass?. Well, when Sass first came out, the main syntax was different from CSS. It looked a lot like Haml. So in version 3 Sass changed it’s main syntax to .scss to make it look like CSS.

What is the use of Sass?

It is important to follow the coding standard in our application. Not only in server side code and also in client side code. So Scss makes writing maintainable CSS easier. You can get more done, in less code, more readable, in less time.

1. Variables

Variables in Sass are preceded with the $ symbol.

Types of variables:
  • numbers - 1.2, 13, 10px
  • strings - "foo", 'bar', baz
  • colors - blue, #04a3f9, rgba(255, 0, 0, 0.5)
  • booleans - true, false
  • null - null,
  • lists - 20px 5px 0 10px, Helvetica, Arial
  • maps - (key1: value1, key2: value2)
$baseColor: #eeffcc;

body {
    background: $baseColor;
}
Variable has scope. If it is declared within the braces it can not be accessed outside. But using !global flag we can make the variable globally accessible.
$baseColor: #ccc !global;
Variable might be used in multiple places. In any place if values is not assaigned to it, We can set a default value for a variable using !default flag.

2. Math

It's supports mathematical expressions.

Types of math operators:
  • + Addition
  • – Subtraction
  • / Division
  • * Multiplication
  • % Modulo
  • == Equality
  • != Inequality
$container-width: 100%;

.container {
    width: $container-width / 4;
}
3. Functions

It has some built in functions. Click here

4. Nesting

Using this feature we can write single class by nesting the common class together instead of writing multiple classes separately.
.container {
    width: 100%;
}

.container h1 {
    color: red;
}

.container {
    width: 100%;
    h1 {
        color: red;
    }
}
In some situation we have to refer the parent. For example we cannot just write :hover inside the parent a class. We have to refer the parent with the & symbol.
a {
    color: blue;
        &:hover {
        text-decoration: underline;
    }

    &:visited {
    color: purple;
    } }
5. Imports

Imports allow you to break your styles into separate files and use them into one another. @import directive used to import a scss files.
@import "grids.scss";
@import "grids";
Sass compilers also include a concept called “partials”. If you prefix a .sass or .scss file with an underscore, it will not get compiled to CSS. This is helpful if your file only exists to get imported into a master style.scss and not explicitly compiled.

6. Extends & Placeholders

Using @extend keyword we can inherit already existing styles.
.input {
    border-radius: 3px;
    border: 4px solid #ddd;
    color: #555;
    font-size: 17px;
    padding: 10px 20px;
    display: inline-block;
    outline: 0;
}

.error-input {
    @extend .input;
    border:4px solid #e74c3c;
}
7. Mixin

Mixins allow you to define styles that can be re-used throughout the stylesheet. Can be re-used using @include directive.
@mixin large-text {
    font: {
        family: Arial;
        size: 20px;
        weight: bold;
    }
    color: #ff0000;
}

.page-title {
    @include large-text;
    padding: 4px;
    margin-top: 10px;
}
Its also accept parameters.
@mixin style-border($color, $width) {
    border: {
        color: $color;
        width: $width;
    }
}

p { @include style-border(blue, 1in); }
8. Function Directives

It is possible to define your own functions in sass and use them in any value or script context.
$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
    @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
We can also pass named parameters like below,
#sidebar { width: grid-width($n: 5); }
How to use Sass in Visual Studio

Check out my another post to know How to use Sass in Visual Studio. Click here.

Monday, September 7, 2015

Sample ExtJs Column Chart

In this column chart, I have used the same model, store and require section that I used in my previous sample Sample ExtJS Line Chart. So check it out before continue this sample.

Chart Component
 
Ext.create('Ext.chart.Chart', {
   renderTo: Ext.getBody(),
   width: 400,
   height: 300,
   theme: 'Green',
   store: store,
   animate: true
    axes: [
        {
            title: 'Score',
            type: 'Numeric',
            position: 'left',
            fields: ['score'],
            minimum: 0,
            maximum: 400
        },
        {
            title: 'Over',
            type: 'Numeric',
            position: 'bottom',
            fields: ['over']
        }
    ],
    
      series: [
        {
            type: 'column',
            axis: 'left',
            xField: 'over',
            yField: 'score'
        }
    ]
});
Result
Demo Click here to view in Jsfiddle

Sample ExtJS Line Chart

In this line chart sample I have used two fields 'over' and 'score' in the model named 'CricketScore'. Added some default scores in the store. Both values are numeric. The store has been assigned to the chart store property. The two fields are pointed to the position left and bottom in the axes array section in the chart. In the series array section I have mentioned the chart type and the x, y fields.

In the fiddle demo, I have included ExtJS 4.2.0 in the Frameworks and Extension section and in the External resources section added the following CSS Url,
http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css
Namespace
 
Ext.require([
    'Ext.chart.Chart'
]);
Model
Ext.define('CricketScore', {
    extend: 'Ext.data.Model',
    fields: ['over', 'score']
});
Store
var store = Ext.create('Ext.data.Store', {
    model: 'CricketScore',
    data: [
        { over: 5, score: 35 },
        { over: 10, score: 75 },
        { over: 15, score: 110 },
        { over: 20, score: 135 },
        { over: 25, score: 171 },
        { over: 30, score: 200 },
        { over: 35, score: 225 },
        { over: 40, score: 240 },
        { over: 45, score: 285 },
        { over: 50, score: 345 },
    ]
});
Chart Component
Ext.create('Ext.chart.Chart', {
   renderTo: Ext.getBody(),
   width: 400,
   height: 300,
   theme: 'Red',
   store: store,
   axes: [
        {
            title: 'Over',
            type: 'Numeric',
            position: 'left',
            fields: ['over'],
            minimum: 1,
            maximum: 50
        },
        {
            title: 'Score',
            type: 'Numeric',
            position: 'bottom',
            fields: ['score']
        }
    ],
    
      series: [
        {
            type: 'line',
            xField: 'score',
            yField: 'over'
        }
    ]
});
Result
Demo Click here to view in Jsfiddle

Friday, September 4, 2015

How to find a control in ASP.NET page recursively

Here is a sample code to find a asp.net control. You have to pass the parent control within which you need to search and the id of control to be searched as params.
public static Control FindControlRecursive(Control parent, string id)
{
    // If the control we're looking for is parent, return it
    if (parent.ID == id) return parent;

    // Else search through children
    foreach (Control control in parent.Controls)
    {
        Control found = FindControlRecursive(control, id);
        if (found != null) return found;
    }

    // No control with id is found
    return null;
}

JSLint - JavaScript code quality tool

JSLint is a static code analysis tool used in software development for checking JavaScript source code complies with coding rules. It is provided primarily as an online tool http://www.jslint.com/. It is also available as a Visual Studio extension JSLint.NET for the .Net developers. It can also check HTML and CSS code qualities.

I found very useful as I am using it in my current ExtJS project. Follow the below simple steps to make it available in your Visual Studio
1. Download the Visual Studio extension by clicking here,
2. Double click and Install the downloaded extension
3. Restart the Visual Studio

It will find your JavaScript coding standard errors and display it as Warnings whenever building your .net web application. You can also manually run it by just right click a JavaScript file and clikck JS Lint. Some additional settings can be configured in the menu Tools -> JS Lint Optons

Check the below attached image to see how it actually displays errors in Visual Studio.


Thursday, September 3, 2015

15 Cool New Features in C# 6.0

The first release of the C# language was in 2002 and then in 2005 version 2 released. It gave us Generics. In 2007, the C# language gave us Linq features, including lambda expressions, implicit typing, a query syntax and var keyword. In 2010, the release of version 4 introduced the dynamic keyword and the dynamic language runtime. And then 2012 brought us version 5 of the language. It gave us the async and await keywords, which make async code much easier to read and write, and in today's world where the async programming model is used nearly everywhere from the server to the client. Compared to the previous release, the language features introduced in this version might seem underwhelming. And partly that's because C# is now over 13 years old; it's a somewhat mature language has major features that have been added over the years. They give us the ability to write less code than we had to write before.



Here is the 15 cool new features in C# 6.0 According to Roslyn some features are planned and might be available in the future.

1. Auto-Property Initializers

In early version of c# if we want to set a default value for a property in a class, we do this in the constructor. In C# 6.0 using Auto-property initializers we can assign a default value for a property as part of the property declaration itself.

// Old way
class Program
{
    public Program()
    {
        MyProperty = 10;
    }

    public int MyProperty { get; set; }
}

// New way
class Program
{
    public int MyProperty { get; set; } = 10
}

2. Using static

With static members you don't need an instance of an object to invoke a method, you just use the typename, a dot, a static method name, and apply parentheses and parameters. This feature allows us to access the static methods inside a class directly without speifying its class name. Usually we use Convert.ToInt32 to convert a value to integer. But using this feature we can just use ToInt32 to convert.

// Old way
namespace TestApp
{
    class Program
    {
        static void Main(string[] args)
        {
            var value = Convert.ToInt32("2015");
        }
    }
}

// New way
using static Convert;

namespace TestApp
{
    class Program
    {
        static void Main(string[] args)
        {
            var value = ToInt32("2015");
        }
    }
}

// Some more samples,
using static System.Console; 
using static System.Math;

class Program 
{ 
    static void Main() 
    { 
        WriteLine(Sqrt(25)); 
    } 
}

3. Dictionary Initializers

Ever since C# version 3 came around, we've had the ability to initialize collections like lists and dictionaries using the key value pairs are surrounded with curly braces. With C# 6.0 we can achieve the same result, using key value inside of square brackets and a sign of value using an equal sign.

// Old way
Dictionary dict = new Dictionary<int, string>
{
    {1, "Apple" },
    {2, "Microsoft" },
    {3, "IBM" }
};

// New way
Dictionary dict = new Dictionary<int, string>
{
    [1] = "Apple",
    [2] = "Microsoft",
    [3] = "IBM" 
};

4. Getter-only auto-properties
When we use auto implemented properties in old vesion of c#, we must provide both get and set. If you want the property value should not be set, you can use the private accessor on the setter, With C# 6.0, you can now omit the set accessor to achieve true readonly auto implemented properties:

// Old way
public int MyProperty { get; private set; }

// New way
public int MyProperty { get; }

5. Null-conditional operators (?.)

This is one of the cool feature in c# 6.0. Usually we use if condition before using it to execution. But using this feature we can check the value is null or not in a single line and proceed the execution if it is not null. It help us to avoid the NullReferenceException.

// Old way
public string Truncate(string value, int length)
{
    string result = value;
    if (value != null)
    {
        result = value.Substring(0, value.Length - 1);
    }

    return result;
}

// New way
public string Truncate(string value, int length)
{          
    return value?.Substring(0, value.Length - 1);
}

Some more samples,
int? length = customers?.Length; // null if customers is null
Customer first = customers?[0]; // null if customers is null 
int length = customers?.Length ?? 0; // 0 if customers is null

6. await in catch and finally block

In c# 6.0 the await keyword can be used inside catch or finally block. Usually we would write log when any exception occured inside catch block itself. In those times we no need to wait for that execution to be completed before going to next line of execution. So using the await keyword those execution will be asynchronous.

try
{

}
catch (Exception)
{
    await LogManager.Write(ex);
}
finally
{
    await LogManager.Write("Done");
}

7. Declaration expressions

Using this feature we can declare local variable in an expression itself instead of declaring globally. But the scope of that variable will be inside the loop.

// Old way
int parsed;
if (!int.TryParse("12345", out parsed))
{ 
}

// New way
if (!int.TryParse("12345", out int parsed))
{
}

8. Primary Constructor

Using this feature the property values can be initialized directly with the help of another new feature Auto-Property Initializers that we have seen in this post, without using default constructor and writing much of code to it. When using a primary constructor all other constructors must call the primary constructor using :this().

// Old way
public class StoredProcedureInfo
{

    private StoredProcedureInfo(string connectionName, string schema, string procedureName)
    {
        this.ConnectionName = connectionName;
        this.Schema = schema;
        this.ProcedureName = procedureName;
    }

    public string ConnectionName { get; set; };
    public string Schema { get; set; };
    public string ProcedureName { get; set; };
}

// New way
private class StoredProcedureInfo(string connectionName, string schema, string procedureName)
{
    public string ConnectionName { get; set; } = connectionName;
    public string Schema { get; set; } = schema;
    public string ProcedureName { get; set; } = procedureName;
}

9. Exception filters

This feature allow us to specify a condition on a catch block. Based on that condition the catch block will be executed.

try
{
}
catch (Exception ex) if (UserPermission == Permission.Administrator)
{
}
catch (Exception ex) if (UserPermission == Permission.Requester)
{
} 

10. Expression-bodied function

Expression-bodied function members allow methods, properties, operators and other function members to have bodies as lambda like expressions instead of statement blocks. It helps reducing lines of codes.

// Old way
public int Multiply(int a, int b)
{
    return a * b;
}

// New way
public int Multiply(int a, int b) = > a * b;

// Old way
public int WriteLog(string log)
{
    LogManager.Write(log);
}

// New way
public int WriteLog(string log) => LogManager.Write(log);

// Some more samples,
public double Distance => Math.Sqrt(X + Y); // property
public void Execute() => Math.Sqrt(25); // method

11. String Interpolation

This feature is one of an addition to the string format technique in c#. So far we used + sign or string.format to format a string. But in this feature we can directly use the value to be concatinate inside the string itself using \{} symbol. Any condition can be used inside the braces.

// Old way
public string FormatString(int value)
{
    return "Total # of tickets: "+ value + " tickets";
}

public string FormatString(int value)
{
    return string.Format("Total # of tickets: {0} tickets", value);
}

// New way
public string FormatString(int value)
{
    return "Total # of tickets: \{(value <= 1 ? "ticket" : "tickts")}";
}

// Some more samples,
var s = "\{person.Name} is \{person .Age} year\{(person.Age == 1 ? "" : "s")} old"; 

12. nameof

Used to obtain the simple (unqualified) string name of a variable, type, or member. When reporting errors in code instead of hard code it.

// Old way
public void SaveData()
{
    try
    {
    }
    catch (Exception ex)
    {
        this.WriteLog("SaveData", ex);
    }
}

// New way
public void SaveData()
{
    try
    {
    }
    catch (Exception ex)
    {
        this.WriteLog(nameof(SaveData), ex);
    }
}

13. Literals and Separators

When initializing fields and properties and variables with numerical values, we have a new binary literal syntax we can use, 0b. We can write binary values with a 0b prefix and then use just ones and zeros to specify which bits are on and off. This can lead to more readable code.
public byte code = 0b01011011010;
Another feature we have for numeric literals will be the ability to use an underscore as a separator. It's much easier to look at a value and see it as in the billions or the millions when we have an underscore separating the digits instead of just a long string of numbers. The C# compiler doesn't actually care where you use the separator, the separator can appear anywhere after the first leading digit.

public long value = 1_000_000_000;

14. Event Initializer

C# 6.0 will now allow us to wire up event handlers as part of an object initialization syntax. Before a version 6 of the language, this event wire up syntax would be illegal. I just always have to remember to use the += operator to wire up an event. Trying to assign directly to an event using an equal sign is still illegal. Events need to encapsulate the delegates that they hold inside, so from the outside we can only use += and -= to add and remove delegates respectively. In an initializer you'd want to be using += to add delegates and listen for an event to fire.

public class Person
{
    private int _age;
    public int Age
    {
        get
        {
            return _age;
        }
        set
        {
            _age = value;
             OnAgeChanged(EventArgs.Empty);
        }
    }

    public string Name { get; set; }

    public event EventHandler AgeChanged;

    protected virtual void OnAgeChanged(EventArgs e)
    {
        if (AgeChanged != null)
        {
            AgeChanged(this, e);
        }
    }
}

// Old way
class Program
{
    static void Main(string[] args)
    {
        var pers = new Person()
        {
            Name = "Venkat"
        };
        pers.AgeChanged += pers_AgeChanged;
 }

    static void pers_AgeChanged(object sender, EventArgs e)
    {
        Console.WriteLine("Changed");
    }
}

// New way
class Program
{
    static void Main(string[] args)
    {
        var pers = new Person()
        {
            Name = "Venkat",
             AgeChanged += pers_AgeChanged
        };
    }

    static void pers_AgeChanged(object sender, EventArgs e)
    {
        Console.WriteLine("Changed");
    }
}
15. params and Ienumerable

In C# version 6.0 we can use the params keyword with IEnumerable instead of using an array.

// Old way
void Foo(params int[] a) 
{
}

Foo(10,2,4,22);

// New way
void Foo(params IEnumerable<int> a) 
{
}

Foo(10,2,4,22);

Happy Coding!

Trello - Free Project Management Tool

Trello


Trello is a free web-based lighter-weight project management tool. It makes the project well organized. You can crate separate boards for your each project. A Trello board is a list of lists, filled with cards, used by you and your team. Its UI looks so cool, It makes project collaboration simple and kind of enjoyable. It has everything you need to organize projects of any size and any kind. You can create as many boards, cards, and organizations as you like and add as many people as you want. You can choose to make any number of boards or organizations private or public. Bellow image shows how a board look like. You can drag and drop cards from one list to another based on the task completion.



You can invite as many people to your board as you need, all for free. Drag and drop people to cards to divvy up tasks. Everyone sees the same board and the whole picture all at once. You can start a discussion with comments and attachments. Mention any member in a comment using @ symbol like what we using in facebook, to make sure they get notified.

You can create cards and comment via email. Trello uploads the attachments you send along, too. Also, when you get notifications via email, you can reply via email without opening Trello.

Open a card and you can add comments, upload file attachments, create checklists, add labels and due dates, and more. Add files by uploading them from your computer, Google Drive, Dropbox, Box, and OneDrive.

Whenever something important happens, you know instantly with Trello’s notification system. You’ll get notifications wherever you are: inside the app, via email, desktop notifications via the browser, or via mobile push notifications. Notifications stay in sync across all your devices. Notifications stay in sync across all your devices.

Your project may have hundreds of cards. You can easily search any card with the search and filter functionality. Search is incredible fast and powerful, with sophisticated operators that help you narrow your search. It will list out all the card related to your search with the link to the particular card. You can click there to access the card directly. Search operators refine your search to help you find specific cards and create highly tailored lists. Trello will suggest operators for you as you type, but here’s a full list to keep in mind.
  • @name - Returns cards assigned to a member
  • #label - Returns labeled cards
  • board:id - Returns cards within a specific board
  • list:name - Returns cards within the list named “name”
  • has:attachments - Returns cards with attachments. has:description, has:cover, has:members, and has:stickers also work
  • due:day -Returns cards due within 24 hours. due:week, due:month, and due:overdue also work
  • created:day -Returns cards created in the last 24 hours. created:week and created:month also work
  • edited:day - Returns cards edited in the last 24 hours. edited:week and edited:month also work
  • description:, checklist:, comment:, and name: - Returns cards matching the text of card descriptions, checklists, comments, or names
  • is:open - returns open cards. is: archived returns archived cards
  • is:starred - Only include cards on starred boards.

Trello has apps for iPhone, iPad, Android phones, tablets, and watches, Kindle Fire Tablets, and Windows 8. Useful to keep track of and get notified anything Important using the apps. Also you can create cards in the app itself no matter wherever you are. You no need to always use pc or laptop to manage your projects.

The data is private and secure. You have full control over who sees our boards. All data is sent over a secure, SSL/HTTPS connection, the same encryption technology used by banks. Trello keep encrypted, off-site backups of your data in case of disasters

Trello provides a simple RESTful web API to use Trello in your own app, plug-in, or extension where each type of resource (e.g. a card, a board, or a member) has a URI that you can interact with.
For example, if you’d like to use the API to get information about the Trello Development Board you’d use the following URI:

https://api.trello.com/1/boards/4d5ea62fd76aa1136000000c
All API requests go to https://api.trello.com
The /1 part of the URI is the API version
The /boards part means that we’re addressing Trello’s collection of boards
The /4d5ea62fd76aa1136000000c part is the id of the board that we want to interact with
to know more https://trello.com/docs/index.html

Here is a collection of boards can be used in both your personal and work life management. All of these boards can be copied and used as a jumping off point for projects of your own.

Link to access those board : https://trello.com/inspiringboards

Reference: https://trello.com

Wednesday, September 2, 2015

Sample ExtJS Grid

In the fiddle demo, I have included ExtJS 5.1.0 in the Frameworks and Extension section and in the External resources section added the following CSS Url,
http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css 
Model
    Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' },
        { name: 'email', type: 'string' },
        { name: 'phone', type: 'string' },
        { name: 'Married', type: 'boolean', defaultValue: false }
    ]
});
Store
var userStore = Ext.create('Ext.data.Store', {
 model: 'User',
 data: [
    { name: 'Lisa', email: 'lisa@simpsons.com',
        phone: '555-111-1224', Married: true },
    { name: 'Bart', email: 'bart@simpsons.com',
        phone: '555-222-1234', Married: true },
    { name: 'Homer', email: 'homer@simpsons.com',
        phone: '555-222-1244', Married: false },
    { name: 'Marge', email: 'marge@simpsons.com',
        phone: '555-222-1254', Married: false }
 ]
});
Grid Component
Ext.create('Ext.grid.Panel', {
 renderTo: document.body,
 store: userStore,
 width: 400,
 height: 200,
 title: 'Application Users',
 columns: [
        {
         text: 'Name',
         width: 100,
         sortable: false,
         hideable: false,
         dataIndex: 'name'
        },
        {
         text: 'Email Address',
         width: 150,
         dataIndex: 'email',
         hidden: true
        },
        {
         text: 'Phone Number',
         flex: 1,
         dataIndex: 'phone'
        },
        {
         xtype: 'booleancolumn',
         text: 'Boolean Field',
         flex: 1,
         dataIndex: 'Married'
        }
 ]
});
Result
Demo Click here to view in Jsfiddle