(3) Note that <script> </script> cannot be replaced by </script>.
(4) do not change the js import sequence.
(3) If a HelloWorld dialog box is displayed, the configuration is successful.
Ii. Use of Table Control Grid
EXT provides powerful table functions, including sorting, caching, dragging, hiding a column, automatically displaying a row number, column summary, and cell editing. First, we will introduce how to create a simple Grid.
1. Column information for creating a table:Copy codeThe Code is as follows: var cm = new Ext. grid. ColumnModel ([
{Header: 'number', dataIndex: 'id '},
{Header: 'name', dataIndex: 'name '},
{Header: 'description', dataIndex: 'dest '}
]);
2. Add data information:Copy codeThe Code is as follows: var data = [
['1', 'name1', 'describe1'],
['2', 'name1', 'describe1'],
['3', 'name1', 'describe1'],
['4', 'name1', 'describe1'],
['5', 'name1', 'describe1']
];
3. Create a data storage object:Copy codeThe Code is as follows: var ds = new Ext. data. Store ({
Proxy: new Ext. data. MemoryProxy (data ),
Reader: new Ext. data. ArrayReader ({},[
{Name: 'id '},
{Name: 'name '},
{Name: 'dest '}
])
});
Ds. load (); // This is very important.
.
4. The column model of the table has been defined, and the conversion of raw data and data has been completed. The rest only needs to assemble them together, and our Grid is created successfully.Copy codeThe Code is as follows: var grid = new Ext. grid. GridPanel ({
RenderTo: "grid ",
Store: ds,
Height: 600,
Cm: cm
});
5. Note: Ext. grid. the renderTo attribute of Grid indicates where EXT renders the table. Therefore, there should be a <div id = 'grid'> </div> corresponding to it in HTML.
6. The following is a list of all codes (tested ):Copy codeThe Code is 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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head id = "Head1" runat = "server">
<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: 'dest '}
]);
Var data = [
['1', 'name1', 'describe1'],
['2', 'name1', 'describe1'],
['3', 'name1', 'describe1'],
['4', 'name1', 'describe1'],
['5', 'name1', 'describe1']
];
Var ds = new Ext. data. Store ({
Proxy: new Ext. data. MemoryProxy (data ),
Reader: new Ext. data. ArrayReader ({},[
{Name: 'id '},
{Name: 'name '},
{Name: 'dest '}
])
});
Ds. load ();
Var grid = new Ext. grid. GridPanel ({
RenderTo: "grid ",
Store: ds,
Height: 600,
Cm: cm
});
});
// --> </Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div id = "grid">
</Div>
</Form>
</Body>
</Html>
Experiment 1 shows
Figure 1 a simple Grid
Iii. Details about the functions of Table Control Grid
The second part briefly introduces how to create a simple Grid. This chapter analyzes the functions of the Grid in detail.
Part 1 Property Functions
1. By default, Grid can drag and drop columns or change the column width. To disable these two functions, set enableColumnMove and enableColumnResize to false when defining the Grid Object.
2. If you want to display the zebra crossing effect, add stripeRows: true.
3. Grid also supports a mask and prompt function for Data Reading. Set the loadMask attribute to true, and the "Loading... "
3.2 determine the width of each column
1. To define the width, you only need to set the width attribute of the column, as shown in the following code. 2.Copy codeThe Code is as follows: var cm = new Ext. grid. ColumnModel ([
{Header: 'number', dataIndex: 'id', width: 60 },
{Header: 'name', dataIndex: 'name', width: 180 },
{Header: 'description', dataIndex: 'dest', width: 200}
]);
Figure 2 customize the width of each column
2. In this way, you need to calculate the width of each column by yourself. To make each column automatically fill the Grid, you only need forceFit in viewConfig. After forceFit is used, the Grid will be allocated proportionally according to the width you set in cm, which is very intelligent. The implementation code is as follows:Copy codeThe Code is as follows: var grid = new Ext. grid. GridPanel ({
RenderTo: "grid ",
StripeRows: true, // zebra Effect
LoadMask: true,
Store: ds,
Height: 600,
Cm: cm,
ViewConfig :{
ForceFit: true
}
});
3. We can also consider autoExpandColumn, which can automatically extend the width of the specified column to fill the entire table. The Code is as follows:Copy codeThe Code is as follows: var grid = new Ext. grid. GridPanel ({
RenderTo: "grid ",
StripeRows: true, // zebra Effect
LoadMask: true,
Store: ds,
Height: 600,
Cm: cm,
AutoExpandColumn: 'dest'
// ViewConfig :{
// ForceFit: true
//}
});
Note: autoExpandColum can only specify the id of one column. Note that it must be an id. In the original cm, no id exists. To use autoExpandColumn, you need to set the id for the desn of cm. therefore, the desn can be automatically extended during rendering; otherwise, an error occurs.Copy codeThe Code is as follows: var cm = new Ext. grid. ColumnModel ([
{Header: 'number', dataIndex: 'id', width: 60 },
{Header: 'name', dataIndex: 'name', width: 180 },
{Id: 'dest', header: 'description', dataIndex: 'dest', width: 200}
]);
3.3 make Grid support column-based sorting
The sorting function can be easily implemented in EXT. You only need to add the sortable attribute when defining the column model, as shown in the following code:Copy codeThe Code is as follows: var cm = new Ext. grid. ColumnModel ([
{Header: 'number', dataIndex: 'id', width: 60, sortable: true },
{Header: 'name', dataIndex: 'name', width: 180 },
{Id: 'dest', header: 'description', dataIndex: 'dest', width: 200}
]);
3.
Figure 3 sorting by Column
3.4 Display time type data
Although the returned JSON is a number and string, we can also obtain date data from the background in EXT, and then submit it to Grid for formatting.
1. First define a group of data. The last column is data in date format.Copy codeThe Code is as follows: var data = [
['1', 'name1', 'dest1', '2017-09-17T02: 58: 04 '],
['2', 'name2', 'describe1', '2017-09-17T02: 58: 04 '],
['3', 'name3', 'dest1', '2017-09-17T02: 58: 04 '],
['4', 'name4', 'describe1', '2017-09-17T02: 58: 04 '],
['5', 'name5', 'dest1', '2017-09-17T02: 58: 04 ']
];
2. Then we add a line of configuration in reader. In addition to setting the name, we also set the type and dateFormat attributes. The Code is as follows:Copy codeThe Code is as follows: var store1 = new Ext. data. Store ({
Proxy: new Ext. data. MemoryProxy (data ),
Reader: new Ext. data. ArrayReader ({},[
{Name: 'id '},
{Name: 'name '},
{Name: 'dest '},
{Name: 'date', type: 'date', dateFormat: 'Y-m-dTH: I: s '}
])
});
3. Similarly, we also need to add a line of configuration in cm:Copy codeThe Code is as follows: var cm = new Ext. grid. ColumnModel ([
{Header: 'number', dataIndex: 'id', width: 60, sortable: true },
{Header: 'name', dataIndex: 'name', width: 180 },
{Id: 'dest', header: 'description', dataIndex: 'dest', width: 200 },
{Header: 'time', dataIndex: 'date', type: 'date', renderer: Ext. util. Format. dateRenderer ('y, m, dday ')}
]);
4. The Code details are as follows, and 4 is shown.Copy codeThe Code is as follows: <Head id = "Head1" runat = "server">
<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: 'name', dataIndex: 'name', width: 180 },
{Id: 'dest', header: 'description', dataIndex: 'dest', width: 200 },
{Header: 'time', dataIndex: 'date', type: 'date', renderer: Ext. util. Format. dateRenderer ('y, m, dday ')}
]);
Var data = [
['1', 'name1', 'dest1', '2017-09-17T02: 58: 04 '],
['2', 'name2', 'describe1', '2017-09-17T02: 58: 04 '],
['3', 'name3', 'dest1', '2017-09-17T02: 58: 04 '],
['4', 'name4', 'describe1', '2017-09-17T02: 58: 04 '],
['5', 'name5', 'dest1', '2017-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: 'dest '},
{Name: 'date', type: 'date', dateFormat: 'Y-m-dTH: I: s '}
])
});
Store1.load ();
Var grid1 = new Ext. grid. GridPanel ({
RenderTo: "grid1 ",
StripeRows: true, // zebra Effect
LoadMask: true,
Store: store1,
Height: 200,
Cm: cm,
ViewConfig :{
ForceFit: true
}
});
});
// --> </Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div id = "grid1">
</Div>
</Form>
</Body>
</Html>
Figure 4 Grid with time data
3.5 automatically display row numbers and check boxes
In fact, both the row number and the check box are extensions of the renderer. Of course, the checkbox function is much more complex.
1. automatically display the row number: Modify the column Model cm and add the RowNumberer object;
2. Check box: Create a CheckboxSelectionModel ()
3. The detailed code is as follows, as shown in Figure 5.Copy codeThe Code is 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: 'name', dataIndex: 'name', width: 180 },
{Id: 'dest', header: 'description', dataIndex: 'dest', width: 200 },
{Header: 'time', dataIndex: 'date', type: 'date', renderer: Ext. util. Format. dateRenderer ('y, m, dday ')}
]);
Figure 5 automatic row number and check box
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
