ZP's ExtJS study notes (iii)--development of the Mailbox Function (Button event, dropdown box, paging, record small icon, entire data format processing, timed refresh, record check Delete, group)

As usual, paste first:

I am more satisfied, a short time to develop the mailbox function, which is the Inbox, there are matching Outbox and delete boxes.

Simple idea:

1, configuration model, store, with the MVC model, can refer to the first study notes.

2. Simple layout of the page:

Ext.define (' KitchenSink.view.mail.InBox ', {extend:' Ext.grid.Panel ', alias:' Widget.inbox ', Xtype:' Inbox ', Autoheight:true, Bodystyle:' width:100% ', Autowidth:true, requires:[' KitchenSink.store.mail.InBoxStore ',], InitComponent:function() {instore= Ext.create (' KitchenSink.store.mail.InBoxStore ', {});//Instantiate store         This. store =instore;  This. Store.load ();  This. Columns =[{header:Topic, Dataindex:' Theme ', Width:' 25% ', Flex:1},{Header:' Reading status ', Dataindex:' Readflag ', Width:' 15% ',},{header:' Message type ', Dataindex:' MessageType ', Width:' 15% '},{Header:' Sender ', Dataindex:' Sender ', Width:‘15%},{Header:' Send Time ', Dataindex:' Sendtime ', Width:' 25% '                }];    This.callparent (arguments);        }      }); 

3, adjust the details, add function.

In this I say a variety of details of the implementation of functions, most of the functions implemented in the initcomponent, according to personal needs can also be written on the outside.

A. New/Refresh button

Added in InitComponent:

 This. Dockeditems =[{xtype:' Toolbar ', items: [{//Implementing the New buttonIconcls: ' Icon-add ', Text:New, Scope: This, Action:' Add '//This is a must, give the Controller}, {iconcls:' Icon-fresh ', Text:Refresh, Action:' Fresh ', Scope: This, Handler:function(BTN, pressed) {btn.up (' Panel '). Store.reload ();                }            }]

The newly created event is handled here, handled by the Controller, and implemented in a specific location, as in my case, add: Action: ' Add '.

B. Drop-down box:

{//Implement the drop-down boxFieldlabel: '    is read ', Labelwidth:70, Width:180, ID:' Ifread ', Name:' Ifread ', Allowblank:false, Xtype:' Combo ', Editable:false, Mode:' Local ', TriggerAction:' All ', Store: [[1, ' Show All '],[2, ' unread '], [3, ' read ']], value:1, listeners:{//Listen for drop-down box eventsSelect:function() {                          varreadtag= ext.getcmp ("Ifread"). GetValue (); Instore.load ({Params:{ifread:readtag}});//set the store parameter to read the store                     }                 }                

C. Paging:

{// Implement paging            xtype: ' Pagingtoolbar ',            Store:instore,            dock:' Bottom ',            DisplayInfo:true,            ' show {0} bar to {1} ' records, total {2} bar '                ,' no data '        } 

D. Small icons for mail and attachments:

 This. columns = [{//Implementing IconsHeader: ", Dataindex:' Attachflag ', Width:' 3% ', renderer:function(Val, Cellmeta, Record, RowIndex, ColumnIndex, store) {//Set Unread Colors                       if(' 1 ' = =val) {                        return"<div align= ' left ' > </div> "; }Else return"<div align= ' left ' ></div>"; }                 }]

Added in column, Attachtag is a sign of whether or not an attachment came after the background processing.

Similarly, for a column, the processing of a piece of data, simply add renderer:function in the column, the Dataindex return value to process the HTML code returned to the page.

E. Processing of the entire data format:

Viewconfig: {// to set the line special format        enabletextselection: ' True ',        getrowclass:  function(record, index, Rowparams, store) {            if(Record.get (' readflag ') = = "Unread")                 return"Row-s";             Else return "Row-f";        }    ,

Where Row-s and row-f are pre-defined CSS, determine the data in the record and return the required format.

F. Timed refresh:

SetInterval (function() {//  timed refresh                    instore.reload ();               1000*60);  // every 1 minutes

Added to the initcomponent.

G.record Check Delete:

{//Implementing a check DeleteXtype: ' button ', Text:Delete, Iconcls:' Icon-delete ', Scope: This, Handler:function(btn,pressed) {varSM = btn.up (' panel '). Getselectionmodel (); if(Sm.hasselection ()) {Ext.Msg.confirm ("Warning", "Are you sure you want to delete it?" (OK to move the message into the deleted mail box),function(Button) {if(Button = = "Yes") {                                varSelected =sm.getselection (); varIds = [];//the ID to deleteExt.each (selected,function{Ids.push (item) {Item.get (' MessageId ')); })                                    //alert (Ids);Ext.Ajax.request ({URL:‘.. /mail/deletemessages.dhtml ', params: {Ids:Ext.encode (IDS) }, Method:' POST ', timeout:2000, Success:function(response, opts) {Ext.MessageBox.hide (); if(Response.responsetext) {instore.load (); Ext.Msg.alert (' System prompt ', ' delete successful '); } Else{Ext.Msg.alert ("System Prompt", ' delete failed '); }}, Failure:function() {Ext.Msg.alert (' System prompt ', ' system error! ‘);                            }                                });                    }                        }); }                    Else{Ext.Msg.alert ("Error", "No Line is selected, no delete operation!" "); }                }            }

Before you define the check mode in InitComponent:

var selmodel = ext.create (' Ext.selection.CheckboxModel ', {checkonly:true }); // implementation Check this. Selmodel = Selmodel;

Checkonly is true to limit the click of a selection box to mark, otherwise you can click anywhere on the record, but it will affect multiple items selected.

H. Grouping:

this. features = [{// implement group            ID: ' Group ',            ' grouping ',            ' < Font color=blue>{name}</font> (total: {rows.length} messages) '            ,true,             false         }];

Set in InitComponent before you need to set it in the store definition:groupfield: ' GroupName '.

The implementation of these small functions are I in the development of the collection, I hope to help everyone.

ZP's ExtJS study notes (iii)--development of the Mailbox Function (Button event, dropdown box, paging, record small icon, entire data format processing, timed refresh, record check Delete, group)