ExtJS Configuration and table controls use 1th/2 page _extjs

ExtJS is a complete set of RIA solution, also because the function integrity caused the ext-all.js has more than 400 K, because is based on the JS and the CSS function realization, to the client machine performance also has certain request, namely does not support IE6 the following version. If your project has a strict limit on the response time of a Web page, or if the client operating system is too old, be sure not to choose ExtJS.
This article is mainly about the download and configuration of ExtJS and some simple ways to use it. Currently the latest version is 3.0, but this article mainly introduces the 2.2 version.
First, ExtJS download and configuration
1, download Address: www.extjs.com/(This is the official website, you can choose their favorite version of the download)
2, the configuration process, assuming the downloaded directory for ext, we have in the directory to build our own directory Myexample (the directory used to store your own written code), the configuration process is as follows:
(1) Create a new paging file helloworld.html
(2) Add the following code between

Copy Code code as follows:

<link rel= "stylesheet" type= text/css "href=". /resources/css/ext-all.css "/>
<script type= "Text/javascript" src= ". /adapter/ext/ext-base.js "></script>
<script type= "Text/javascript" src= ". /ext-all.js "></script>
<script type= "Text/javascript" >
Ext.onready (function () {
Ext.MessageBox.alert (' HelloWorld ', ' Hello World ');
})
</script>

(3) Note here <script></script> cannot replace with </script>
(4) JS Import order do not change
(3) If a HelloWorld dialog box pops up, the configuration is successful.
second, the use of Grid control table
The tables in ext are very powerful, including the ability to sort, cache, drag, hide a column, automatically display line numbers, column totals, cell editing, and so on. Let's start by introducing how to make a simple grid.
1, create the table column information:

Copy Code code as follows:

var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' ID '},
{header: ' name ', Dataindex: ' Name '},
{header: ' description ', dataindex: ' DESN '}
]);

2, add data information:

Copy Code code as follows:

var data=[
[' 1 ', ' name1 ', ' DESN1 '],
[' 2 ', ' name1 ', ' DESN1 '],
[' 3 ', ' name1 ', ' DESN1 '],
[' 4 ', ' name1 ', ' DESN1 '],
[' 5 ', ' name1 ', ' DESN1 ']
];

3. Create Data storage objects:

Copy Code code as follows:

var ds=new Ext.data.Store ({
Proxy:new Ext.data.MemoryProxy (data),
Reader:new Ext.data.ArrayReader ({},[
{name: ' ID '},
{name: ' Name '},
{name: ' DESN '}
])
});
Ds.load ()//This is quite important

.
4, the table column model defined well, the original data and data conversion has been completed, the rest of the only need to assemble them together, our grid was created successfully.

Copy Code code as follows:

var grid=new Ext.grid.GridPanel ({
Renderto: "Grid",
Store:ds,
height:600,
cm:cm
});

5. Note: Ext.grid.Grid's Renderto attribute indicates where EXT will render the table, so there should be a <div id= ' grid ' ></div> corresponding to it in HTML.
6, all the code list is as follows (has passed the test):

Copy Code code as follows:

<%@ Page language= "C #" autoeventwireup= "true" codefile= "Grid.aspx.cs" inherits= "Ext_example_grid"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>grid </title>
<link rel= "stylesheet" type= text/css "href=". /resources/css/ext-all.css "href=" Resources/css/ext-all.css "/>
<script type= "Text/javascript" src= ". /adapter/ext/ext-base.js "src=" Adapter/ext/ext-base.js "></script>
<script type= "Text/javascript" src= ". /ext-all.js "src=" Ext-all.js "></script>
<script type= "Text/javascript" ><!--
Ext.onready (function () {
var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' ID '},
{header: ' name ', Dataindex: ' Name '},
{header: ' description ', dataindex: ' DESN '}
]);
var data=[
[' 1 ', ' name1 ', ' DESN1 '],
[' 2 ', ' name1 ', ' DESN1 '],
[' 3 ', ' name1 ', ' DESN1 '],
[' 4 ', ' name1 ', ' DESN1 '],
[' 5 ', ' name1 ', ' DESN1 ']
];
var ds=new Ext.data.Store ({
Proxy:new Ext.data.MemoryProxy (data),
Reader:new Ext.data.ArrayReader ({},[
{name: ' ID '},
{name: ' Name '},
{name: ' DESN '}
])
});
Ds.load ();
var grid=new Ext.grid.GridPanel ({
Renderto: "Grid",
Store:ds,
height:600,
cm:cm
});
});
--></script>
<body>
<form id= "Form1" runat= "Server" >
<div id= "Grid" >
</div>
</form>
</body>

The experimental effect diagram is shown in Figure 1

Figure 11 A simple grid
three, the Table control grid function detailed
The second section briefly describes how to create a simple grid, which is a detailed analysis of the functionality of the grid.
3.1 Partial attribute function
1, by default, the grid can drag and drop columns, you can also change the width of the column, if you want to disable these two features, when the grid object is defined, respectively, set Enablecolumnmove and Enablecolumnresize to false.
2, if want to show zebra effect, can add striperows:true
3, Grid also supports a reading of data masks and hints, set properties Loadmask:true, Store.load () before the completion of the show "Loading ..."
3.2 autonomously determine the width of each column
1, if you want to define width, just set the column's Width property, as shown in the following code. The effect figure is shown in Figure 2.

Copy Code code as follows:

var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' ID ', width:60},
{header: ' names ', Dataindex: ' Name ', width:180},
{header: ' description ', dataindex: ' Desn ', width:200}
]);

Figure 2 Customizing the width of each column
2, so you need to calculate the width of each column, if you want to allow each column automatically fill grid, only need to viewconfig in the Forcefit can. After using Forcefit, the grid will be proportionally distributed according to the width you set in cm, which is very intelligent. The implementation code is as follows:

Copy Code code as follows:

var grid=new Ext.grid.GridPanel ({
Renderto: "Grid",
Effect of striperows:true,//zebra crossing
Loadmask:true,
Store:ds,
height:600,
CM:CM,
viewconfig:{
Forcefit:true
}
});

3, we can also consider Autoexpandcolumn, which allows the width of the specified column to automatically extend, so as to fill the entire table. The code is as follows

Copy Code code as follows:

var grid=new Ext.grid.GridPanel ({
Renderto: "Grid",
Effect of striperows:true,//zebra crossing
Loadmask:true,
Store:ds,
height:600,
CM:CM,
Autoexpandcolumn: ' DESN '
viewconfig:{
Forcefit:true
// }
});

Note: Autoexpandcolum can only specify the ID of a column, note, must be ID, originally we set the CM inside have no ID, now in order to use Autoexpandcolumn, To set the ID for CM's desn. So the DESN can be extended automatically when rendering, otherwise there will be an error.

Copy Code code as follows:

var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' ID ', width:60},
{header: ' names ', Dataindex: ' Name ', width:180},
{ID: ' DESN ', header: ' Description ', dataindex: ' Desn ', width:200}
]);

3.3 Let grid support sorted by column
Sorting is easy to implement in Ext, simply by adding the sortable property when defining the column model, as shown in the following code:

Copy Code code as follows:

var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' ID ', width:60,sortable:true},
{header: ' names ', Dataindex: ' Name ', width:180},
{ID: ' DESN ', header: ' Description ', dataindex: ' Desn ', width:200}
]);

The effect figure is shown in Figure 3

Figure 3 Sorting by column effect
3.4 Displaying Time type data
Although the returned JSON is both numeric and string, in ext we can also get date-type data from the background and then give it to grid for formatting.
1, first define a set of data, the last column is date format data.

Copy Code code as follows:

var data=[
[' 1 ', ' name1 ', ' desn1 ', ' 2009-09-17t02:58:04 '],
[' 2 ', ' name2 ', ' desn1 ', ' 2009-09-17t02:58:04 '],
[' 3 ', ' Name3 ', ' desn1 ', ' 2009-09-17t02:58:04 '],
[' 4 ', ' name4 ', ' desn1 ', ' 2009-09-17t02:58:04 '],
[' 5 ', ' name5 ', ' desn1 ', ' 2009-09-17t02:58:04 ']
];

2. Then we add one line of configuration to the reader and set the type and DateFormat two properties in addition to the name. The code is as follows:

Copy Code code as follows:

var store1= new Ext.data.Store ({
Proxy:new Ext.data.MemoryProxy (data),
Reader:new Ext.data.ArrayReader ({},[
{name: ' ID '},
{name: ' Name '},
{name: ' DESN '},
{name: ' Date ', type: ' Date ', DateFormat: ' Y-m-dth:i:s '}
])
});

3. Again, we need to add one line of configuration to CM:

Copy Code code as follows:

var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' ID ', width:60,sortable:true},
{header: ' names ', Dataindex: ' Name ', width:180},
{ID: ' DESN ', header: ' Description ', dataindex: ' Desn ', width:200},
{header: ' Time ', Dataindex: ' Date ', type: ' Date ', renderer:Ext.util.Format.dateRenderer (' Y-M-month D-Day ')}
]);

4, the code details as shown below, the effect of the figure shown in Figure 4.

Copy Code code as follows:

<title>grid </title>
<link rel= "stylesheet" type= text/css "href=". /resources/css/ext-all.css "href=" Resources/css/ext-all.css "/>
<script type= "Text/javascript" src= ". /adapter/ext/ext-base.js "src=" Adapter/ext/ext-base.js "></script>
<script type= "Text/javascript" src= ". /ext-all.js "src=" Ext-all.js "></script>
<script type= "Text/javascript" ><!--
Ext.onready (function () {
var cm=new Ext.grid.ColumnModel ([
{header: ' number ', Dataindex: ' ID ', width:60,sortable:true},
{header: ' names ', Dataindex: ' Name ', width:180},
{ID: ' DESN ', header: ' Description ', dataindex: ' Desn ', width:200},
{header: ' Time ', Dataindex: ' Date ', type: ' Date ', renderer:Ext.util.Format.dateRenderer (' Y-M-month D-Day ')}
]);
var data=[
[' 1 ', ' name1 ', ' desn1 ', ' 2009-09-17t02:58:04 '],
[' 2 ', ' name2 ', ' desn1 ', ' 2009-09-17t02:58:04 '],
[' 3 ', ' Name3 ', ' desn1 ', ' 2009-09-17t02:58:04 '],
[' 4 ', ' name4 ', ' desn1 ', ' 2009-09-17t02:58:04 '],
[' 5 ', ' name5 ', ' desn1 ', ' 2009-09-17t02:58:04 ']
];
var store1= new Ext.data.Store ({
Proxy:new Ext.data.MemoryProxy (data),
Reader:new Ext.data.ArrayReader ({},[
{name: ' ID '},
{name: ' Name '},
{name: ' DESN '},
{name: ' Date ', type: ' Date ', DateFormat: ' Y-m-dth:i:s '}
])
});
Store1.load ();
var grid1=new Ext.grid.GridPanel ({
Renderto: "Grid1",
Effect of striperows:true,//zebra crossing
Loadmask:true,
Store:store1,
HEIGHT:200,
CM:CM,
viewconfig:{
Forcefit:true
}
});
});
--></script>
<body>
<form id= "Form1" runat= "Server" >
<div id= "Grid1" >
</div>
</form>
</body>

Figure 4 Grid with time data
3.5 Automatically display line numbers and check boxes
In fact, the line number and check box are all extensions of the renderer. Of course, the check box is much more complex to function.
1, automatic display line number: Modify the column model cm, add Rownumberer object;
2, check box: We create a checkboxselectionmodel ()
3, the detailed code is as follows, the effect chart as shown in Figure 5

Copy Code code as follows:

var sm=new Ext.grid.CheckboxSelectionModel ();
var cm=new Ext.grid.ColumnModel ([
New Ext.grid.RowNumberer (),
Sm
{header: ' number ', Dataindex: ' ID ', width:40,sortable:true},
{header: ' names ', Dataindex: ' Name ', width:180},
{ID: ' DESN ', header: ' Description ', dataindex: ' Desn ', width:200},
{header: ' Time ', Dataindex: ' Date ', type: ' Date ', renderer:Ext.util.Format.dateRenderer (' Y-M-month D-Day ')}
]);

Figure 5 Automatic line number and check box effect chart

Current 1/2 page 12 Next read the full text