extjs4.1 grid 分組 (對象是一個object)以及其它。

前幾天做分組,老是遇到問題,後來經過測試,找到了解決方法。


model中:

Ext.define('Sharera.model.community.Topic', {
    extend: 'Ext.data.Model',
    idProperty: 'id',
    fields: [
		        {name:'id',type:'long'},
			{name:'title',type:'string'},
		        {name:'community.name',type:'string'},
		        {name:'community.id',type:'long'},
		        {name:'community',type:'object'},
			{name:'creator',type:'object'},
			{name:'participator',type:'object'},
			{name:'created',type:'string'},
			{name:'modified',type:'string'},
			{name:'enabled',type:'boolean'}
    ]
});

store:

/**
 * The com.sharera.web.Topic store definition
 */
Ext.define('Sharera.store.community.Topic', {
    extend: 'Ext.data.Store',
    autoLoad: false,
    autoSync: false,
    fields: ['id','title','community','creator','participator','created','modified','enabled'],
    baseUrl : context+'api/topic',
    sorters: {property: 'created', direction: 'DESC'},
    groupField: 'community.name',  
    proxy: {
        type: 'rest',
        url: context+'api/topic',
        model: 'Sharera.model.community.Topic',
		reader : {
			type : 'json'
		},
		writer : {
			type : 'json'
		},
		listeners : {
			exception : function(proxy, response, operation) {
				if (operation) {
					Ext.Sharera.error("錯誤",operation.error.statusText);					
				} else {
					// May be a proxy error...
				}
			},
			load:function(store,records,successFull,o){
        		store.sort([{property : 'community',direction: 'ASC'}]);
        }
		}
    },
    setUrlforForm : function(id) {
    	if(id==undefined || id==null)
    		this.proxy.url = this.baseUrl;
    	else
    		this.proxy.url = this.baseUrl + "/" + id + ".json";
	},
	setUrlforQuery : function(name) {
		if (name == null)
			name = 'list';
		this.proxy.url = this.baseUrl + "/" + name + ".json";
	},
	setUrlforQuery4Ext : function(name) {
		if (name == null)
			name = 'listext';
		this.proxy.url = this.baseUrl + "/" + name + ".json";
	}
});


grid中的代碼:



     //插件添加
     features: [{
        ftype: 'groupingsummary',
        groupHeaderTpl: '<font color=blue>{[values.rows[0].data.community.name]}</font> (共:{rows.length}個話題)',
        hideGroupedHeader: true,
        enableGroupingMenu: false
     }],
               header:'操作',
               align: 'center',
               xtype:'actioncolumn',               
               width:70,
               items: [{
            	   iconCls : 'icon-checkin-action',
                   tooltip: '查看',
                   handler: function(grid, rowIndex, colIndex, item) {                   	 
                      var rec = grid.getStore().getAt(rowIndex);
					  var formWin= Ext.create("Sharera.view.community.Topic.FormDisplay",{bid:rec.data.id});
				      var formObj=formWin.down('form').getForm();
				      var panel=formWin.down('panel[ref=discussion]');
 					  var fstore = Ext.create("Sharera.store.community.Topicform");                					      			      
                	  fstore.setUrlforForm(rec.data.id);
                	  fstore.load(
                			{
                        	    scope: this,
                        	    callback: function(records, operation, success) {
                        	    	formObj.loadRecord(records[0]);
                        	    	var parValue=new Array();
                        	    	var participators=records[0].data.participator;
                        	        var isUse;
                        	        if(records[0].data.enabled){
                        	        	isUse='是';
                        	        }
                        	        if(!records[0].data.enabled){
                        	            isUse='否';
                        	        
                        	        }
                        	    	for(var i=0;i<participators.length;i++){
                        	    		parValue.push(participators[i].user.fullname);
                        	    	}
                        	    	formObj.findField('community').setValue(records[0].data.community.name);
                        	    	formObj.findField('creator').setValue(records[0].data.creator.fullname);
                        	    	formObj.findField('participator').setValue(parValue.join(','));
                        	    	formObj.findField('enabled').setValue(isUse);
                        	    	
                        	    	var topicId=records[0].data.id;
                        	    	Ext.Ajax.request({
                                    	url:context+'api/discussion/topic/'+topicId+'.json',
                                    	method:'get',
                                    	success:function(response, opts){
                                             var  discussions=eval('('+response.responseText+')');
                                             var checkLength=0;
                                             panel.setTitle('討論管理:(共有'+discussions.length+'條討論,顯示'+discussions.length+'條,已閱'+0+'條)');
                                             var containers=new Array();
                                             for(var i=0;i<discussions.length;i++){
                                             	   var id=discussions[i].id;
                                                   var container=Ext.create('Ext.panel.Panel',{
                                                         id:discussions[i].id,
                                                         cls: 'window-bord',
                                                         width:'95%',
                                                         border: 0,
                                                         padding:'20',
                                                         bodyStyle: 'padding-bottom:15px;background:#eee;',
                                                         html: '<p>  '+discussions[i].content+'</p><br>  ' +discussions[i].creator.fullname+'  '+discussions[i].created
                                                   });
                                                   container.add({
								     	      	  	       xtype:'container',
								     	      	  	       width:'100%',
								     	      	  	       padding:'5',
								     	      	  	       layout: {
														        type: 'hbox',
														        pack: 'end' , 
														        align: 'stretchmax' 
														   },
														   items:[{
														 	     xtype:'button',
														         text:'禁用',
														         ref:'forbidden',
														         check:false,
		                                                         handler: function(b) {
															         Ext.MessageBox.confirm('請確認', '您確認要禁用該討論嗎?',function(btn){
										                        		 if(btn=='yes'){
										                                    Ext.Ajax.request({
										                                    	headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"},
										                                    	url:context+'api/discussion/check/'+id+'.json',
										                                    	method:'put',
										                                    	success:function(response, opts){
										                                    		 b.hide();
										                                    		 var useButton=b.ownerCt.down('button[ref=use]');
										                                    		 useButton.show();
										                                    		 useButton.check=true;
										                                    		 if(b.check){
										                                    		     useButton.setText('禁用(已閱)');
										                                    		 }else{
										                                    		 	 checkLength++;
										                                    		 }
										                                    		 panel.setTitle('討論管理:(共有'+discussions.length+'條討論,顯示'+discussions.length+'條,已閱'+checkLength+'條)');
										                                    	     panel.removeBodyCls()
										                                    		 panel.addBodyCls('background:#196666');
										                                    	     Ext.Sharera.msg("成功",'討論刪除成功');
										                                    	},
										                                        failure:function(response, opts){
																					Ext.Sharera.error("錯誤",'討論刪除失敗');									
										                                        }
										                                    }); 
										                        		 }
										                             });
															     }
														   },{
														 	     xtype:'button',
														         text:'已禁用',
														         ref:'use',
														         check:false,
		                                                         iconCls : 'icon-cancel-action',
		                                                         handler: function(b) {
															         Ext.MessageBox.confirm('請確認', '您確認要啓用該討論嗎?',function(btn){
										                        		 if(btn=='yes'){
										                                    Ext.Ajax.request({
										                                    	headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"},
										                                    	url:context+'api/discussion/check/'+id+'.json?type=setusable',
										                                    	method:'put',
										                                    	success:function(response, opts){
										                                    		 b.hide();
										                                    		 var fb=b.ownerCt.down('button[ref=forbidden]');
										                                    		 fb.show();
										                                    		 fb.check=true;
										                                    		 fb.setText('禁用(已閱)');
										                                    	     Ext.Sharera.msg("成功",'討論啓用成功');
										                                    	},
										                                        failure:function(response, opts){
																					Ext.Sharera.error("錯誤",'討論啓用失敗');									
										                                        }
										                                    }); 
										                        		 }
										                             });
															     },
															     listeners:{
															         mouseover:function(view){
															               view.setIconCls('icon-tick');
															               view.setText('啓用');
															         },
															         mouseout:function(view){
															         	   if(view.check){
															         	   	 view.setIconCls('icon-cancel-action');
															                 view.setText('已禁用');
															         	   }
															               
															         }
															     }
														   
														   }],
														   listeners:{
														        render: function(view){
														              var self=view;
														              var useButton=view.down('button[ref=use]');
														              useButton.hide();
														        }
														   }
														   
								     	      	  	  });
                                                   containers.push(container);
                                             }
                                             panel.add(containers);
                                    	},
                                        failure:function(response, opts){
											Ext.Sharera.error("錯誤",'話題禁用修改失敗'+message);									
                                        }
                                    });
                        	    }
                			}
                	  );		
                   }
              },{
            	   iconCls : 'icon-cancel-action',
                   tooltip: '禁用該話題',
                   handler: function(grid, rowIndex, colIndex, item) {
                         var id=grid.getStore().getAt(rowIndex).data.id;
                   	     var store=grid.getStore();
                   	     Ext.MessageBox.confirm('請確認', '您確認要禁用該話題嗎?',function(btn){
                        		 if(btn=='yes'){
                                    Ext.Ajax.request({
                                    	url:context+'api/topic/check/'+id,
                                    	method:'put',
                                    	success:function(response, opts){
                                    	     Ext.Sharera.msg("成功",'話題禁用成功');
                                    		 store.load();                               	
                                    	},
                                        failure:function(response, opts){
											Ext.Sharera.error("錯誤",'話題禁用修改失敗'+message);									
                                        }
                                    }); 
                        		 }
                          });
                   },
                   getClass:function(v,o,r,rowIndex,colIndex,store){
	                 	if(r.data.enabled){
	                 		return 'icon-cancel-action';
	                 	}
	                 	return 'x-hidden'
                   }
              },{
            	   iconCls : 'icon-coins-action',
                   tooltip: '啓用該話題',
                   handler: function(grid, rowIndex, colIndex, item) {
                         var id=grid.getStore().getAt(rowIndex).data.id;
                   	     var store=grid.getStore();
                   	     Ext.MessageBox.confirm('請確認', '您確認要啓用該話題嗎?',function(btn){
                        		 if(btn=='yes'){
                                    Ext.Ajax.request({
                                    	url:context+'api/topic/check/'+id+'?type=enable',
                                    	method:'put',
                                    	success:function(response, opts){
                                    	     Ext.Sharera.msg("成功",'話題啓用成功');
                                    		 store.load();                               	
                                    	},
                                        failure:function(response, opts){
											Ext.Sharera.error("錯誤",'話題啓用失敗'+message);									
                                        }
                                    }); 
                        		 }
                          });
                   },
                   getClass:function(v,o,r,rowIndex,colIndex,store){
	                 	if(!r.data.enabled){
	                 		return 'icon-coins-action';
	                 	}
	                 	return 'x-hidden'
                   }
              }]
         








發佈了59 篇原創文章 · 獲贊 2 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章