ExtJS GTGrid 단순 사용자 관리_extjs

소스 코드 일부: 코드 복사 코드는 다음과 같습니다. 사용户管理首页 .x-panel-body p {}{ 여백: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) !important; } .nav {}{ background-image:url(js/ext-2.2/shared/icons/fam/folder_go.png) !중요; } .icon-grid {}{ 배경 이미지: url(js/ext-2.2/shared/icons/fam/grid.png) !important; } #button-grid .x-panel-body {}{ 테두리: 1px 솔리드 #99bbe8; 국경 상단: 0 없음; } .add {}{ 배경 이미지: url(js/ext-2.2/shared/icons/fam/add.gif) !important; } .option {}{ 배경 이미지: url(js/ext-2.2/shared/icons/fam/plugin.gif) !important } .remove {}{ 배경 이미지: url(js/ext-2.2/shared/icons/fam/delete.gif) !중요 } .save {}{ 배경 이미지: url(js/ext-2.2/shared/icons/save.gif) !important; } Ext.onReady(function() { /**//**그리드 관련**/ Ext.QuickTips.init(); Ext.form .Field.prototype.msgTarget='side'; var newFormWin; //form窗口容器 var form1; //添加用户的form //修改用户的form //侧边栏状态的记录 Ext.state.SessionProvider = Ext.extend(Ext.state.CookieProvider, { readCookies : function(){ if(this.state){ for(var k in this.state){ 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', //返回的数据中的字段name type : 'int' //类型，默认为string类型 }, { name : 'username' , mapping : 'username' }, { name : 'age', mapping : 'age', type : 'int' }, { 이름 : 'ramark', mapping : 'remark' }]); // Store var ds = new Ext.data.Store( { proxy : new Ext.data.HttpProxy( { url : '${ctx}/UserServlet?method =getAll' }), reader : jsonReader }); ds.setDefaultSort('id', 'asc'); /**//** ***CRUD 그리드 ****/ //맞춤형 checkbox列选择 var sm = new xg.CheckboxSelectionModel({ 리스너: //添加监听器 { //行选择事件 rowselect : function (sm, rowIndex, keep, rec) //行选中事件 { //得到ext组件用Ext. getCmp('id') var btn = Ext.getCmp('tbar1'); //选择数weight大于2，禁用修改按钮 if(sm.getCount() != 1) { btn.disable(); } else { btn.enable() } //取消选择事件 rowdeselect : 함수(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, 프레임:true, 제목:'简易사용户管리', iconCls:'icon-grid', hidden: true, store: ds, //数据仓库 renderTo: 문서 .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:' 수정', 도구 설명:'데이터 수정', iconCls:'option', id : 'tbar1', handler : function() { 수정 () ; } },'-',{ text:'delete', tooltip:'data 삭제', iconCls:'remove', 핸들러: function( ) { remove(); } }] }) //데이터 로드 ds.load({ params: {start:0,limit:10}}); //Render Grid grid.render() //사용자 함수 추가 var add = function() { newFormWin = new Ext.Window({ layout : 'fit', width : 400, height : 300, closeAction : 'hide', plain : true, title : '사용자 관리', items : form1 }) newFormWin.show() // 사용자 함수 수정 var 수정 = function() { var _record = Grid.getSelectionModel().getSelected() if (!_record) { Ext.Msg .alert('수정할 항목을 선택하세요!'); } else { myFormWin() form2.form.load ({ url : '${ctx}/UserServlet?method=getById&id=' _record.get('id'), waitMsg : '데이터 로드 중', failure : 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 : 'Modify user' , 항목 : form2 }); newFormWin.show(''); } /**//*JsonReader는 Form에 배치해야 하며 데이터 로딩 순서가 문제라는 점에 유의하세요.*/ var jsonFormReader = new Ext . data.JsonReader( { root : 'list', totalProperty : 'totalCount', successProperty : '@success' }, [ { name : 'id ' , 매핑 : 'id', 유형 : 'int', }, { 이름 : '사용자 이름', 매핑 : '사용자 이름' } , { name : 'age', mapping : 'age', type : 'int' }, { name : 'remark', mapping : 'remark' }]); //사용자 양식 추가 form1 = new Ext.FormPanel({ labelWidth : 75, frame : true, title : '추가 user', bodyStyle : 'padding:5px 5px 0', width : 350, waitMsgTarget : true, url : '${ctx}/UserServlet?method=save', defaults : { width : 230 }, defaultType : 'textfield', items : [ { 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 : 'Age는 비워둘 수 없습니다.' }, new Ext.form.TextArea( { fieldLabel : 'Remarks ', name : 'remark', growMin : 234, maxLength : 50, maxLengthText : '최대 길이는 50자를 초과할 수 없습니다. })], 버튼 : [ { 텍스트 : '저장', disabled : false, handler : function() { if(form1.form.isValid() ) { form1.form.submit( { url : '${ctx}/UserServlet?method=save', success : 함수(from, action) { Ext.alert('사용자를 추가했습니다! '); ds.load({ params : { 시작: 0, 한계: 10 } }); function(form, action) { Ext.Msg.alert('사용자 추가에 실패했습니다!'); }, waitMsg: '데이터 저장, 나중에' }) newFormWin.hide() } 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, //양식 리더 지정, 기본값으로 수정: { width : 230 }, defaultType : 'textfield', items : [ { xtype: 'hidden', name : 'id' }, { fieldLabel : 'username', name : 'username', //백그라운드에서 데이터를 가져오려면 allowBlank : false, blankText : 'Username can be 비어 있을 수 없습니다'를 사용하세요. }, { xtype : 'numberfield', maxValue : 100, maxText : '나이는 100세를 초과할 수 없습니다', minValue : 1, minText : '나이 1세 미만일 수 없습니다', fieldLabel : 'age', name : 'age', allowBlank : false, blankText : 'Age는 비워둘 수 없습니다' }, new Ext.form .TextArea( { fieldLabel : 'remark', name : 'remark', growMin : 234, maxLength : 50, maxLengthText : '최대 길이는 50자 초과! ' })], 버튼 : [ { 텍스트 : '수정', disabled : false, handler : function() { if(form2.form.isValid()) { form2.form.submit( { success : 함수(from, action) { Ext.Msg .alert('사용자를 성공적으로 수정했습니다! '); ds.load({ params : { 시작: 0, 한계: 10 } }); function(form, action) { Ext.Msg.alert('사용자 수정에 실패했습니다!') }, waitMsg : '데이터를 나중에 저장합니다' }); newFormWin.hide(); } else { Ext.Msg.alert('정보가 성공적으로 입력되었는지 확인해주세요!') } } }, { 텍스트 : '취소', handler : function() { form2.form.reset() } }] }); //이벤트 삭제 var Remove = function() { var _record = Grid.getSelectionModel().getSelected() if ( _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 : { 시작 : 0, 한계 : 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 version', 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 : 'Menu Directory', region : 'west', split : true, width : 200, collapsible : true, margins : '3 0 3 3', cmargins : '3 3 3 3', layout: 'accordion', layoutConfig:{ animate:true }, 항목: [{ html: Ext.example.shortBogusMarkup, title:'사용자 관리', autoScroll:true, border:false, iconCls: 'nav' },{ title:'사용자 구성', html: Ext.example.shortBogusConfig, border:false, autoScroll:true, iconCls:' 설정' }] }) var win = new Ext.Window({ title : 'User Management Micro System', closable : true, maximized : true, 최소화 가능 : true, 너비 : '100%', 높이 : '100%', 일반 : true, 레이아웃 : '테두리', 닫기 가능 : false, 항목 : [nav, 탭] }) win.show() win.maximize() }); -> ="text/javascript" src="js/ext-2.2/shared/examples.js"> 전체 소스 코드 다운로드 다운로드하려면 여기를 클릭하세요

ExtJS GTGrid 단순 사용자 관리_extjs

관련 기사