extJs_extjs で一般的に使用される追加、削除、変更、およびチェックのオペレーション コード

コードをコピー コードは次のとおりです:

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

頭>
;%@ include file="../extJ s/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 が
である DIV レイヤーを指します。 Labelwidth: 70, // ラベルは、ページの幅占有率を表します。 /パネルのボディ要素の境界線を表示するには、それを誤って非表示にします (デフォルトは true)
badyBorder:false, //パネルのボディ要素を表示します。非表示にする仮説 (デフォルト TRUE の内部境界)
Labelign: 'Right', // ラベルのラベル配置メソッド
Frame: true, // カスタム パネルの丸い境界、境界線の幅 1px 1px 1px 。デフォルトはfalseです
🎜>を介して項目：[{columnWidth：.5、
layout： 'form'、
iteme：{
xtype： 'textfield'、
> fieldLabel:'ユーザー コード',
maxLength:'50',
vtype:'specialChar',
アンカー:'80%'
}
,{
columnWidth:.5,
layout:'form',
items:{
name:'userName',
hiddenName:'userName',
xtype:'textfield '、
fieldlabel：'用户名称 '、
maxlength：' 100 '、
vtype：' specialchar '、
anchor：'80％'
}
}
]
}]
});
}
/**
* showUserForm(): フォームを描画して追加
*/
function showUserForm()
{
//毎回新しいオブジェクトが生成されるのを避けるために変数をローカル変数として定義します

var userForm = null ;「右」、
border：false、
ms：[
item> name： 'userininfo.userid'、
hiddenname： 'userinfo.userid'、// hiddennameデータベースの対応するフィールド
xType： 'textfield'、// xtypeは3つのカテゴリに分割できます。Textfieldはフォームフィールドの制御です。空のテキスト ボックス maxLength:'50', //テキスト ボックスで許可される最大入力長、最小 minLength
vtype:'specialChar',
アンカー:'80%'
、{ items：{
name： 'userinfo.username'、hiddenname： 'userinfo.username'、
a> fieldlabel： 'user name＆lt; font color = red & gt;*& lt;/font & gt;',
labelseparator: '',
Blanktext: 'ユーザー名を入力してください',
a lllowblank: false,
maxlength： '100'、 > ファイル ldlabel: 'ユーザー パスワード & LT ;font color=red>*',
labelSeparator:'',
blankText:'ユーザー パスワードを入力',
allowedBlank:false,
maxlength：'12 '、
minlength：' 6 '、
value：' 123456 '、// user default secret
anchor：' 1 00％ '
,{
columnWidth:'.8',
items:{
name:'rPwd',
HiddenName:'rPwd',
xtype:'textField',
inputType: 'password',
fieldLabel:'パスワードの確認*',
labelSeparator:'',
BlankText: '2 回入力したシークレットは同じである必要があります',

= new Ext.FormPanel({
id:'editForm',
labelWidth:'80',
labelAlign:'right ',
border: false, false,
フレーム:true、
項目:[
レイアウト:'column'、
項目:[
{
columnWidth:'.8'、
項目:{
name:'userInfo.userId',
hiddenName:'userInfo.userId', //hiddenName はデータベース内の対応するフィールドを動的にバインドします
xtype:'textField', //xtype は 3 つのクラスに分割できます。 textField はフォーム フィールドのコントロールです readOnly:true, //テキスト ボックスは読み取り専用です
disabled:true, //テキスト ボックスはグレーで、他のテキスト ボックスの色とは異なります
MaxLength: '50 ' , // テキスト ボックスでは、入力の最大長、最小の minLength が許可されます
// 文字で始まり、2 から 12 までの文字と数字のみが存在できます

正規表現: /^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){1,11}$/,
regexText: 'ユーザーコードは文字で始まる必要があります, 長さ2 ～ 12 桁!',
アンカー:'90%'
}
、{ items：{
name： 'userInfo.username'、hiddenname： 'userinfo.username'、
a> fieldlabel： 'user name'、
LabelsePaator: ':',
Blanktext: ユーザー名を入力してください ',
AllowBlank: False,
MaxLength:' 100 ',
/// 中国語の文字、数字、文字のみが含まれます、およびアンダースコアは、アンダースコアで開始または終了することはできません

正規表現: /^(?!_)(?!.*?_$)[a-zA-Z0-9_u4e00-u9fa5] $/,
regextext： '漢字、数字、文字、アンダースコアのみが含まれており、アンダースコアで開始して終わることはできません！
アンカー：'90％'
}}
}、{： ' 2'、
項目:{
hiddenName:"infoFill"、
name:"infoFill"、
xtype:'label'、
html:'* ',
labelSeparator:'',
アンカー:'100%'
} }
、{items：{
name： 'userInfo.pwd'、hiddenname： 'userininfo.pwd'、
labelseparator： '：'、
blankText:'ユーザーパスワードを入力' 、
allowBlank:false、
maxLength:'12'、
minLength:'6'、
アンカー:'90%'
}
},{
columnWidth: '.2',
items:{
hiddenName:"infoFill",
name:"infoFill",
xtype:'label',
html:'',
labelSeparator:'',
アンカー:'100%'
}
,{
columnWidth:'.8',
items:{
name:'rPwd',
HiddenName:'rPwd',
xtype:'textField',
inputType: 'password',
fieldLabel:'パスワードの確認*',
labelSeparator:':',
BlankText: '2 回入力したシークレットは同じである必要があります' ,
allowBlank: se, // vtype は検証方法です。一般的な検証の場合は、正規表現を使用できます。
vtype:'pwdRange',
maxLength:'12 ',
アンカー:'90%'
}
columnWidth:'. 2',
項目:{
hiddenName:"infoFill",
名前:" infoFill",
xType： 'label'、
html： '＆lt; font color = red＆gt;*＆lt;/font＆gt;'、
labelseparator： ''、
anchor： '100％'

/**
* onReady: ファイルの準備ができています (onload とイメージの読み込み前)
**/
Ext.onReady(function(){

searchQueryForm();
//クエリフォームを取得

var queryForm = Ext .getCmp("queryForm").getForm(); デフォルト:{ border:false,bodyBorder:false,activeTab:0},
items:[queryForm,{id:'centerPanel',region:'center',height :document.body.clientHeight,contentEl:'mainDiv'}]
}); /クエリ情報
var store = new Ext.data.Store({
url:'../user/doGetPageList. action', //アクションパス
Reader:new Ext.data.JsonReader({
root:'userList', //struts2.0から渡されるパラメータ: ユーザーコレクション
totalProperty:'rowTotal', / /struts2.0 から渡されるパラメータ: 情報の総行数
を通じて 🎜> });

**
* レイアウトをボーダーに設定すると、ページが南東、北西、中央の 5 つの部分に分割されます
* これは、centerPanel が中央に配置されることを意味します
*/
function getMsg()
{

}
/**
* コールバック: 呼び出される関数
**/
function submitForm() {
//グリッドを初期化します
var Grid = null;
//Checkbox
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:'id',
width:'20 '
); セルの HTML タグの機能。指定しない場合、デフォルトのレンダラーは生データ値を使用します。
> varcolM = new Ext.grid.ColumnModel(
Name',dataIndex:'userName',align:'center',sortabel:true},
{header:'de let',dataIndex:' id',align:'center',renderer:function createButton(){
return '' Record.get('userName') '情報変更' '< ;/a>';}}]
);
// クエリフォームを取得します

var Form = EXT.GETCMP ("QueryForm"); >
// 検証に合格するかどうかを決定し、合格しない場合は直接閉じてください
🎜> /**
* getLimitCount() : 値が指定されていない場合、ページごとの行数を取得します。渡された場合、関数 getMsg を実行するとデフォルト値が使用されます。省略可能
*/

store.load({params:{start:0,limit:getLimitCount()}, callback:getMsg});
if(grid == null)
タイトル：「ユーザークエリの結果」、//グリッドタイトル
width：document.body.clientwidth、//グリッドのwidthの値を設定します
viewconfig：{forcefit：true}、//フルウィンドウを設定します列数の地域:'center', //これは ViewPort に表示される位置に設定されます
cm:colM, // 定義された列
ds:store, // 定義されたデータ ソース
border:false,
bodyBorder:false,
, // 定義されたチェックボックス

// リスナー: 1 つ以上のイベント処理プロシージャがこのオブジェクトの初期化プロセスに追加されます

リスナー: {cellclick: renderPage}}、
🎜> xtype： 'button'、select '、🎜> default is：query_page_size
store：store、
displayinfo：true、
displaymsg：' {0のレコードを表示する} {1}
var userForm = Ext .getCmp("conditionForm").getForm(); null） x :100, //ウィンドウの初期化 x 方向位置
y:100, // 。 '../user/addUser.action',
params:{roleId:userForm.form.findField('userId').getValue()}， waitMsg:'データを保存します。しばらくお待ちください...', //スクロール バー プロンプトの内容
if(message == null){
Ext.Msg.alert("プロンプトメッセージ", "ユーザー情報が正常に追加されました!"); AddUserWin.hide();
Ext.Msg.alert("メッセージ",message);
> Ext.Msg.alert('プロンプトメッセージ'," 新しいユーザーの追加に失敗しました。");
return; sg.alert("プロンプトメッセージ", "フォームにエラーがあります。正しく入力してください。"); {handler:function(){addUserWin. ;},text:'閉じる'}]
});
function delForm(userId)
( )

params:{userId: userId},
method:'post',
success:function(o)
{
var info = Ext.decode(o.responseText); "、info.message）;
ユーザー情報の削除に失敗しました!");
> });