FineUI Grid 컨트롤 기반 오른쪽 단추 메뉴 추가

FineUI 공식 데모 에 서 는 Grid 오른쪽 단추 메뉴 가 구현 되 지 않 았 는데,사실 4.1.x 버 전부터 사용자 정의 이벤트 감청(Listeners)을 추가 할 수 있 기 때문에 이 기능 을 구현 하 는 것 은 상당히 쉽다.
ExtJs 오른쪽 키 메뉴 는 여러 가지 가 있 습 니 다.Grid 컨트롤 에 있어 서 저 는 두 가지 실현 만 간단하게 설명 합 니 다.표 의 데이터 줄 에서 오른쪽 단 추 를 눌 렀 을 때 팝 업 되 는 메뉴 와 빈 위치 에서 오른쪽 단 추 를 눌 렀 을 때 팝 업 되 는 메뉴 입 니 다.
시간 이 제한 되 어 있 으 니 쓸데없는 말 은 그만 하고 두 개의 효과 도 를 먼저 보 자.환경 FineUI 4.1.6,.NET 4.0 구현 컨트롤 의 ID 를 지정 해 야 하기 때 문)
1.데이터 줄 오른쪽 단추 메뉴

2.빈 칸 에서 메뉴 를 우 클릭

실현 방법:
STEP 1:Grid 컨트롤 추가...긴 말 하지 않다
두 번 째 단계:Grid 컨트롤 뒤에 두 개의 Menu 컨트롤 을 추가 합 니 다.각각 실행 할 두 개의 오른쪽 키 메뉴 에 대응 합 니 다.clientIDMode 를 static 로 지정 하고 Hidden 을 true 로 지정 합 니 다. 

<f:Menu ID="containerMenu" runat="server" ClientIDMode="Static" Hidden="true">
 <f:MenuButton Icon="Add" Text="  " OnClick="OnAddClick"></f:MenuButton>
 <f:MenuSeparator />
 <f:MenuButton Icon="Reload" Text="  "></f:MenuButton>
 </f:Menu>
 <f:Menu ID="itemMenu" runat="server" ClientIDMode="Static" Hidden="true">
 <f:MenuButton Icon="Pencil" Text="  " OnClick="OnEditClick"></f:MenuButton>
 <f:MenuButton Icon="Delete" Text="  "></f:MenuButton>
 <f:MenuSeparator />
 <f:MenuButton Icon="Reload" Text="  "></f:MenuButton>
 </f:Menu>

세 번 째 단계:Grid 에 이벤트"container contextmenu","itemcontextmenu"이벤트 감청 추가

 <f:Grid ID="Grid1" runat="server" Title="FineUI Grid    Demo" CssStyle="margin: 10px;" AllowPaging="true" PageSize="20"
 EnableHeaderMenu="false" EnableColumnLines="true" DataKeyNames="ID" >
 <Columns>
 .....  
 </Columns>
 <Listeners>
 <f:Listener Event="containercontextmenu" Handler="function (grid, e, eOpts) { e.stopEvent(); F('containerMenu').showAt(e.getXY()); }" />
 <f:Listener Event="itemcontextmenu" Handler="function (grid, record, item, index, e, eOpts) { e.stopEvent(); F('itemMenu').showAt(e.getXY()); }" />
 </Listeners>
 </f:Grid> 

이 두 사건 은 ExtJs 의 GridPanel 컨트롤 에 속 합 니 다.매개 변 수 는 다음 과 같 습 니 다.
container contextmenu:grid:표 대상,e:이벤트 대상,eOpts:이벤트 대상 파라미터;
itemcontextmenu:grid:표 대상,record:선택 한 줄 쌍 상(record.rawdata 속성 을 통 해 선택 한 줄 의 모든 데 이 터 를 얻 을 수 있 습 니 다),item:html 요소 대상,index:줄 색인,e:이벤트 대상,eOpts:이벤트 대상 매개 변수;
다른 궁금 한 점 이 있 으 면 ExtJs 의 Api dochttp://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.Panel를 뒤 져 보 세 요.
일반적인 상황 에서 위의 코드 를 그대로 베 끼 면 Ok 입 니 다.이벤트 처리 함수 에 대해 더 많은 요 구 를 하지 않 는 한.
STEP 4:메뉴 기능 구현.정상 적 인 방법 으로 메뉴 버튼 을 연결 하 는 이벤트 만 있 으 면 됩 니 다.특별히 설명 할 것 이 없습니다.
두 번 째 코드 에 서 는 서버 온 클릭 이벤트 바 인 딩 을 추가 하고 수정 단 추 를 추가 한 것 을 볼 수 있 습 니 다.다음은 배경 코드 의 실현 을 살 펴 보 겠 습 니 다.

 protected void OnAddClick(object sender, EventArgs e)
 {
 FineUI.Alert.Show("Add Click!", FineUI.MessageBoxIcon.Information);
 }
 protected void OnEditClick(object sender, EventArgs e)
 {
 var selectedrow = Grid1.Rows[Grid1.SelectedRowIndex].DataKeys[0].ToString();
 FineUI.Alert.Show(string.Format("  ID {0}   ", selectedrow), FineUI.MessageBoxIcon.Warning);
 }

FineUI Grid 컨트롤 을 사용 하여 페이지 기능 을 추가 한 다음 전체 페이지 를 높이 채 우 는 방법 입 니 다.구체 적 으로 아래 의 문자 설명 과 코드 분석 을 보십시오.
      FineUI 컨트롤 을 사용 하 는 모든 페이지 에는 f:PageManager 컨트롤 이 있 습 니 다.속성:AutoSizePanelID,채 워 야 할 컨트롤 ID 를 설정 합 니 다.demo 를 통 해 알 수 있 듯 이 정상 적 인 상황 에서 용기 Panel 을 하나 더 놓 으 면 전체 페이지 를 채 울 수 있 습 니 다.

<f:PageManager ID="PageManager1" runat="server" AutoSizePanelID="ResultSetGrid" />
<f:Grid ID="ResultSetGrid" runat="server" EnableCheckBoxSelect="true" Title="" DataKeyNames="ID"
 ShowBorder="false"
 PageSize="3"
 AllowPaging="true"
 IsDatabasePaging="true"
 OnPageIndexChange="ResultSetGrid_PageIndexChange"
 OnSort="ResultSetGrid_Sort"
 AllowSorting="true"
 SortField="ID">
 <Toolbars>
 <f:Toolbar ID="ResultSetGrid_Toolbar" runat="server">
  <Items>
  <f:Button ID="btnAdd" runat="server" Text="  " OnClientClick="Add();" EnablePostBack="false" Icon="ApplicationAdd"></f:Button>
  <f:Button ID="btnEdit" runat="server" Text="  " EnableAjax="true" OnClick="btnEdit_Click" Icon="ApplicationEdit"></f:Button>
  <f:Button ID="btnDelete" runat="server" Text="  " OnClick="btnDelete_Click" Icon="ApplicationDelete"></f:Button>
  <f:Button ID="btnImport" runat="server" OnClientClick="Import();" Text="    " Icon="ApplicationLink"></f:Button>
  <f:Button ID="btnSelf" runat="server" OnClientClick="Filter();" Text="     " Icon="ApplicationKey"></f:Button>
  </Items>
 </f:Toolbar>
 </Toolbars>
 <Columns>
 <f:RowNumberField EnablePagingNumber="true" />
 </Columns>
 </f:Grid>

위 내용 은 FineUI Grid 컨트롤 을 기반 으로 오른쪽 키 메뉴 를 추가 하 는 모든 설명 입 니 다.도움 이 되 셨 으 면 합 니 다.