Ext. Grid

First, a table should have a column definition, that is, defining the table header columnmodel:
// Define a columnmodel with four columns in the header
VaR CM = new Ext. Grid. columnmodel ([
{Header: 'number', dataindex: 'id '},
{Header: 'gender', dataindex: 'sex '},
{Header: 'name', dataindex: 'name '},
{Header: 'description', dataindex: 'desc '}
]);
Cm. defaultsortable = true;
This columnmodel defines the four columns of the table, the names of each column and the corresponding data key. Pay attention to the defaultsortable attribute, that is, the sorting function is attached to each column. If you only want some examples to have this function, you can set:
{Header: 'number', dataindex: 'id', sortable: true },

Now let's take a look at how Ext. Data. Store converts three types of data.

1. Two-dimensional array:
// Arraydata
VaR DATA = [
['1', 'male', 'name1', 'desc1'],
['2', 'male', 'name1', 'scn2 '],
['3', 'male', 'name3', 'desc3'],
['4', 'male', 'name4', 'scn4 '],
['5', 'male', 'name5', 'desc5']
];
// Arrayreader
VaR DS = new Ext. Data. Store ({
Proxy: New Ext. Data. memoryproxy (data ),
Reader: New Ext. Data. arrayreader ({},[
{Name: 'id', mapping: 0 },
{Name: 'sex', mapping: 1 },
{Name: 'name', mapping: 2 },
{Name: 'desc', mapping: 3}
])
});
DS. Load ();
DS must correspond to two parts: proxy and reader. Proxy tells us where to get the data, and reader tells us how to parse the data.
Now we use Ext. Data. memoryproxy, which transmits data in the memory as a parameter. Ext. data. arrayreader is used to parse arrays and tells us that it will be parsed according to the defined specifications. Each row reads four pieces of data in order. The first is ID, the second is sex, and the third is name, the fourth descn. These correspond to the dataindex In the CM definition. In this way, CM will know which column should display the data.
The mapping attribute is used to mark the ing between the read data and the header in the data. You do not need to set this attribute. However, if you want to display the name column in the sex data, you can set the mapping value. That is, the ID mapping is 2, and the latter is 0.
Remember to execute Ds. Load () once to initialize the data.

The data display is very simple:
HTML file:
<Div id = 'grid'> </div>
JS file:
VaR grid = new Ext. Grid. gridpanel ({
El: 'grid ',
DS: ds,
CM: cm
});
Grid. Render ();

The result is as follows:

 

2. How to add a checkbox to a table?

VaR Sm = new Ext. Grid. checkboxselectionmodel ();
VaR CM = new Ext. Grid. columnmodel ([
New Ext. Grid. rownumberer (), // automatic row number
SM, // Add a place
{Header: 'number', dataindex: 'id '},
{Header: 'gender', dataindex: 'sex '},
{Header: 'name', dataindex: 'name '},
{Header: 'description', dataindex: 'desc '}
]);

VaR grid = new Ext. Grid. gridpanel ({
El: 'grid3 ',
DS: ds,
CM: cm,
SM: Sm, // place to add
Title: 'helloworld'
});

 

3. How to trigger events on the grid?
Below is a cellclick event
Grid. addlistener ('cellclick', cellclick );
Function cellclick (grid, rowindex, columnindex, e ){
VaR record = grid. getstore (). getat (rowindex); // get the record
VaR fieldname = grid. getcolumnmodel (). getdataindex (columnindex); // get field name
VaR DATA = record. Get (fieldname );
Ext. MessageBox. Alert ('show', 'currently selected data is '+ data );
}

4. How to make quick menu effects in Grid:
Grid. addlistener ('rowcontextmenu ', rightclickfn); // key part of the context menu code
VaR rightclick = new Ext. Menu. menu ({
ID: 'rightclickcont', // The HTML file must contain a rightclickcont Div element.
Items :[
{
ID: 'rmenu1 ',
Handler: rmenu1fn, // event triggered after clicking
Text: 'right-click menu 1'
},
{
// ID: 'rmenu2 ',
// Handler: rmenu2fn,
Text: 'right-click menu 2'
}
]
});
Function rightclickfn (grid, rowindex, e ){
E. preventdefault ();
Rightclick. showat (E. getxy ());
}
Function rmenu1fn (){
Ext. MessageBox. Alert ('right', 'rightclick ');
}
Its grid is as follows:

 

5. How can I change the data in a column as required?
For example, the gender field changes the color of the display according to its male or female, which is designed in columnmode:
VaR CM = new Ext. Grid. columnmodel ([
New Ext. Grid. rownumberer (),
SM,
{Header: 'number', dataindex: 'id '},
{Header: 'gender', dataindex: 'sex', Renderer: changesex },
{Header: 'name', dataindex: 'name '},
{Header: 'description', dataindex: 'desc '}
]);
Cm. defaultsortable = true;

Function changesex (value ){
If (value = 'male '){
Return "<span style = 'color: red; font-weight: bold; '> male </span> ";
} Else {
Return "<span style = 'color: green; font-weight: bold; '> green female </span> ";
}
}

The grid display of the other two types of data is the same. The difference lies in the data acquisition process:
6. JSON data
For this type of data, please read Ajax books:
// Jsondata
VaR DATA = {
'Coders ':[
{'Id': '1', 'sex': 'male', 'name': 'mclaughlin', 'desc': 'brett @ newinstance.com '},
{'Id': '2', 'sex': 'male', 'name': 'hunter ', 'desc': 'jason @ servlets.com '},
{'Id': '3', 'sex': 'female ', 'name': 'harold', 'desc': 'elharo @ macfaq.com '},
{'Id': '4', 'sex': 'male', 'name': 'harolds ', 'desc': 'elhaross @ macfaq.com '}
],
'Musicians ':[
{'Id': '1', 'name': 'clapton ', 'desc': 'guitar '},
{'Id': '2', 'name': 'invalid maninoff', 'desc': 'piano '}
]
}
// Memoryproxy object and jsonreader object used by DS
VaR DS = new Ext. Data. Store ({
Proxy: New Ext. Data. memoryproxy (data ),
Reader: New Ext. Data. jsonreader ({root: 'coders '},[
{Name: 'id '},
{Name: 'sex '},
{Name: 'name '},
{Name: 'desc '}
])
});
DS. Load ();

VaR grid = new Ext. Grid. gridpanel ({
El: 'grid3 ',
DS: ds,
CM: cm,
SM: Sm,
Title: 'helloworld ',
Autoheight: True // be sure to write; otherwise, one row of data is displayed.
});
Grid. Render ();

7. Use XML data:
Note that XML Data Reading must be performed on the server.
Content of XML data test. xml:
<? XML version = "1.0" encoding = "UTF-8"?>
<Dataset>
<Results> 2 </Results>
<Item>
<ID> 1 </ID>
<Sex> male </sex>
<Name> Taylor </Name>
<Descn> coder </descn>
</Item>
</Dataset> var DS3 = new Ext. Data. Store ({
URL: 'test. xml', // XML data
Reader: New Ext. Data. xmlreader ({record: 'item'}, [// use xmlreader object
{Name: 'id '},
{Name: 'sex '},
{Name: 'name '},
{Name: 'desc '}
])
});

8. Get data and data paging controls from the server
The two-dimensional array, JSON, or XML data obtained from a server file, such as ASP, JSP, or servlet, can also be read by ext and displayed by grid:
Server File data. asp:
<%
Start = CINT (Request ("START "))
Limit = CINT (Request ("Limit "))

Dim JSON
JSON = CSTR ("{totalproperty: 100, root :[")

For I = start to limit + start-1
JSON = JSON + CSTR ("{'id': '") + CSTR (I) + CSTR ("', 'name': 'name") + CSTR (I) + CSTR ("', 'desc': 'desc') + CSTR (I) + CSTR ("'}")
If I <> Limit + start-1 then
JSON = JSON + ","
End if
Next
JSON = JSON + "]}"
Response. Write (JSON)
%>

We can see that this page will return different data based on the input start and limit, in essence it is a paging code. The following is the JSON data of START = 0 and limit = 10:
{Totalproperty: 100, root: [{'id': '0', 'name': 'name0', 'desc': 'desc0'}, {'id ': '1', 'name': 'name1', 'desc': 'desc1'}, {'id': '2', 'name': 'name2 ', 'desc': 'desc2'}, {'id': '3', 'name': 'name3', 'desc3': 'desc3'}, {'id ': '4', 'name': 'name4', 'desc': 'scn4 '}, {'id': '5', 'name': 'name5 ', 'desc': 'desc5'}, {'id': '6', 'name': 'name6', 'desc': 'desc6'}, {'id ': '7', 'name': 'name7', 'desc': 'desc7'}, {'id': '8', 'name': 'name8 ', 'desc': 'desc8'}, {'id': '9', 'name': 'name9', 'desc': 'scount'}]}

We use the paging control to control grid data:
Ext. onready (function (){
VaR Sm = new Ext. Grid. checkboxselectionmodel ();

VaR CM = new Ext. Grid. columnmodel ([
New Ext. Grid. rownumberer (),
SM,
{Header: 'number', dataindex: 'id '},
{Header: 'gender', dataindex: 'sex '},
{Header: 'name', dataindex: 'name '},
{Header: 'description', dataindex: 'desc '}
]);
Cm. defaultsortable = true;

VaR DS = new Ext. Data. Store ({
Proxy: New Ext. Data. httpproxy ({URL: 'Data. asp '}),
Reader: New Ext. Data. jsonreader ({
Totalproperty: 'totalproperties ',
Root: 'root'
},[
{Name: 'id '},
{Name: 'name '},
{Name: 'desc '}
])
});
DS. Load ({Params: {start: 0, limit: 10 }});

VaR grid = new Ext. Grid. gridpanel ({
El: 'grid3 ',
DS: ds,
CM: cm,
SM: Sm,
Title: 'asp-> json ',
Bbar: New Ext. pagingtoolbar ({
Pagesize: 10,
Store: ds,
Displayinfo: True,
Displaymsg: 'display records from {0} to {1}, total records from {2 ',
Emptymsg: "No record"
}),
Tbar: New Ext. pagingtoolbar ({
Pagesize: 10,
Store: ds,
Displayinfo: True,
Displaymsg: 'display records from {0} to {1}, total records from {2 ',
Emptymsg: "No record"
})
});
Grid. Render ();
})

 

9. How can I add a button above the grid?
The key to adding a button is to set the toolbar for the tbar or bbar attribute:
VaR grid = new Ext. Grid. gridpanel ({
El: 'grid3 ',
DS: ds,
CM: cm,
SM: Sm,
Title: 'helloworld ',
Tbar: New Ext. toolbar ({
Items :[
{
ID: 'buttona'
, Text: "button"
, Handler: function () {alert ("You clicked button ");}
}
,
New Ext. toolbar. splitbutton ({})
,{
ID: 'buttonb'
, Text: "button B"
, Handler: function () {alert ("You clicked button B ");}
}
,
'-'
,{
ID: 'buttonc'
, Text: "button C"
}
]
})
});

10. Add gridpanel to a panel or tabpanel.
VaR tabs = new Ext. tabpanel ({
Collapsible: True
, Renderto: 'product-exception'
, Width: 450
, Height: 400
, Activetab: 0
, Items :[
{
Title: 'unmatched'
},{
Title: 'matched'
}
]
});
Tabs. dolayout ();

VaR Panel = new Ext. Panel ({
Renderto: 'panel ',
Title: 'panel ',
Collapsible: True,
Width: 450,
Height: 400,
Items: [grid] // manage the grid
});

The Panel must have a div. Its components are managed by items.