ExtJS GTGrid 簡易ユーザー管理_extjs

ソース コードの一部: コードをコピー コードは次のとおりです: 用户管理首页 .x-panel-body p {}{ margin:5px; } .x-column-layout-ct .x-panel {}{ margin-bottom:5px; } .x-column-layout-ct .x-panel-dd-spacer {}{ margin-bottom:5px; } .settings {}{ background-image:url(js/ext-2.2/shared/icons/fam/folder_wrench.png) !重要; } .nav {}{ 背景画像:url(js/ext-2.2/shared/icons/fam/folder_go.png) !重要; } .icon-grid {}{ 背景画像: url(js/ext-2.2/shared/icons/fam/grid.png) !重要; } #button-grid .x-panel-body {}{ border: 1px ソリッド #99bbe8; ボーダートップ: 0 なし; } .add {}{ 背景画像: url(js/ext-2.2/shared/icons/fam/add.gif) !重要; } .option {}{ 背景画像: url(js/ext-2.2/shared/icons/fam/plugin.gif) !重要 } .remove {}{ 背景画像: url(js/ext-2.2/shared/icons/fam/delete.gif) !重要 } .save {}{ 背景画像: url(js/ext-2.2/shared/icons/save.gif) !重要; } Ext.onReady(function() { /**//**グリッド関連**/ Ext.QuickTips.init(); Ext.form .Field.prototype.msgTarget='side'; var newFormWin; //フォーム窗口容器 var form1; //追加用フォーム var form2; //修正用フォーム //側边栏状態の记录 Ext.state.SessionProvider = Ext.extend(Ext.state.CookieProvider, { readCookies : function(){ if(this.state){ for(this.state の var k){ if(typeof this.state[k] == 'string'){ this.state[k] = this.decodeValue(this.state[ k]); } } } return Ext.apply(this.state || {}, Ext.state.SessionProvider.superclass.readCookies.call(this)); >} }); var xg = Ext.grid; var jsonReader = new Ext.data.JsonReader( { root : 'list', // 返します的データセット totalProperty : 'totalCount', //总记录数 successProperty : '@success' //成功标记 }, [ { name : 'id', //grid中的dataIndex mapping : 'id', //返されるデータ中のフィールド名 type : 'int' //类型、默认はstring型 }, { name : 'username' , マッピング : 'ユーザー名' }, { 名前 : '年齢', マッピング : '年齢', タイプ : 'int' }, { 名前: 'ramark'、 マッピング: 'コメント' }]); // Store var ds = new Ext.data.Store( { proxy : new Ext.data.HttpProxy( { url : '${ctx}/UserServlet?method =getAll' }), リーダー: jsonReader }); ds.setDefaultSort('id', 'asc'); /**//** ***CRUD グリッド ****/ //独自のチェックボックス列选择 var sm = new xg.CheckboxSelectionModel({ listeners: //追加监听器 { //行选择イベント rowselect : function (sm, rowIndex, keep, rec) // 行选中イベント { //ext组件用Ext. getCmp('id') var btn = Ext.getCmp('tbar1'); //选择数大以上2，禁用修改按钮 if(sm.getCount() != 1) { btn.disable(); } else { btn.enable(); } //取消イベント rowdeselect : function (sm, rowIndex, keep, rec) //行选中イベント { //ext 组件用 Ext.getCmp('id') var btn = Ext.getCmp( 'tbar1'); //数量等以下 1启自動修改按钮 if(sm.getCount() == 1) { btn.enable() ; else { btn.disable(); } } } }); //初化Grid var Grid = new xg.GridPanel({ id:'user-grid', width:780, height:450, Frame:true, title:'简易用户管理', iconCls:'icon-grid', hidden: true, store: ds, //数据仓库 renderTo: document .body, //列 cm: new xg.ColumnModel([ sm, {id:'id',header: "インデックス", width: 40, sortable: true, dataIndex : 'id'}, {header: "用户名", width: 20, sortable: true, dataIndex: 'username'}, {header: "年龄", width: 20, sortable: true, dataIndex: 'age'}, {header: "备注", width: 20, sortable: true, dataIndex: 'remark'} ]), sm: sm, viewConfig: { forceFit:true }, //分页ツール栏 bbar : new Ext.PagingToolbar({ pageSize : 10, store : ds, displayInfo : true、 displayMsg : '表示 {0}-{1} 条 / 共 {2} 条'、 emptyMsg : "データなし。" }), // 組み込みツールバー (ボタン) tbar:[{ text:'Add', tooltip:'新しいデータの行を追加', iconCls:'add', ハンドラー : function() { add(); } }; '-', { text:' Modify'、 tooltip:'データの一部を変更'、 iconCls:'option'、 id : 'tbar1'、 handler : function() { modify () ; } },'-',{ text:'delete'、 tooltip:'delete data'、 iconCls:'remove'、 ハンドラー: function( ) { remove(); } }] }); //データのロード ds.load({ params: {start:0, limit:10}}); //グリッドをレンダリング grid.render(); //ユーザーの関数を追加 var add = function() { newFormWin = new Ext.Window({ レイアウト : 'fit', 幅 : 400, 高さ : 300, closeAction : '非表示', plain : true, title : 'ユーザー管理', items : form1 }); newFormWin.show() } //ユーザーの関数を変更します varmodify = function() { var _record = Grid.getSelectionModel().getSelected(); if (!_record) { Ext.Msg .alert('変更する項目を選択してください!'); } else { myFormWin() ({ url : '${ctx}/UserServlet?method=getById&id=' _record.get('id'), waitMsg : 'データのロード', 失敗 : function() { Ext. Msg.alert('読み込みに失敗しました'); }, success : function() { //Ext.Msg.alert('読み込みに成功しました! '); } }); } } // ユーザーのフォームを変更します var myFormWin = function() { newFormWin = new Ext.Window ( { layout : 'fit', width : 400, height : 300, closeAction : 'hide', plain : true, title : 'ユーザーを変更' , items : form2 }); newFormWin.show('') } /**//*JsonReader はフォーム上に配置する必要があり、データの読み込み順序が問題になることに注意してください*/ var jsonFormReader = new Ext . data.JsonReader( { root : 'list', totalProperty : 'totalCount', successProperty : '@success' }, [ { name : 'id ' , マッピング : 'id', type : 'int', }, { name : 'username', mapping : 'username' } , { 名前 : '年齢', マッピング : '年齢', タイプ : 'int' }, { 名前 : '備考', マッピング : '備考 ' }]); // ユーザーのフォームを追加 form1 = new Ext.FormPanel({ labelWidth : 75, frame : true, title : '追加user', bodyStyle : 'padding:5px 5px 0', width : 350, waitMsgTarget : true, url : '${ctx}/UserServlet?method=save', デフォルト : { 幅 : 230 }、 デフォルトタイプ : 'テキストフィールド'、 項目 : [ { フィールドラベル : 'ユーザー名'、 名前: 'username', //バックグラウンドでデータを取得するには、 allowBlank : false, blankText : 'ユーザー名を空白にすることはできません' }, { xtype : 'numberfield', maxValue : 100, maxText : '年齢は 100 歳以上にすることはできません', minValue : 1, minText : '年齢は 1 歳未満にすることはできません', fieldLabel : '年齢', name : '年齢', allowBlank : false, blankText : '年齢を空白にすることはできません' }, new Ext.form.TextArea( { fieldLabel : '備考', name : 'remark', growMin : 234, maxLength : 50, maxLengthText : '最大長は 50 文字を超えることはできません!' })], ボタン : [ { テキスト : '保存'、 無効 : false、 ハンドラー : function() { if(form1.form.isValid() ) { form1.form.submit( { url : '${ctx}/UserServlet?method=save', 成功 : function(from, action) { Ext.Msg.alert('ユーザーの追加に成功しました! '); ds.load({ params : { 開始 : 0, 制限 : 10 } }); function(form, action) { Ext.Msg.alert('ユーザーの追加に失敗しました!'); }, waitMsg : 'データを保存します。後で' }); else { Ext .Msg.alert('情報が正しく入力されたか確認してください!'); } } }, { text : 'キャンセル', handler : function( ) { form1.form.reset(); } }] }); // ユーザーのフォームを変更します form2 = new Ext .FormPanel({ labelWidth : 75, frame : true, title : 'ユーザーの変更', bodyStyle : 'padding:5px 5px 0', width : 350, waitMsgTarget : true, url : '${ctx}/UserServlet?method=update', reader : jsonFormReader, //Form のリーダーを指定し、 defaults : { width : 230 }, defaultType : 'textfield', items : [ { xtype: 'hidden', name : 'id' }, { fieldLabel : 'username', name : 'username', //バックグラウンドでデータを取得するには、 allowBlank : false, blankText : 'Username を空にすることはできません' }, { xtype : 'numberfield', maxValue : 100, maxText : '年齢は 100 歳を超えることはできません', minValue : 1, minText : '年齢1 歳未満は指定できません', fieldLabel : 'age', name : 'age', allowBlank : false, blankText : '年齢を空白にすることはできません' }, new Ext.form .TextArea( { fieldLabel : 'remark', name : 'remark', growMin : 234, maxLength : 50, maxLengthText : '最大長は次のとおりです50 文字を超えています! ' })]、 ボタン : [ { テキスト : '変更'、 無効 : false、 ハンドラー : function() { if(form2.form.isValid()) { form2.form.submit( { 成功 : function(from, action) { Ext.Msg .alert('ユーザーの変更が成功しました! '); ds.load({ params : { 開始 : 0, 制限 : 10 } }); function(form, action) { Ext.Msg.alert('ユーザーの変更に失敗しました!'); }, waitMsg : 'データを保存しています。後で' }); newFormWin.hide(); } else { Ext.Msg.alert('情報が正しく入力されたかどうかを確認してください!'); }, { テキスト : 'キャンセル', ハンドラー : function() { form2.form.reset(); } }] }); //イベントを削除します var delete = function() { var _record = Grid.getSelectionModel().getSelected(); _record) { Ext.MessageBox.confirm('削除の確認', '選択したデータを削除してもよろしいですか?', function(btn) { if (btn == " はい") { var m = Grid.getSelections(); var jsonData = ""; for (var i = 0, len = m.length;i { var ss = m[i].get("id"); //ユーザー ID、"id" フィールド名 if (i == 0) { jsonData = jsonData ss; } else { jsonData = jsonData "," ss; } //データ ソース内の削除 ds.remove(m[i]);データベース 対応するレコード Ext.Ajax.request({ url: '${ctx}/UserServlet?method=remove&id=' ss } ds); .load ({ params : { start : 0, limit : 10, delData : jsonData } }); }); } else { Ext.Msg.alert('削除するデータ項目を選択してください! '); } }; /**//***/ Ext.state.Manager.setProvider ( new Ext.state.SessionProvider({state: Ext.appState) })); // 中央のタブ var tabs = new Ext.TabPanel({ region : 'center', margins : '3 3 3 0', activeTab : 0、 defaults : { autoScroll : true }、 items : [{ title : 'ExtJS バージョン'、 contentEl: 'user-grid' // 入力する HTML ID },{ title : 'GTGrid バージョン', html : 'GTGrid は現在 Extjs との統合をサポートしていません (ウィンドウ), ここをクリックして、私が作成した例を表示します ' },{ title: 'さらなる注目', html: 'さらに多くのコンテンツを参照できます&lt ;a href="http://www.blogjava.net/supercrsky">私のブログ ' }] }); // 西のパネル var nav = new Ext.Panel({ title : 'メニュー ディレクトリ', region : 'west', split : true, width : 200, collapsible : true, margins : '3 0 3 3'、 cmargins : '3 3 3 3'、 layout: 'accordion'、 layoutConfig:{ animate:true }、 items: [{ html: Ext.example.shortBogusMarkup, title:'ユーザー管理', autoScroll:true, border:false, iconCls: 'nav' },{ title:'ユーザー構成', html: Ext.example.shortBogusConfig, border:false, autoScroll:true, iconCls:' settings' }] }); var win = new Ext.Window({ title : 'ユーザー管理マイクロ システム', closeable : true, maximizable : true, 最小化可能 : true、 幅 : '100%'、 高さ : '100%'、 無地 : true、 レイアウト : 'border'、 閉じる可能 : false、 項目: [ナビゲーション、タブ] }); win.show(); }); -> 完全なソース コードのダウンロード ダウンロードするにはここをクリックしてください