使用 ExtJS4 MVC 示例

task/new.jsp

  1 <%@ page language="java" pageEncoding="UTF-8"%>
  2 
  3 <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
  4 
  5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6 
  7 <%
  8 
  9 String parentId = request.getParameter( "parentId" ) ;     
 10 String parentLatestEditionId = request.getParameter( "parentLatestEditionId" ) ;     
 11 String originId = request.getParameter( "originId" ) ;     
 12 String parentNodePath = request.getParameter("parentNodePath") ;
 13 String rootId = request.getParameter("rootId") ;
 14 
 15 if ( parentId==null || parentId.equals(""))    parentId = "-1" ;
 16 if ( parentLatestEditionId==null || parentLatestEditionId.equals(""))    parentLatestEditionId = "-1" ;
 17 
 18 /*
 19    当回复时,只能回复最新的版本,历史版本不能被回复 
 20 */
 21 int intParentId = Integer.valueOf( parentId ).intValue() ;
 22 int intParentLatestEditionId = Integer.valueOf( parentLatestEditionId ).intValue() ;
 23 if ( intParentId > 0 && intParentId != intParentLatestEditionId ){
 24     out.println("<h1 style='color : red ;'>!!! 致命错误:历史版本不可以被回复。!!!</h1>") ; 
 25 } ;
 26 
 27 if ( originId==null || originId.equals(""))
 28     originId = "-1" ;
 29 
 30 
 31 if ( parentNodePath==null || "".equals(parentNodePath))
 32     parentNodePath = "" ;
 33 
 34 if( rootId==null || "".equals(rootId) )
 35     rootId = "-1" ;
 36 
 37 
 38 int intOriginId = Integer.valueOf( originId ).intValue() ;
 39 
 40 if ( intParentId > 0 )    out.println("<h1 style='color : red ;'>《 回 复 》</h1>") ;
 41 else if ( intOriginId > 0 )    out.println("<h1 style='color : red ;'>《 修 改 》</h1>") ;
 42 else out.println("<h1 style='color : red ;'>《 新 增 》</h1>") ;
 43 
 44 
 45 
 46 %>
 47 
 48 
 49 <%
 50     String path = request.getContextPath( ) ;
 51     String basePath = request.getScheme( )+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 52 %>
 53 
 54 <!-- 
 55 
 56     2013 0706 Livon
 57     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
 58     @ 本页的访问地址: 
 59     http://localhost:8080/squadronMonitor/user/main.jsp?groupCode=user
 60     
 61     http://localhost:8080/fengTask/task!insert.action?bean.taskContent=0
 62 
 63 -->
 64 
 65 <html>
 66 <head>
 67 
 68     <base href="<%=basePath%>">
 69 
 70     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 71     <meta http-equiv="Access-Control-Allow-Origin" content="*">
 72     
 73     <%@ include file="../inc/link_ExtJS.jsp" %>
 74     <%@ include file="../inc/css.jsp" %>
 75     
 76     <script type="text/javascript" >
 77     
 78     var baseHref = "<%=basePath%>" ;
 79     
 80     var task = {} ;    
 81     task.originId = '<%=originId %>' ;
 82     task.parentId = '<%=parentId %>' ;
 83     task.userName = '<%=request.getRemoteUser() %>' ;
 84     task.rootId = '<%=rootId %>' ;
 85     task.parentNodePath = '<%=parentNodePath %>' ;
 86 
 87 
 88         var loginedUser = {
 89                 userName : '<%= request.getRemoteUser( ) %>' ,
 90                 userRole : '<%= request.getAuthType( ) %>'
 91         } ;
 92         
 93     </script>
 94     
 95     
 96     <script type="text/javascript" src="task/new.js" charset="UTF-8"></script>
 97     
 98     
 99     <link rel="stylesheet" href="/KindEditor/themes/default/default.css" />
100     <link rel="stylesheet" href="/KindEditor/plugins/code/prettify.css" />    
101 
102     <script charset="utf-8" src="/KindEditor/kindeditor.js"></script>
103     <script charset="utf-8" src="/KindEditor/lang/zh_CN.js"></script>
104     
105     <script charset="utf-8" src="/KindEditor/plugins/code/prettify.js"></script>
106     
107     <script>
108     
109             KindEditor.ready(function(K) {
110                 
111                 var options = {
112                         cssPath : '/css/index.css',
113                         filterMode : true ,
114                         uploadJson : 'task/kindEditorUpload.jsp',
115                         fileManagerJson : 'task/file_manager_json.jsp' ,
116                         allowFileManager : true ,
117                         afterCreate : function() {
118                             var self = this;
119                             K.ctrl(document, 13, function() {
120                                 self.sync();
121                                 // document.forms['example'].submit();
122                             });
123                             K.ctrl(self.edit.doc, 13, function() {
124                                 self.sync();
125                                 // document.forms['example'].submit();
126                             });
127                         } // end of afterCreate ( )
128                 };
129                 kindEditor = K.create('textarea[name="bean.taskContent"]', options);
130 
131                 prettyPrint();
132                 
133             });
134             
135             consoleLog('I am ready.');
136             
137     </script>
138     
139      
140     <title>新增 | 修改 | 回复</title>
141     
142 </head>
143 <body style="padding : 5px ; "><!-- 
144         
145         
146     <form name="example" method="post" action="../task!insert.action">
147                    <textarea id="taskContent_textArea" name="bean.taskContent" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;">
148                123456
149            </textarea>
150            
151         <br />
152         <input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)
153     </form> -->
154     
155     <div id="data_panel">
156         
157     </div>
158     <form id="task_form" name="example" method="post" action="task!insert.action" >
159     
160         <span style="color: gray ; "><b>主题 : </b></span>
161         <input type="text" autocomplete="off" class="x-form-field x-form-required-field x-form-text  " value="(必填内容)" 
162                         name="bean.taskTitle" size="1"  style="width: 660px ; margin: 10px 5px 10px 5px ; ">
163         
164         <textarea name="bean.taskContent" cols="100" rows="8" style="width: 100% ; height:350px;visibility:hidden;"></textarea>
165 
166         <br />
167         <input type="button" name="button" onclick="fnc.formSubmit();" value="提交内容" />
168         <span style="color: gray ; "> ( 提交快捷键: Ctrl + Enter )</span>
169         <p>指派任务:<input id="number" name="bean.userNumber" size="50" /><span style="color: gray ; "> ( 输入指派人number 用,分隔; )</span></p>
170         <p>涉及的技术 :<input id="tag" name="bean.tagNumbers" size="50" /><span style="color: gray ; "> ( 输入技术categoryNumber 用,分隔; )</span></p>
171         <p style="border-top: 1px dotted gray ; text-align : right ; ">
172             userName:<%= request.getRemoteUser() %> |
173             originId : <%= originId %> |
174             parentId :<%= parentId %> |
175             <a href="../j_spring_security_logout">退出登录</a></p>
176     </form>
177     <div style="color : gray ;">
178     <h3>说明:</h3>
179     <ol>
180         <li>如果 uri 中无参数 ,表示新插入一条记录</li>
181         <li>如果 uri 参数中 parentId > 0 & rootId > 0 &parentNodePath != ''或者 !=null ,表示 回复(评论/备注/留言) </li>
182         <li>如果 uri 参数中 originId > 0 ,表示修改 </li>
183     </ol>
184     </div>
185 </body>
186 </html>

 

task/new.js

  1 Ext.Loader.setConfig({enabled: true});
  2 
  3  
  4 
  5  
  6 
  7  
  8 
  9 Ext.application({
 10 
 11        name : 'i',// 为应用程序起一个名字,相当于命名空间
 12 
 13       
 14 
 15        controllers : [
 16 
 17                       // 'SearchCtrler','LogGridCtrl'
 18 
 19                       'task.NewCtrl' // 这是文件名
 20 
 21                       ] , // 声明所用到的控制层
 22 
 23        // controllers : ['SearchCtrler'] , // 声明所用到的控制层
 24 
 25       
 26 
 27        launch : function() {// 开始
 28 
 29              
 30 
 31               consoleLog('2013.11.01 13:48') ;
 32 
 33              
 34 
 35               Ext.create('i.view.task.NewFormView') ;
 36 
 37              
 38 
 39               Ext.create('Ext.Button', {
 40 
 41                   text: 'Click me',
 42 
 43                   renderTo: Ext.getBody(),
 44 
 45                   handler: function() {
 46 
 47                       // alert('You clicked the button!');
 48 
 49                   Ext.create('i.view.task.NewWindowView').show( ) ; // 这个控制代码应该写在 controller 下
 50 
 51                   }
 52 
 53               });
 54 
 55              
 56 
 57 //           Ext.create('Ext.container.Viewport', {
 58 
 59 //            layout: 'fit',
 60 
 61 //            items: [
 62 
 63 //                {
 64 
 65 //                    xtype: 'SearchGridView'
 66 
 67 //                }
 68 
 69 //            ]
 70 
 71 //        });
 72 
 73  
 74 
 75        }
 76 
 77 });
 78 
 79  
 80 
 81    
 82 
 83  
 84 
 85 var fnc = {
 86 
 87               // 页面表单提交
 88 
 89               formSubmit : function(){
 90 
 91                      // 获取KindEdtor textarea中的值
 92 
 93                      var taskContent =  kindEditor.html();
 94 
 95                      // 使用ExtJS的query获取 Html的DOM ,取值
 96 
 97                      var taskTitle = Ext.query( '#task_form input[name=bean.taskTitle]')[0].value ; // 值 OK
 98 
 99                      // 使用ExtJS的query获取 Html的DON ,取值
100 
101                      var arrayUserNumbers = [] ;
102 
103                      var tagNumbers = [];
104 
105                      if( Ext.getDom('number').value.length!=0 ){
106 
107                             arrayUserNumbers = Ext.getDom('number').value.split(",") ;
108 
109                      }
110 
111                      if( Ext.getDom('tag').value.length!=0 ){
112 
113                             tagNumbers = Ext.getDom('tag').value.split(",") ;
114 
115                      }
116 
117 //                  consoleLog('arrayUserNumbers :');
118 
119 //                  consoleLog(arrayUserNumbers.length );
120 
121 //                  alert(arrayUserNumbers.length);
122 
123                     
124 
125                      // Ajax
126 
127                      Ext.Ajax.request({
128 
129                          url: 'task!insert.action' ,
130 
131                          params: {
132 
133                          'bean.originId' : task.originId , // 原始ID
134 
135                          'bean.parentId' : task.parentId , // 父ID
136 
137                          'bean.latestCommentId' : task.latestCommentId , //
138 
139                          'bean.userName' : task.userName , // 发布者姓名
140 
141                          'bean.rootId' : task.rootId , //
142 
143                          'bean.parentNodePath' : task.parentNodePath , // 父地址
144 
145                          'bean.taskContent' : taskContent , // 内容
146 
147                          'bean.taskTitle' : taskTitle  ,// 标题
148 
149                          'bean.userNumbers' : arrayUserNumbers ,//指派用户Number
150 
151                          'bean.tagNumbers' : tagNumbers     //标签
152 
153                          },
154 
155                          success: function( response ){
156 
157  
158 
159                                    var json = Ext.JSON.decode( response.responseText );
160 
161                                    var taskId = 0 ;
162 
163                                    Ext.Array.each(  json.rowList , function( record, index, itSelf ) {
164 
165                                           // kindEditor.html(record.taskContent);
166 
167                                           consoleLog( record.id ) ;
168 
169                                           taskId = record.id ;
170 
171                                    });
172 
173                           alert("发布成功!");
174 
175                           window.location = "task/item.jsp?id=" + taskId ;
176 
177                          
178 
179                          },
180 
181                          failure: function( resp,opts ) { // 失败
182 
183                                  var respText = Ext.util.JSON.decode(resp.responseText);  
184 
185                                  Ext.Msg.alert('错误', respText.error);  
186 
187                          }  
188 
189                      });
190 
191               } ,
192 
193  
194 
195 //-----------------------------加载 task_info信息---------------------------------------
196 
197  
198 
199               // 获取任务信息
200 
201               getTaskInfo : function(){
202 
203                      // Ajax
204 
205                      Ext.Ajax.request({               
206 
207                             url: 'task!selectList.action' ,
208 
209                             params: {
210 
211                                    'bean.id' : task.originId ,
212 
213                                    'limit' : 1 ,
214 
215                                    'bean.unusefulValue' : ''
216 
217                             },
218 
219                             success: function( response ){
220 
221                                    var json = Ext.JSON.decode( response.responseText );
222 
223                                   
224 
225                                    Ext.Array.each(  json.rowList , function( record, index, itSelf ) {
226 
227                                           Ext.query( '#task_form input[name=bean.taskTitle]')[0].value = record.taskTitle; // 值 OK
228 
229                                           kindEditor.html(record.taskContent);
230 
231                                           task.rootId = record.rootId ;
232 
233                                           task.parentId = record.parentId ;
234 
235                                           task.latestCommentId = record.latestCommentId ;
236 
237                                    });
238 
239                             },
240 
241                             failure: function( resp,opts ) { // 失败
242 
243                                    var respText = Ext.util.JSON.decode(resp.responseText);  
244 
245                                    Ext.Msg.alert('错误', respText.error);  
246 
247                             }  
248 
249                      });
250 
251               }
252 
253                                   
254 
255 }
256 
257 ;
258 
259  
260 
261  
262 
263  
264 
265  
266 
267              
268 
269              
270 
271              
272 
273  
274 
275  
276 
277 var start = function(){
278 
279  
280 
281        // Ext.tip.QuickTipManager.init() ;
282 
283       
284 
285                      // 延时启动
286 
287        if(task.originId > 0){
288 
289               setTimeout( function(){
290 
291                      // fnc.getUserInfo( loginedUser ) ;
292 
293                      fnc.getTaskInfo() ;
294 
295                      }, 500 ) ;
296 
297              
298 
299        }
300 
301       
302 
303 } ; // start
304 
305  
306 
307 Ext.onReady( function () {
308 
309        start() ;
310 
311 });
312 
313  
314 
315  

app/controller/task/NewCtrl.js

  1 /*
  2 商品控制层,
  3 所有逻辑代码都在这里写
  4  */
  5 
  6 Ext.define(    
  7 
  8     'i.controller.task.NewCtrl' ,
  9     
 10     {
 11         extend : 'Ext.app.Controller',
 12         stores : [ 
 13                 // 'LogStore' 
 14             ],
 15         models : [ 
 16                 // 'LogModel' 
 17             ],
 18         views : [ 
 19                 // 'log.SearchGridView','log.SearchFormWinView' 
 20                 // task.NewWindowView
 21                 'task.NewWindowView' // 文件名
 22                 , 'task.NewFormView'
 23             ],
 24         refs : [
 25             {
 26                 ref : 'taskNewWindow_view',
 27                 selector : 'task.NewWindowView'
 28             } ,
 29             {
 30                 ref : 'NewForm', // 为了 setter 和 getter 方法
 31                 selector : 'taskNewFormView' // 这里用别名
 32             } 
 33         ],
 34         init : function() {
 35 
 36             consoleLog( '2013.11.01 13:59' ) ;
 37             consoleLog( this ) ;
 38             
 39             // 创建 Windows (2013.11.01 Livon)
 40             
 41             this.control({
 42                 //弹出搜索框
 43                 'viewport > SearchGridView': {
 44                     afterrender: function( gp ){ // 侦听 SearchGirdView 渲染
 45                         gp.down('button[action=onSearch]').on('click',function(){
 46                             // 侦听 SearchGirdView 工具条上 action=onSearch 的按钮单击事件
 47                             this.showWin();
 48                         },this);
 49                         gp.down('button[action=onNew]').on('click',function(){
 50                             // 侦听 SearchGirdView 工具条上 action=onSearch 的按钮单击事件
 51                             window.open('task/new.jsp');
 52                         },this );
 53                     }
 54                 } ,
 55                 
 56                 'taskNewFormView button[action=onPrePage]' : {
 57                     click : function(){
 58                         consoleLog( '2013.11.01 14:17' ) ;
 59                     }
 60                 } ,
 61                 
 62                 'taskNewFormView button[action=show_selectUserWindow]' : {
 63                     click : function(){
 64                         consoleLog( '2013.11.01 14:47' ) ;
 65                         this.show_selectUserWindow( ) ;
 66                     }
 67                 } ,
 68                 
 69                 // 
 70                 
 71                 'taskNewFormView items[name=SearchByKeyWord]' : {
 72                     focus : function(){
 73                         consoleLog( '2013.11.01 14:23' ) ;
 74                     }
 75                 } ,
 76                 
 77                 
 78                 'taskNewWindowView button[action=ok]' : { // taskNewWindowView 是别名!!!!
 79 //                'NewForm button[action=ok]' : {
 80                     click : function(){
 81                         // this.taskInfo();
 82                         consoleLog( '2013.11.01 15:21' ) ;
 83                         var f = this.getNewForm( ) ;
 84 //                        consoleLog( f ) ;
 85 //                        consoleLog( f.getForm( ) ) ;
 86 //                        consoleLog( f.getForm( ).getValues( ) ) ;
 87                         var v = f.getForm( ).getValues( ) ;
 88                         consoleLog( v.startDate  ) ;
 89                     }
 90                 } ,
 91                 
 92                 '#number' : {
 93                     click : function(){
 94                         consoleLog( '2013.11.01 13:58' ) ;
 95                     }
 96                 }
 97                 
 98             }); // this.control
 99         } // init ( )
100     
101     , show_selectUserWindow : function( ) {
102         Ext.create('i.view.task.NewWindowView').show( ) ;
103     }
104     
105     
106     }) ; // define

app/task/NewFormView.js

  1 /*!
  2 * 搜索表单view层,这里只是一个负责显示的grid,没有逻辑代码
  3 */
  4 consoleLog( this ) ;
  5 
  6 Ext.define('i.view.task.NewFormView' ,
  7     Ext.create('Ext.form.Panel', {
  8     // renderTo : Ext.getBody(),
  9     store: 'SearchStore',
 10     alias : 'widget.taskNewFormView',
 11     // renderTo : 'form_holder_td' ,
 12     renderTo : Ext.getBody() ,
 13     draggable : true ,
 14     title : 'Search Form ',
 15     // height : 180,
 16     width : 480,
 17     collapsible : true ,
 18     bodyPadding : 10,
 19     defaultType : 'textfield',
 20     // layout: 'auto',
 21     url : '', // 提交地址
 22     
 23 
 24     defaults: {
 25         anchor: '100%',
 26         labelWidth: 100
 27     },
 28     
 29     items : [ 
 30                 {
 31                     xtype: 'fieldcontainer',
 32                     fieldLabel: '相关人员',
 33                     combineErrors: true,
 34                     msgTarget : 'side',
 35                     layout: 'hbox',
 36                     defaults: {
 37                         hideLabel: true
 38                     },
 39                     items: [
 40                         {
 41                             xtype     : 'textfield',
 42                             name      : 'startDate',
 43                             fieldLabel: 'Start',
 44                             margin: '0 5 0 0',
 45                             flex: 1,
 46                             allowBlank: false
 47                         },
 48                         {
 49                             xtype:'button',  
 50                             text: 'Select',  
 51                             // width:50 , 
 52                             action : 'show_selectUserWindow'
 53                         }
 54                     ]
 55                 },
 56                 
 57                 {
 58         fieldLabel : 'SearchByName',
 59         name : 'SearchByName'
 60     }, {
 61         fieldLabel : 'SearchByTag',
 62         name : 'SearchByTag'
 63     }, {
 64         fieldLabel : 'Search By Key Word',
 65         name : 'SearchByKeyWord'
 66     } ,
 67     {
 68 
 69         xtype : 'fieldcontainer',
 70         // layout: 'hbox',
 71         combineErrors: true,
 72         msgTarget: 'side',
 73         fieldLabel: 'Full Name',
 74         defaults: {
 75             hideLabel: true
 76         },
 77         items : [
 78             {
 79                 //the width of this field in the HBox layout is set directly
 80                 //the other 2 items are given flex: 1, so will share the rest of the space
 81                 width:          65,
 82 
 83                 xtype:          'combo',
 84                 mode:           'local',
 85                 value:          'mrs',
 86                 triggerAction:  'all',
 87                 forceSelection: true,
 88                 editable:       false,
 89                 fieldLabel:     'Title',
 90                 name:           'title',
 91                 displayField:   'name',
 92                 valueField:     'value',
 93                 queryMode: 'local',
 94                 store:          Ext.create('Ext.data.Store', {
 95                     fields : ['name', 'value'],
 96                     data   : [
 97                         {name : 'Mr',   value: 'mr'},
 98                         {name : 'Mrs',  value: 'mrs'},
 99                         {name : 'Miss', value: 'miss'}
100                     ]
101                 })
102             },
103             {
104                 xtype: 'textfield',
105                 flex : 1,
106                 name : 'firstName',
107                 fieldLabel: 'First',
108                 allowBlank: false
109             },
110             {
111                 xtype: 'textfield',
112                 flex : 1,
113                 name : 'lastName',
114                 fieldLabel: 'Last',
115                 allowBlank: false,
116                 margins: '0'
117             }
118         ]
119     }
120     
121     
122     ],
123     buttons : [ {
124         text: 'prePage',  
125         action : 'onPrePage'
126     }, {
127         text: 'nexPage',  
128         action : 'onNexPage'
129     }, {
130         text : 'Search',
131         action: 'onSubmit'
132     } ]
133 })
134 );

app/task/NewWindowView.js

 1 /**
 2 这里只是一个负责显示的窗口
 3 */
 4 
 5 Ext.define(
 6         'i.view.task.NewWindowView', 
 7         
 8         {
 9     extend: 'Ext.window.Window',
10     alias : 'widget.taskNewWindowView', // 别名似乎没用 !?
11     title : '测试',
12     autoShow: false,
13     height: 200,
14     width: 300,
15     items : [
16 //             Ext.create('i.view.task.NewFormView')
17 
18             Ext.create('Ext.form.Panel', {
19                 // draggable : true ,
20                 title : 'Search Form '
21             })
22     
23     
24              ] ,
25     initComponent: function() {
26         this.buttons = [
27             {
28                 text: '点我改变标题',
29                 scope: this,
30                 action: 'ok'
31             } ,
32             {
33                 text: '关闭',
34                 scope: this,
35                 handler: function(){
36                     this.close() ;
37                     console.log( 'clicked' ) ;
38                 }
39             } ,
40             
41 //            Ext.create('search.view.goods.CloseWindowButtonView')
42             
43         ];
44         this.callParent( arguments ) ;
45     }
46 });

 

转载于:https://www.cnblogs.com/livon/p/3402365.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值