Asp.net-fineui Development Practice-9 (Thu)

Now is a problem, in the development of the table is dynamic, is the standard board is all the field list, the customer to list their own needs according to the situation, in addition to the operation of the page at the same time if you can use the function of the foreground to save directly to the backstage, now the column display and hide is not postback.

1.FineUI quoted ExtJS is Ext-part1.js, this does not say, the previous cut off the diagram, the file is compressed, the parameters are also easy to see, in fact, this is ext-all.js,Ext-all where to come, is the official example of ExtJS under the, down is also compressed, next to a non-compressed,Ext-all-debug.js, you can look at it, I see it directly is equal to seeExt-part1.js, I'm going to find the class that generates the grid header, searchExt.grid. A look to see there is ext.grid.header,header is the meaning of the head, and then find here, find Getcolumnmenu, well, literally can see the column menu, how to determine, see a property is Checkhandler The choice is the choice of events, the trigger is Oncolumncheckchange,

1. Oncolumncheckchange:function (Checkitem, checked) {var header =ext.getcmp (Checkitem.headerid); header[checked? ' Show ': ' Hide '] ();},

   　　

See Show,hide, Show and hide the meaning. Further testing to findExt-part1.js underOncolumncheckchange, change it, add an alert (' 1 '), save, refresh, when I tick the column to hide and show the popup 1, trigger success, is to change it. 2. Location found is changed, direct changeext-part1.js? ThatExt-part2 loses its meaning,Ext-part2 is what, Fineui himself rewritten to replace a lot of methods, but also added a lot of methods to facilitate the interaction or fix bugs, I directly foundExt.grid.Panel, just follow this rewrite and see

2. if (Ext.grid.Panel) {ext.override (ext.grid.panel,{

   　　

Under analysis, if it isExt.grid.Panel is a reference toExt.grid.Panel class,Override Search API is overwrite rewrite meaning, that good, directly rewriteOncolumncheckchange,the column above the Oncolumncheckchange isExt.grid.header.Container, then write on Ext.gird.Panel:

1. if (Ext.grid.header.Container) {ext.override (Ext.grid.header.container,{oncolumncheckchange:function (Checkitem, Checked) {var header =ext.getcmp (Checkitem.headerid); header[checked? ' Show ': ' Hide '] (); F.customevent ("Trigger background operation");}});

   　　

and use of customevent, I do not write the function is Alert.show (), compile, save, refresh, successfully trigger the background method. 3. Dry triggered no parameters I save what, see received two parameters, Checkitem and checkd, meaning is the item and select State,Checkitem can be determined to be the choice of the item, he has what attributes, or findExt-all-debug.js under this method,

1. for (; i < Itemsln; i++) {item = Items[i];menuitem =newext.menu.checkitem ({text:item.text,checked:!item.hidden, Hideonclick:false,headerid:item.id,menu:item.isgroupheader This.getcolumnmenu (item): Undefined,checkHandler: This.oncolumncheckchange,scope:this});

   　　

The first loop item is the total number of column headers in a loop, one to create a menu selection element, and then a property, thatthe Checkitem property isMenuItem Properties, then there are

1. if (Ext.grid.header.Container) {ext.override (Ext.grid.header.container,{oncolumncheckchange:function (Checkitem, Checked) {var header =ext.getcmp (Checkitem.headerid); header[checked? ' Show ': ' Hide '] (); F.customevent ("Trigger background operation to save the column hidden display state, column name:" +checkitem.text+ "column ID:" +checkitem.headerid+ "Select State:" +checked);}});}

   　　

in the test, trigger the background method, the output is expected. Changed theExt-part2.js will be saved well, if the project is used, the upgrade is not covered by the time, but also to introduce themselves to modify and add the properties of the Fineui control, as if previously mentioned in theAsp.net-fineui Development Practice-6 (c) 7, processedTriggerbox The carriage return trigger, how to find is to go to the definition to find Fineui project files and then search on it, not particularly used, can be combinedExt-part2.js again to make some improvements, it is not discussed in detail.

Asp.net-fineui Development Practice-9 (Thu)