Coolite 의 프론트 데스크 톱 에서 GridPanel 의 현재 줄 값 을 선택 한 코드 를 가 져 옵 니 다.

주요 목적 a.GridPanel 현재 줄 의 필드 값 을 가 져 오 는 방법 b.프론트 데 이 터 를 백 엔 드 에 전달 하 는 방법 을 파악 하고 백 엔 드 작업 결 과 를 프론트 데스크 로 되 돌려 줍 니 다 c.button 과 textField 컨트롤 의 텍스트 값 주요 내용 a.우 리 는 먼저 페이지 에 세 개의 ext 구성 요 소 를 추가 합 니 다:store,menu.gridpanel b.gridpanel 의 contextmenuID 를 menu 컨트롤 의 ID 로 설정 하여 GridPanel 에 오른쪽 키 메뉴 를 추가 합 니 다

 
<ext:Store ID="Store1" runat="server" 
onbeforestorechanged="Store1_BeforeStoreChanged" > 
<Reader> 
<ext:JsonReader ReaderID="id" > 
<Fields > 
<ext:RecordField Name="id" Type="Int"></ext:RecordField> 
<ext:RecordField Name="uid" Type="String"></ext:RecordField> 
<ext:RecordField Name="uname" Type="String"></ext:RecordField> 
<ext:RecordField Name="uage" Type="Int"></ext:RecordField> 
</Fields> 
</ext:JsonReader> 
</Reader> 
</ext:Store> 

이곳 의 ReaderID 를 설정 하지 않 고 설정 하면 GridPanel 1.getSelectionModel().getSelected().id 를 사용 하여 이 줄 의 id 필드 에 대응 하 는 값 을 가 져 올 수 있 습 니 다.이 방법 을 사용 하 는 전 제 는 GridPanel 에서 선택 방식 을 줄 선택 모드 로 설정 하고 코드 는 뒤에 붙 입 니 다.Name 데이터베이스 시트 의 필드 이름 에 대응 합 니 다

 
<ext:Menu ID="Menu1" runat="server"> 
<Items> 
<ext:MenuItem ID="MenuItem1" runat="server" Text="      "> 
<Listeners> 
<Click Fn="ShowUserInfo" /> 
</Listeners> 
</ext:MenuItem> 
<ext:MenuItem ID="MenuItem2" runat="server" Text="      "> 
<Listeners> 
<Click Fn="ShowUserInfo" /> 
</Listeners> 
</ext:MenuItem> 
<ext:MenuItem ID="MenuItem3" runat="server" Text="      "> 
<Listeners> 
<Click Fn="ShowUserInfo" /> 
</Listeners> 
</ext:MenuItem> 
<ext:MenuItem ID="MenuItem4" runat="server" Text="      "> 
<Listeners> 
<Click Fn="DeleteUserInfo" /> 
</Listeners> 
</ext:MenuItem> 
</Items> 
</ext:Menu> 

효 과 는 다음 과 같다.value 그 다음 에 이 스 크 립 트 의 Selection Model 노드 는 Row Selection Model d 를 사용 해 야 합 니 다.프론트 데스크 톱 extjs 스 크 립 트 는 다음 과 같 습 니 다

 
<ext:GridPanel ID="GridPanel1" runat="server" ContextMenuID="Menu1" AutoHeight="true" Width="400px" 
AutoDataBind="true" StoreID="Store1"> 

<ColumnModel ID="ctl10"> 
<Columns> 
<ext:Column DataIndex="id" Header="    "> 
<PrepareCommand Args="grid, record, rowIndex, columnIndex, value" /> 
</ext:Column> 
<ext:Column DataIndex="uid" Header="   "> 
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> 
</ext:Column> 
<ext:Column DataIndex="uname" Header="    "> 
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> 
</ext:Column> 
<ext:Column DataIndex="uage" Header="    "> 
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> 
</ext:Column> 
</Columns> 
</ColumnModel> 
<SelectionModel> 
<ext:RowSelectionModel runat="server" ID="ctl09"></ext:RowSelectionModel> 
</SelectionModel> 
<LoadMask ShowMask="true" Msg="      ..." /> 
<Listeners> 
<CellClick Fn="ShowUserInfo" /> 
</Listeners> 
</ext:GridPanel> 

이 스 크 립 트 에 대해 한 가지 설명 할 것 은 openUser InfoWindow 방법 을 사용 하 는 것 입 니 다.이 방법 은 사용자 컨트롤 페이지 에서 정 의 된 것 입 니 다.이 페이지 에서 이 컨트롤 을 사용 한 후에 이 방법 을 사용 할 수 있 습 니 다.공간 페이지 원본 코드 는 다음 과 같 습 니 다.한 가지 설명:<%=ctrID.clientID>사용자 가 서버 엔 드 구성 요소 대상 을 가 져 옵 니 다

 
function ShowUserInfo(menu, e) { 
var id = GridPanel1.getSelectionModel().getSelected().id;//    id   jsonreader    readerID      
var record = GridPanel1.getSelectionModel().getSelected(); //           ，              

//       
if (menu.id == 'MenuItem1') { 
openUserInfoWindow(record, 0); //  objectInfo.ascx       
} 
//     
else if (menu.id == 'MenuItem2') { 
openUserInfoWindow(record, 1); 
} 
//     
else if (menu.id == 'MenuItem3') { 
openUserInfoWindow(record, 2); 
} 
else { 

} 
} 

사용자 의 코드 를 삭제 하 는 것 은 다음 과 같 습 니 다

 
function openUserInfoWindow(record,id) { 
<%= Button2.ClientID %>.hide(null); 
<%= txtID.ClientID %>.setValue(record.data.id); 
<%= txtName.ClientID %>.setValue(record.data.uid); 
<%= txtNC.ClientID %>.setValue(record.data.uname); 
<%= txtAge.ClientID %>.setValue(record.data.uage); 
if(id==1) 
{ 
<%= Button1.ClientID %>.setText('  '); //   button,      text,     setText(); 
<%= txtID.ClientID %>.hide(null); 
<%= Button2.ClientID %>.show(null); 
} 
if(id==0) 
{ 

} 
if(id==2) 
{ 
<%= txtID.ClientID %>.setValue(''); 
<%= txtName.ClientID %>.setValue(''); 
<%= txtNC.ClientID %>.setValue(''); 
<%= txtAge.ClientID %>.setValue(''); 
<%= txtID.ClientID %>.hide(null); 
<%= Button1.ClientID %>.value="  "; 

} 
<%= Window1.ClientID %>.show(); 
} 

Coolite.AjaxMethods.DeleteUserInfo 방법 에 특히 주의 하 십시오.첫 번 째 매개 변 수 는 프론트 에서 가 져 오고 서버 엔 드 로 전달 하 는 매개 변수 입 니 다.두 번 째 는 리 셋 함수 입 니 다.배경 삭제 코드 는 다음 과 같다.학습 소감 이 어떤 사건 이 전달 하 는 매개 변수 개수 와 유형 을 모 르 면 잘못된 방법 을 마음대로 쓰 고 디 버 깅 할 때 의미 있 는 파 라 메 터 를 분석 할 수 있 습 니 다.의문:삭 제 를 실현 할 때 새로 고침 을 실현 할 때 수정 을 실현 할 때 저 는 데이터 베 이 스 를 다시 읽 은 후에 Store 에 연결 하지 않 고 Store 나 GridPanel 을 새로 고침 하여 실현 합 니 다.