extJs_extjs에서 일반적으로 사용되는 추가, 삭제, 수정 및 확인 작업 코드

코드 복사 코드는 다음과 같습니다.

<%@ page 언어="java" import="java.util.*" pageEncoding="UTF-8"%>

머리>
                                                                                                                                                                                          ;%@ include file="../extJs/ CommonJs.jsp"%>
                                                                             
// 각 페이지에 표시되는 기본 행 수를 10으로 설정

var QUERY_PAGE_SIZE = 10;

/**
* 작성자: Hua Hui
* 시간: 2009년 12월 22일
* 내용: extJ에서 흔히 사용되는 추가, 삭제, 수정 및 확인 작업
*/
function searchQueryForm()
{> // 폼 사용 시 로컬 변수로 설정하는 것이 좋습니다 . Form

var QueryForm = NULL;
QueryForm = New Ext. Formpanel ({
ID: 'queryform', // ID 지정
renderto: 'searchpanel' Queryform, // // Form이
Labelwidth: 70인 DIV 레이어를 가리킵니다. // 너비 점유 페이지에 레이블을 지정합니다.
지역:'north',
border:false, / /패널의 몸체 요소의 테두리를 표시하려면 거짓으로 숨깁니다(기본값은 true)
badyBorder:false, //패널의 몸체 요소를 표시합니다. 이를 숨기겠다는 가설(기본값 TRUE의 내부 경계)
Labelign: 'Right', // 라벨 라벨 정렬 방법
Frame: true, // 커스텀 패널의 둥근 경계, 테두리 너비 1px 1px 1px .기본값은 false입니다
                                                                                                   ~ ~                                                                                          🎜> 항목을 통해:[{
  > > fieldLabel:'사용자 코드',
maxLength:'50',
vtype:'specialChar',
앵커:'80%'
}
                                  > > ',
                            fieldLabel:'용도명',
                          maxLength:'100',
                   > 🎜> ]
             }]
            });
        }
/**
* showUserForm(): 양식 그리기 및 추가
*/
function showUserForm()
{
//매번 새 객체가 생성되는 것을 방지하려면 변수를 로컬 변수로 정의하세요.

var userForm = null ; '오른쪽',
테두리:false,
                                                                                | ~                     항목:{
name:'userInfo.userId',
HiddenName:'userInfo.userId', //hiddenName 동적으로 데이터베이스의 해당 필드를 바인딩합니다
              xtype:'textField', //xtype은 세 가지 범주로 나뉘며 textField는 양식 필드를 제어합니다. 🎜>                                                  ~                                                             BlankText: '사용자 코드를 입력하세요.', // 프롬프트 메시지 빈 텍스트 상자 maxLength:'50', //텍스트 상자에 허용되는 최대 입력 길이, 최소 minLength
vtype:'specialChar',
앵커:'80%'
                               ,{
열 너비:'.8',
항목:{
이름:'userInfo.userName',                                                     ~                          HiddenName:'userInfo.userName',
                   A> FieldLabel: '사용자 이름 & lt; 글꼴 색상 = 빨간색 & gt;*& lt;/font & gt;',
labelseparator: '',
공백 텍스트: '사용자 이름을 입력하세요',
허용공백: false,
maxLength:'100',                                                                                                ~ ~
입력 유형: '비밀번호',
Fie ldlabel: '사용자 비밀번호 & LT ;font color=red>*',
labelSeparator:'',
BlankText:'사용자 비밀번호 입력',
allowedBlank:false,
maxLength:'12',
minLength:'6',
value:'123456', //사용자 기본 비밀
앵커:'1 00%'
                                                                       ,{
컬럼 너비:'.8',
항목:{
이름:'rPwd',
HiddenName:'rPwd',
xtype:'textField',
inputType: 'password',
fieldLabel:'비밀번호 확인*',
labelSeparator:'',
BlankText: '두 번 입력한 비밀번호는 동일해야 합니다.',
allowedBlank:false,
vtype:'pwdRange',
pwdRange:{begin:' userInfo.pwd',end:'rPwd'},
       maxLength:'12',
      앵커: '100%'
                                                            
                                                                                                   
userForm = new Ext.FormPanel({
id:'editForm',
labelWidth:'80',
labelAlign:'right ',
                     border: false, false,
프레임:true,
항목:[
레이아웃:'열',
항목:[
{
열 너비:'.8',
항목:{
name:'userInfo.userId',
HiddenName:'userInfo.userId', //hiddenName은 데이터베이스의 해당 필드를 동적으로 바인딩합니다.
          xtype:'textField', //xtype은 세 가지 클래스로 나눌 수 있습니다. textField는 양식 필드의 제어입니다.        readOnly:true, //텍스트 상자는 읽기 전용입니다
비활성화:true, // 텍스트 상자는 회색이며 다른 텍스트 상자 색상과 다릅니다.
MaxLength: '50 ' , // 텍스트 상자는 입력의 최대 길이, 가장 작은 minLength를 허용합니다
// 문자로 시작하고 2~12 사이의 문자와 숫자만 존재할 수 있습니다.

regex: /^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){1,11}$/,
      regexText: '사용자 코드는 문자, 길이로 시작해야 합니다 2~12자리!',
앵커:'90%'
}
,{
열 너비:'.8',
항목:{
이름:'userInfo.userName',                                                     ~                          HiddenName:'userInfo.userName',
                   A> 필드 라벨: '사용자 이름',
LabelsePaator: ':',
공백 텍스트: 사용자 이름 입력 ',
AllowBlank: False,
MaxLength:' 100 ',
/// 한자, 숫자, 문자만 포함 , 밑줄로 시작하거나 끝날 수 없습니다.

정규 표현식: /^(?!_)(?!.*?_$)[a-zA-Z0-9_u4e00-u9fa5] $/, RegEXText: '다음 줄은 한자, 숫자, 문자, 하위 줄만 시작하고 끝낼 수 없습니다!',
ANCHOR: '90%'
}
}, {
열 너비 :'.2',
항목:{
HiddenName:"infoFill",
이름:"infoFill",
xtype:'label',
html:'*',
labelSeparator:'',
앵커:'100%'
} }
,{
열 너비:'.8',
항목:{
이름:'userInfo.pwd',                                                   ~ > ~                                                    inputType:'password',
> 🎜> 앵커:' 90%'
}
},{
컬럼 너비: '.2',
항목:{
HiddenName:"infoFill",
이름:"infoFill",
xtype:'label',
html:'',
labelSeparator:'',
앵커:'100%'
}
,{
컬럼 너비:'.8',
항목:{
이름:'rPwd',
HiddenName:'rPwd',
xtype:'textField',
inputType: 'password',
fieldLabel:'비밀번호 확인*',
labelSeparator:':',
BlankText: '두 번 입력한 비밀번호는 동일해야 합니다.' ,
                                                                                                                                                                                                                  허용:false ,                // vtype은 확인 방법이므로 일반적인 확인인 경우에는 regex를 사용하면 됩니다.
vtype:'pwdRange',
                                 maxLength:'12 ',
앵커:'90%'
}
컬럼 너비:'.2',
항목:{
HiddenName:"infoFill",
이름:" infoFill",
xtype:'label',
html:'*',
labelSeparator:'',
앵커:'100%'
                           ~
/**
* onReady: 파일이 준비되었습니다(온로드 및 이미지 로딩 전)
**/
Ext.onReady(function(){

searchQueryForm();
//쿼리 양식 가져오기

var queryForm = Ext .getCmp("queryForm").getForm(); Defaluts:{ border:false,bodyBorder:false,activeTab:0},
항목:[queryForm,{id:'centerPanel',region:'center',height :document.body.clientHeight,contentEl:'mainDiv'}]
           }) /query information
var store = new Ext.data.Store({
url:'../user/doGetPageList. action', //작업 경로
reader:new Ext.data.JsonReader({
root:'userList', //struts2.0에서 전달된 매개변수: 사용자 컬렉션
      totalProperty:'rowTotal', / /struts2.0에서 전달된 매개변수: 정보의 총 행 수
                                                                                  🎜>      })

                                  **
* 테두리로 설정된 레이아웃은 페이지가 남동쪽, 북서쪽, 중앙의 다섯 부분으로 나누어진다는 의미입니다.
* 이는 centerPanel이 중앙에 배치된다는 의미입니다.
*/
함수 getMsg()
{

}
/**
* 콜백:
이라는 함수 **/
function submitForm() {
//그리드 초기화
vargrid = null
//체크박스
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:'id',
width:'20 '
             );                               지정하지 않으면 기본 렌더러는 원시 데이터 값을 사용합니다.
                                                                                                                                                                  > var colM = new Ext.grid.ColumnModel(
Name',dataIndex:'userName',align:'center',sortabel:true}
      {헤더:'삭제',dataIndex:' id',align:'center',renderer:function createButton(){
                 return '';}},
                                                           ~                                          {header:'edit',dataIndex:'userId',align:'center',renderer: function createButton(userId, 메타데이터, 레코드){ a style="cursor:hand" style="cursor:hand" onclick=updateForm(' userId ') >' Record.get('userName') '정보 수정' '< ;/a>';}}]
);
// 쿼리 양식 가져오기

var Form = EXT.GETCMP ("QueryForm")

// 인증 통과 여부를 판단하고, 통과하지 못한 경우 바로 종료해주세요
                                                                               ~                                          /**
* getLimitCount() : 값이 없는 경우 페이지당 행 수를 가져옵니다. 전달되면 기본값이 사용됩니다. getMsg 함수를 실행합니다.생략 가능
*/

store.load({params:{start:0,limit:getLimitCount()}, callback:getMsg})
if(grid == null) ~                    viewConfig:{forceFit:true}, // 전체 창 설정 컬럼 개수 Region:'center', //ViewPort에 표시되는 위치는
cm:colM, //정의된 컬럼
ds:store, //정의된 데이터 소스
border:false,
bodyBorder:false,
, // 정의된 체크박스

// 리스너: 하나 이상의 이벤트 처리 절차를 포함하는 것이 이 객체의 초기화 프로세스에 추가됩니다

청취자: {cellclick: renderPage}},
                                                                                                        >                                      xtype:'button', Choose ', Handler: Deluserall, //
Presset의 사용자 정의 실행: TRUE
}],
ID:' PageToolbar ',
PageSize: Qury_page_size, // 페이지당 각 페이지의 행 기본값은 query_page_size
Store: Store,
Displayinfo: True,
Displaymsg: '{0}의 레코드를 레코드에 표시합니다. ;                                                                                               ~                             .
                                                                                                         var userForm = Ext .getCmp("conditionForm").getForm();
                                                                                          
                                                                                                                                                                                   x:10 0, //창의 초기화 x 방향 위치
                        y:100, // ... ~     . 🎜> 버튼 ; '../user/addUser.action',
               params:{roleId:userForm.form.findField('userId').getValue()}， waitMsg:'데이터를 저장하세요. 잠시만 기다려주세요...', //스크롤바 프롬프트 내용
                                                                              > !"); AddUserWin.hide();
Ext.Msg.alert("Message",message);
                                     > Ext.Msg.alert('프롬프트 메시지'," 새 사용자를 추가하지 못했습니다!");
                  return;                                           sg.alert("프롬프트 메시지", "양식에 오류가 있습니다. 정확하게 입력해 주세요!")
     > ;}, text : 'close'}] });   params:{userId: userId},
메소드:'post',
성공:function(o)
{
                 var info = Ext.decode(o.responseText); ", info.message);
                                                                                             ~. 사용자 정보 삭제 실패!");
                                                                                                     >                 });