gridpanel_gridpanel某一列可编辑和某一列加复选框 - CSDN
精华内容
参与话题
  • EXT GridPanel获取某一单元格的值
  • GridPanel的各项属性总结

    千次阅读 2010-11-26 11:52:00
    1、gridpanel继承了panel,其xtype为Grid,表格的列信息有类Ext.grid.ColumnModel( )定义,表格的数据存储器由Ext.data.Store( ),存储器根据解析的数据不同,可分为JsonStore,SimpleStore,GroupingStore等2、cm...

     

    1、gridpanel继承了panel,其xtype为Grid,表格的列信息有类Ext.grid.ColumnModel( )定义,表格的数据存储器由Ext.data.Store( ),存储器根据解析的数据不同,可分为JsonStore,SimpleStore,GroupingStore等

    2、cm中的列信息包括首部显示文本header,列对应的记录集字段dataIndex,列是否排序sortable,列的渲染函数renderer,宽度width,格式化信息format等

    3、ds可以把任何格式的数据转化成gird可以使用的形式,有两部分proxy和reader,proxy指获取数据的方式,reader是指如何解析这堆数据。这里用Ext.data.MemoryProxy专门解析JavaScript变量的。需要一次store.load进行初始化。远程读取数据使用ScriptTagProxy。

    4、在Ext.data.ArrayReader( {},[

    { name:'id',mapping:2}//说明将序列号这一列改成第三列

    ])

    5、在创建Grid时,可以定义属性enableColumnMove:false和enableColumnResize:false可以禁用grid默认的拖放列和改变列的宽度。

    6、stripeRows:true 实现斑马线效果

    loadMask:true实现读取数据时的遮罩和提示功能,就是出现一个加载的框,但是store.load( )在建立grid之后

    viewConfig:{forceFit:true}使每列自动填充grid,若设置了列的宽度,则会按照比例计算。

    autoExpandColumn:‘descn’ 可以让指定列descn的宽度自动伸展,但必须在cm中指定列中定义id:’descn’,只能指定一列伸展

    在ds中加入sortInfo:{field:’name’, direction:’ASC’} 将按照name这一列正向排序

    7、在ds的reader里设置type:’date’ 和dateFormat:’Y-m-dTH:i:s’,其中type是reader解析时把这一列作为日期类处理,dateFormat是把得到的字符串转换成相应的日期格式,还需要在cm中添加一行配置,配置了renderer属性用于格式化日期格式的数据,renderer:Ext.util.Format.dateRenderer(‘Y-m-d’),还要加上type:’date’属性

    8、Value是单元格的值;cellmeta是单元格的相关属性,主要有id和css;record是这行数据的对象,如果要获取其他列的值,可以通过record.data['id']的方式得到;rowIndex是行号,columnIndex是列号;store是构造表格时传递的ds,也就是说表格的所有数据都可以通过store获得

    9、自动行号的实现可以再cm中添加一行代码,放在最上面一行,new Ext.grid.RowNumberer( )

    10、删除一行,可以创建一个id为remove的按钮,然后用代码Ext.get(‘remove’).on(‘onclick’,function(){

    store.remove(store.getAt(1) );//删除第二行

    Gird.view.refresh();//刷新行号

    })

    11、grid.GridPanel默认的是行选择模型,行选择模型默认的是支持多选的,鼠标点击时按住shift或ctrl键就可以选择多行,如果希望只选择一行,需要在grid中设置sm:new Ext.grid.RowSelectionModel({singleSelect:true}),另外一个选择模型就是CellSelectionModel单元格选择模型,每次只允许选择一个单元格,在EditorGrid里默认使用的就是单元格选择模型。

    12、Var selections=grid.getSelectionModel( ).getSelections( );

    先从grid中获得SelectionModel,再从选择模型中获得当前选中的数据,selecitons.length是选中的记录条数。若果需要判断是否选择了记录,只需要selections.length是否等于0即可。

    注意:tree对象中也有两种选择模型,默认的是DefaultSelectionModel每次只能选择一个节点,另外还有一个MultiSelectionModel,它可以使用ctrl键选择多个节点(注意:不允许使用shift键)

    13、grid.getView( )必须在创建Ext.grid.GridPanel之后调用,它只能获得grid创建好的GridView实例。在viewConfig中设置参数,columnsText,sortAscText,sortDesnText这三个参数分别用来设置表格中每列的下拉菜单中的‘显示的列’,‘升序’,‘降序’这3个部分显示的文字。scrollOffset:30 显示表格右侧滚动条预留的宽度,默认是20px;

    14、若想出现滚动条,则需定义grid高度。

    15、分页工具条用pageSize说明一页显示几条数据,displayInfo是否显示数据信息,displayMsg只有当displayInfo为true时才有效,用来显示有数据时的提示信息,{0},{1},{2}会自动被替换成对应的数据,emptyMsg没有数据时显示的信息。注意用分页工具条时需要将store.load( )在构造grid之后。

    16、若要从本地读取数据,这需要将MemoryProxy改成PagingMemoryProxy

    17、若要进行远程排序,就需要在ds中设置remoteSort:true。

    18、若要对表格进行编辑,需要在cm中增加属性editor:new Ext.grid.GridEditor(new Ext.form.TextField({ allowBlank:false})),还需要将GridPanel改成EditorGridPanel。默认双击单元格才能编辑,可以再grid修改增加属性clicksToEdit:1,表示单击就可以修改。

     

    展开全文
  • 扩展GridPanel

    千次阅读 2008-07-01 13:42:00
    ext的强大是可以看见的,这里我在网上找了一个经过扩展的grid,主要可以实现,分页后保存checkbox的选择状态。代码如下/** * 封装的grid * 功能:分页后仍保持选中状态 * 约定:root为list, totalProperty为total, ...
      ext的强大是可以看见的,这里我在网上找了一个经过扩展的grid,主要可以实现,分页后保存checkbox的选择状态。代码如下
    
    /**
    
     * 封装的grid
    
     * 功能:分页后仍保持选中状态
    
     * 约定:root为list, totalProperty为total, grid的第一列必须为id
    
     */
    
    Ext.namespace('Ext.ux.grid');
    
    
    
    Ext.ux.grid.MyGrid = Ext.extend(Ext.grid.GridPanel,{
    
    	
    
    	/*
    
    	 * true to keep the records selected when you paging
    
    	 * @default(false)
    
    	 * @type: boolean
    
    	 */
    
    	keepSelectedOnPaging: false,
    
    	
    
    	/*
    
    	 * the array to store the record id
    
    	 * @type: array
    
    	 */
    
    	recordIds:new Array(),
    
    	
    
    	/*
    
    	 * set your id Column Name
    
    	 * @default : this.CM_JR_Record[0].dataIndex
    
    	 */
    
    	idColName:'',
    
    	
    
    	/*
    
    	 * set this.store.load url;
    
    	 * @type: string
    
    	 */
    
    	url: '',
    
    	
    
    	/*
    
    	 * show the rowNumber or not
    
    	 * @type: boolean
    
    	 * @default: true
    
    	 */
    
    	rowNumber : true,
    
    	
    
    	/*
    
    	 * set the grid sm,if checkBoxSelection=true,sm=CheckBoxSelectionModel
    
    	 * else sm=RowSelectionModel,default to true;
    
    	 * @type: boolean
    
    	 */
    
    	checkBox: true,
    
    	
    
    	/*
    
    	 * set the grid cm array;
    
    	 * set the JsonReader record;
    
    	 * 
    
    	 * format: [{name:'',header:'',visiable:'',...another cm options},{}],
    
    	 * @name=dataIndex
    
    	 * @visiable: set this record to the cm(grid header) default(true)
    
    	 * @type: array (records)
    
    	 */	
    
    	CM_JR_Record: null,
    
    	
    
    	/*
    
    	 * true to add a bottom paging bar
    
    	 * @defalut: true
    
    	 * @type: boolean
    
    	 */
    
    	pagingBar: true,
    
    	
    
    	/*
    
    	 * config paging bar if pagingBar set true
    
    	 * @type: object
    
    	 * @default: {pageSize: 20,store: this.store,displayInfo: true,
    
    	 *            displayMsg: '当前记录数: {0} - {1} 总记录数: {2}',
    
    	 *            emptyMsg: '<b>0</b> 条记录'}
    
    	 */
    
    	pagingConfig:{
    
               pageSize: 15,
    
    	   store: this.store,
    
    	   displayInfo: true,
    
    	   displayMsg: "显示第 {0} 条到 {1} 条记录,一共 {2} 条",
    
    	   emptyMsg: '<b>0</b> 条记录',
    
    	},
    
    	
    
    	viewConfig:{
    
    		forceFit: true
    
    	},
    
    	
    
    	//private
    
    	initComponent: function(){
    
    		if(this.CM_JR_Record){
    
    			this.init_SM_CM_DS();
    
    		}
    
    		if(this.pagingBar){
    
    			this.init_PagingBar();
    
    		}
    
    		if(this.keepSelectedOnPaging){
    
    			this.init_OnPaging();
    
    		}
    
    		Ext.ux.grid.MyGrid.superclass.initComponent.call(this);
    
    	},
    
    	
    
    	/*
    
    	 * init the grid use the config options
    
    	 * @return: void
    
    	 * @params: none
    
    	 */
    
    	init_SM_CM_DS: function(){
    
    		var gCm = new Array();
    
    		var gRecord = new Array();
    
    		
    
    		if(this.rowNumber){
    
    			gCm[gCm.length]=new Ext.grid.RowNumberer();
    
    		}
    
    		if(this.checkBox){
    
    			var sm = new Ext.grid.CheckboxSelectionModel();
    
    			gCm[gCm.length] = sm;
    
    			this.selModel = sm;
    
    		}
    
    		
    
    		for(var i=0;i<this.CM_JR_Record.length;i++)
    
    		{
    
    			var g = this.CM_JR_Record[i];
    
    			if(g.visiable || g.visiable=='undefined' || g.visiable==null){
    
    				gCm[gCm.length] = g;
    
    			}
    
    			
    
    			gRecord[gRecord.length]={
    
    				name: g.dataIndex,
    
    				type: g.type || 'string' 
    
    			}
    
    		}
    
    	
    
    		//create grid columnModel
    
    		this.cm = new Ext.grid.ColumnModel(gCm);
    
    		this.cm.defaultSortable = true;
    
    		
    
    		//create a jsonStore
    
    		this.store = new Ext.data.Store({
    
    			proxy: new Ext.data.HttpProxy({
    
    				url: this.url,
    
    				method: 'post'
    
    			}),
    
    			reader:new Ext.data.JsonReader({
    
    				totalProperty: 'total',
    
    				root: 'list'
    
    			},
    
    			Ext.data.Record.create(gRecord)
    
    			)
    
    		
    
    		});
    
    		
    
    		
    
    		this.pagingConfig.store = this.store;
    
    		
    
    		if(this.pagingBar){
    
    			this.store.load({params:{start:0,limit:this.pagingConfig.pageSize}});
    
    		}else{
    
    			this.store.load();
    
    		}
    
    		
    
    	},
    
    	
    
    	/*
    
    	 * 创建并初始化paging bar
    
    	 */
    
    	init_PagingBar: function(){
    
    		var bbar = new Ext.PagingToolbar(this.pagingConfig);
    
    		this.bbar = bbar;
    
    	},
    
    	
    
    	init_OnPaging: function(){
    
    		
    
    		this.idColName = this.CM_JR_Record[0].dataIndex ;//默认第一列为ID列
    
    		
    
    		this.selModel.on('rowdeselect',function(selMdl,rowIndex,rec ){
    
    		
    
    			
    
    				for(var i=0;i<this.recordIds.length;i++)
    
    	      	 	{
    
    	      	 		if(rec.data[this.idColName] == this.recordIds[i]){
    
    		      	 		this.recordIds.splice(i,1);		      	 		
    
    		      	 		return;
    
    	      	 		}
    
    	      	 	}
    
    			
    
    	      	 
    
           },this);
    
           
    
           this.selModel.on('rowselect',function(selMdl,rowIndex,rec){
    
           		if(this.hasElement(this.recordIds)){
    
           			for(var i=0;i<this.recordIds.length;i++){
    
            			if(rec.data[this.idColName] == this.recordIds[i]){
    
            				return;
    
            			}
    
            		}
    
           		}	
    
           		
    
          		this.recordIds.unshift(rec.data[this.idColName]);
    
          		
    
           },this);
    
           
    
           this.store.on('load',function(st,recs){
    
           		if(this.hasElement(this.recordIds)){
    
          	    	st.each(function(rec){
    
          	    		Ext.each(this.recordIds,function(item,index,allItems){
    
          	    			if(rec.data[this.idColName] == item){
    
          	    				this.selModel.selectRecords([rec],true);     	    			
    
          	    				return false;
    
          	    			}
    
          	    		},this);
    
          	    	},this);	
    
           		}	
    
           },this);
    
                 
    
    	},
    
    	
    
    	hasElement : function(recIds){
    
    		if(recIds.length > 0)
    
    			return true;
    
    		else
    
    		    return false;
    
    	}
    
    	
    
    }
    
    )
    
    //**************************这是个demo*****************
    
    var CM_JR_Record = [ 
    
                   { 
    
                      dataIndex:"id", 
    
                      visiable: false//不显示,反之为显示
    
                   },{ 
    
                      dataIndex:"accid",
    
                      header:"发布人ID",
    
                      visiable: true
    
                   },{
    
    			        header: '标题',
    
    			        width: 80,
    
    			        dataIndex: 'bt',
    
                        visiable: true
    
    			    }, {
    
    			        header: '发布时间',
    
    			        width: 80,
    
    			        dataIndex: 'fbsj',
    
                        visiable: true
    
    			    }, {
    
    			        header: '发布人员',
    
    			        width: 80,
    
    			        dataIndex: 'fbry',
    
                        visiable: true
    
    			    }, {
    
    			        header: '审核',
    
    			        width: 80,
    
    			        dataIndex: 'sh',
    
                        visiable: true
    
    			    }, {
    
    			        header: '审核人员',
    
    			        width: 80,
    
    			        dataIndex: 'shry',
    
                      visiable: true
    
    			    }, {
    
    			        header: '审核时间',
    
    			        width: 80,
    
    			        dataIndex: 'shsj',
    
                        visiable: true
    
    			    }, {
    
    			        header: '点击数',
    
    			        width: 80,
    
    			        dataIndex: 'snum',
    
                        visiable: true
    
    			    }];
    
    	
    
    	 var myGrid = new Ext.ux.grid.MyGrid({
    
    		      url : '/ecommerce/findAllBulletin.action',          // the store load url (required)
    
    		      CM_JR_Record: CM_JR_Record, //.....(required)
    
    		      rowNumber:true,             //true to add a Ext.grid.RowNumberer,defalut(true)
    
    		      checkBox:true,              //true to add a Ext.grid.CheckBoxSelectionModel,default(true)
    
    		      pagingBar:true,             //true to add a Ext.PagingToolBar,default(true)
    
    //		      pagingConfig:objcet,        //config pagingToolBar if pagingBar is true
    
    		      keepSelectedOnPaging: true, //true to FireEvent when you paging to keep the state of record selected
    
    		      recordIds : new Array() ,   // store seleced ids when keepSelectedOnPaging is true
    
    		      idColName :'id',       //the id column name
    
    		      width : 700, 
    
    		      height: 600, 
    
    		      renderTo: 'editor-grid',
    
    			  tbar: [{
    
    		          id : 'Add',
    
    		          text : ' 新建  ',
    
    		          tooltip : '新建一个表单',
    
    		          iconCls : 'add',
    
    				  pageSize: 15,
    
    		          handler : function(){
    
    		                 ptb_bt1();
    
    		          }
    
    		        },{
    
    		            text: '删除所选',
    
    					iconCls:'remove',
    
    					tooltip : '删除所选数据',
    
    		            handler : function(){
    
                                                   //myGrid.recordIds是一个数组,里面存放选中的checkboxid
    
    						if(myGrid.recordIds.length == 0){
    
    		               		Ext.MessageBox.alert('提示','请选择一条记录!');
    
    		            	}else{
    
    							// 弹出对话框警告
    
    							Ext.MessageBox.confirm('确认删除', 
    
    				    	    	'你真的要删除所选用户吗?', 
    
    				    	    	function(btn){
    
    					    	     if(btn == 'yes') {// 选中了是按钮
    
    					    	     	 // 调用 DWR, 执行结果成功时方删除所有数据
    
    						    	     bulletinService.delBulletin(myGrid.recordIds.toString(), function() {
    
    						    	     		// 更新界面, 来真正删除数据
    
    									 		Ext.Msg.alert("成功","用户数据删除成功!");
    
    											myGrid.recordIds = new Array();
    
    											myGrid.store.load({params:{start:0,limit:15}});
    
    									 });
    
    								 }
    
    								}
    
    							);
    
    						}  
    
    	            }
    
            }]
    
    		});
    
    	
    
    	myGrid.render();
    下载地址如下http://download.csdn.net/source/521174
    展开全文
  • Ext.grid.GridPanel的属性

    2019-07-02 20:51:52
    1、Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:表格...

    1、Ext.grid.GridPanel
         主要配置项:
              store:表格的数据集
              columns:表格列模式的配置数组,可自动创建ColumnModel列模式
              autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0
              stripeRows:表格是否隔行换色,默认为false
      
              cm、colModel:表格的列模式,渲染表格时必须设置该配置项
              sm、selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel
              enableHdMenu:是否显示表头的上下文菜单,默认为true
              enableColumnHide:是否允许通过标题中的上下文菜单隐藏列,默认为true
              loadMask:是否在加载数据时显示遮罩效果,默认为false
              view:表格视图,默认为Ext.grid.GridView
              viewConfig:表格视图的配置对象
      
              autoExpandMax:自动扩充列的最大宽度,默认为1000
              autoExpandMin:自动扩充列的最小宽度,默认为50
              columnLines:是否显示列分割线,默认为false
              disableSelection:是否禁止行选择,默认为false
              enableColumnMove:是否允许拖放列,默认为true
              enableColumnResize:是否允许改变列宽,默认为true
              hideHeaders:是否隐藏表头,默认为false
              maxHeight:最大高度
              minColumnWidth:最小列宽,默认为25
              trackMouseOver:是否高亮显示鼠标所在的行,默认为true
      
          主要方法:
              getColumnModel():取得列模式
              getSelectionModel():取得选择模式
              getStore():取得数据集
              getView():取得视图对象
              reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel ):使用一个新的数据集和列模式重新配置表格组件 


    2、Ext.grid.Column
          主要配置项:
              id:列id
              header:表头文字
              dataIndex:设置列与数据集中数据记录的对应关系,值为数据记录中的字段名称。如果没有设置该项则使用列索引与数据记录中字段的索引进行对应
              width:列宽
              align:列数据的对齐方式
      
              hidden:是否隐藏列,默认为false
              fixed:是否固定列宽,默认为false
              menuDisabled:是否禁用列的上下文菜单,默认为false
              resizable:是否允许改变列宽,默认为true
              sortable:是否允许排序,默认为true
              renderer:设置列的自定义单元格渲染函数
                    传入函数的参数有:
                        value:数据的原始值
                        metadata:元数据对象,用于设置单元格的样式和属性,该对象包含的属性有:
                              css:应用到单元格TD元素上的样式名称
                              attr:一个HTML属性定义字符串,例如'style="color:blue"'
                        record:当前数据记录对象
                        rowIndex:单元格的行索引
                        colIndex:单元格的列索引
                        store:数据集对象
        
              xtype:列渲染器类型,默认为gridcolumn,其它可选值有booleancolumn、numbercolumn、datecolumn、templatecolumn等
      
              editable:是否可编辑,默认为true
              editor:编辑器
      
              groupName:
              emptyGroupText:
              groupable: 


    3、Ext.grid.ColumnModel
          主要配置项:
              columns:字段数组
              defaultSortable:是否进行默认排序,默认为false
              defaultWidth:默认宽度
      
          主要方法:
              findColumnIndex( String col ):根据给定的dataIndex查找列索引
              getColumnById( String id ):取得指定id对应的列
              getColumnCount( Boolean visibleOnly ):取得列总数
              getColumnHeader( Number col ):取得列的表头
              getColumnId( Number index ):取得列id
              getDataIndex( Number col ):取得列对应的数据字段名
              getIndexById( String id ):取得列索引
              getTotalWidth( Boolean includeHidden )
              isCellEditable( Number colIndex, Number rowIndex )
              isFixed()
              isHidden( Number colIndex )
              setColumnHeader( Number col, String header )
              setColumnWidth( Number col, Number width, Boolean suppressEvent )
              setDataIndex( Number col, String dataIndex )
              setEditable( Number col, Boolean editable )
              setEditor( Number col, Object editor )
              setHidden( Number colIndex, Boolean hidden )
              setRenderer( Number col, Function fn ) 


    4、Ext.grid.AbstractSelectionModel
          主要方法:
                lock():锁定选择区域
                unlock():解锁选择区域
                isLocked():当前选择区域是否被锁定
      

    5、Ext.grid.CellSelectionModel
          主要方法:
                clearSelections( Boolean preventNotify ):清除选择区域
                getSelectedCell():取得当前选择的单元格,返回一数组,其格式:[rowIndex, colIndex]
                hasSelection():当前是否有选择区域
                select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] ):选择指定单元格
        

    6、Ext.grid.RowSelectionModel
          主要配置项:
                singleSelect:是否单选模式,默认为false,即可以选择多条数据

          主要方法:
                clearSelections( [Boolean fast] ):清除所有选择区域
                deselectRange( Number startRow, Number endRow ):取消范围内的行选择
                deselectRow( Number row, [Boolean preventViewNotify] ):取消指定行的选择状态
                each( Function fn, [Object scope] ):遍历所有选择行,并调用指定函数。当前被选行将传入该函数中
                getCount():得到选择的总行数
                getSelected():得到第一个被选记录
                getSelections():得到所有被选记录的数组
                hasNext():判断当前被选行之后是否还有记录可以选择
                hasPrevious():判断当前被选行之前是否还有记录可以选择
                hasSelection():是否已选择了数据
                isIdSelected( String id ):判断指定id的记录是否被选择
                isSelected( Number/Record index ):判断指定记录或记录索引的数据是否被选择
                selectAll():选择所有行
                selectFirstRow():选择第一行
                selectLastRow( [Boolean keepExisting] ):选择最后行
                      keepExisting:是否保持已有的选择
                selectNext( [Boolean keepExisting] ):选择当前选择行的下一行
                selectPrevious( [Boolean keepExisting] ):选择当前选择行的上一行
                selectRange( Number startRow, Number endRow, [Boolean keepExisting] ):选择范围内的所有行
                selectRecords( Array records, [Boolean keepExisting] ):选择一组指定记录
                selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] ):选择一行
                      row:行索引
                selectRows( Array rows, [Boolean keepExisting] ):选择多行
                      rows:行索引数组 


    7、Ext.grid.CheckboxSelectionModel
          主要配置项:
                singleSelect:是否单选模式,默认为false,即可以选择多条数据
                checkOnly:是否只能通过点击checkbox列进行选择,默认为false
                sortable:是否允许checkbox列排序,默认为false
                width:checkbox列的宽度,默认为20
      

    8、Ext.grid.RowNumberer
          主要配置项:
                header:行号列表头显示的内容
                width:列宽,默认为23


    9、Ext.grid.GridView
          主要配置项:
                enableRowBody:是否包含行体
                sortAscText:表格标题菜单中升序的文字描述
                sortDescText:表格标题菜单中降序的文字描述
                columnsText:表格标题菜单中列对应的文字描述
                autoFill:是否自动扩展列以充满整个表格,默认为false
                forceFit:是否强制调整表格列宽以适用表格的整体宽度,防止出现水平滚动条,默认为false

          主要方法:
                focusCell( Number row, Number col ):将焦点移到指定单元格
                focusRow( Number row ):将焦点移动指定行
                getCell( Number row, Number col ):取得指定单元格对应的td元素
                getHeaderCell( Number index ):取得指定表头对应的td元素
                getRow( Number index ):取得指定行对应的tr元素
                getRowClass( Record record, Number index, Object rowParams, Store store ):得到附加到表格行上的样式名
                      record:当前行的数据记录对象
                      index:当前行的索引
                      rowParams:渲染时传入到行模板中的配置对象,通过它可以为行体定制样式,该对象只在enableRowBody为true时才生效,可能的属性如下:
                            body:渲染到行体中的HTML代码片段
                            bodyStyle:应用到行体tr元素style属性的字符串
                            cols:应用到行体td元素colspan属性的值,默认为总列数
                      store:表格数据集
                refresh( [Boolean headersToo] ):刷新表格组件
                scrollToTop():滚动表格到顶端

    转载于:https://www.cnblogs.com/DJYBlog/p/3904982.html

    展开全文
  • GridPanel

    2019-04-19 14:33:26
    Extjs的GridPanel创建一个GridPanel Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择、编辑等. 创建一个GridPanel 要使用GridPanel,首先要定义Store,而在创建...

    Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择、编辑等.

    创建一个GridPanel

    要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model:

    //1.定义Model
    Ext.define("MyApp.model.User", {
        extend: "Ext.data.Model",
        fields: [
            { name: 'name', type: 'string' },
            { name: 'age', type: 'int' },
            { name: 'phone', type: 'string' }
        ]
    });
    

    然后创建Store

    //2.创建store
    var store = Ext.create("Ext.data.Store", {
        model: "MyApp.model.User",//指向前面定义的model
        autoLoad: true,//自动加载
        pageSize: 5,
        proxy: {
            type: "ajax",
            url: "GridHandler.ashx",
            reader: {
                root: "rows"
            }
        }
    });
    

    最后才是GridPanel的代码:

    //3.创建grid
    var grid = Ext.create("Ext.grid.Panel", {
        xtype: "grid",
        store: store,
        width: 500,
        height: 200,
        margin: 30,
        columnLines: true,
        renderTo: Ext.getBody(),
        selModel: {
            injectCheckbox: 0,
            mode: "SIMPLE",     //"SINGLE"/"SIMPLE"/"MULTI"
            checkOnly: true     //只能通过checkbox选择
        },
        selType: "checkboxmodel",
        columns: [
            { text: '姓名', dataIndex: 'name' },
            {
                text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
                editor: {
                    xtype: "numberfield",
                    decimalPrecision: 0,
                    selectOnFocus: true
                }
            },
            { text: '电话', dataIndex: 'phone', editor: "textfield" }
        ],
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        listeners: {
            itemdblclick: function (me, record, item, index, e, eOpts) {
                //双击事件的操作
            }
        },
        bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
    });
    

    GridPanel的列

    Extjs GridPanel的列有多种类型,例如:文本列、数字列、日期列、选择框列、操作列等。我们可以通过xtype来指定不同的列类型。
    下面是列的常用配置项:

    • xtype:列类型
    • text:列头显示的文字
    • dataIndex:绑定的字段名,对应Model中的name属性值
    • width:宽度
    • flex:自动适应的宽度
    • sortable:是否可排序,默认为是
    • hideable:是否可隐藏,默认为是
    • locked:锁定列,将列锁定在grid的开头,当grid出现滚动条的时候该属性比较有用。默认为否
    • lockable:是否可锁定,默认为否
    • format:格式化字符串,常用于日期、数字的格式化。日期:‘Y-m-d’;日期时间:‘Y-m-d H:i:s’;数字:‘0,000.00’(带有千位分隔符、保留两位小数)、‘0.00’(保留两位小数),‘0’(不保留小数)
    • renderer:自定义绘制方法,可以是Ext.util.Format中定义好的方法名称,也可以是自定义否
      -function,该方法接收下面的参数:value、metadata、record、rowIndex、colIndex、store、view,并需要一个用来显示的返回值。
    • editor:编辑器,当使用编辑插件的时候才会起作用。

    GridPanel行选择模型(SelectionModel)

    控制Extjs GridPanel行选择模型的两个配置项是selType和selModel。默认情况下,selType为rowmodel,对应的Ext.selection.Model。这种选择模型不会在grid中添加复选框,它通过点击行进行选中,默认为多选“MULTI”。
    如果我们要使用复选框来选择行,我们需要使用下面的配置:

    selType: "checkboxmodel",
    

    然后,我们可以通过selModel来配置selType:

    selModel: {
        injectCheckbox: 0,
        mode: "SIMPLE",     //"SINGLE"/"SIMPLE"/"MULTI"
        checkOnly: true     //只能通过checkbox选择
    },
    

    GridPanel的行选择

    除了界面操作来选中行,我们还可以通过代码来选中行:

    //选择行,并保持其他行的选择状态
    grid.getSelectionModel().select(records, true);
    //选择所有
    grid.getSelectionModel().selectAll();
    //根据row index选择
    grid.getSelectionModel().selectRange(startRow, endRow, true)
    

    GridPanel获取选中行

    获取选中行,仍然需要通过SelectionModel来完成:

    var records = grid.getSelectionModel().getSelection();
    

    GridPanel显示行号

    默认情况下Extjs GridPanel是不显示行号的,我们需要手动添加行号的列,即在之前的columns中添加:

    { xtype: "rownumberer", text: "序号", width:40 },
    

    GridPanel异步加载数据

    Extjs GridPanel的异步加载数据是通过Store来实现的。
    异步加载通常采用ajax代理,例如我们代码中用到的:

    //2.创建store
    var store = Ext.create("Ext.data.Store", {
        model: "MyApp.model.User",
        autoLoad: true,
        pageSize: 5,
        proxy: {
            type: "ajax",
            url: "GridHandler.ashx",
            reader: {
                root: "rows"
            }
        }
    });
    

    服务器端返回的数据格式如下:

    {
        "rows": [
          {
              "name": "Tom",
              "age": 12,
              "phone": "1233455"
          },
          {
              "name": "Jerry",
              "age": 12,
              "phone": "1233455"
          },
          {
              "name": "Sinbo",
              "age": 12,
              "phone": "1233455"
          },
          {
              "name": "Jack",
              "age": 12,
              "phone": "1233455"
          },
          {
              "name": "Johnson ",
              "age": 12,
              "phone": "1233455"
          }
        ],
        "total": 5
    }
    

    GridPanel分页

    当GridPanel中数据量大的时候,我们就需要使用分页了。
    分页的实现由两部来完成,首先是在Store中添加pageSize配置项,用来确定每页显示多少行数据;然后需要为GridPanel添加PagingToolbar。

    1. 在分页参数加上之后,Extjs在执行ajax请求的时候会添加三个参数:

    • page:当前页
    • start:起始行的行号
    • limit:每页数据行数,默认为25;这个参数值就是我们设置的pageSize

    2. GridPanel添加PagingToolbar

    bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
    

    禁止显示列头部右侧菜单

    Extjs GridPanel的列,当我们点击列头的时候,会出现一个菜单,如果我们要禁用这个菜单,可以将每个column定义属性menuDisabled指定为true,代码如下:

    {header: 'Idno', dataIndex: 'idno', width:150,menuDisabled:true}
    

    原博客地址:https://www.cnblogs.com/youring2/p/3998761.html

    展开全文
  • GridPanel方法和属性

    2014-05-19 23:30:14
    主要配置项: store:表格的数据集columns:表格列模式的配置数组,可自动创建ColumnModel列模式autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0stripeRows:表格是否隔行换色,默认为...
  • Extjs GridPanel用法详解

    千次阅读 2018-05-31 10:49:40
    Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择、编辑等。创建GridPanel要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来...
  • GridPanel详解

    2013-03-10 10:46:42
    1、Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:...
  • Extjs中对GridPanel的列排序

    万次阅读 2012-05-03 15:46:27
    ProjectStore = new Ext.data.GroupingStore({ proxy: new Ext.data.HttpProxy({ url: "DATA/ProjectInfo/ProjectInfo.aspx", method: "POST" }), reader: ne
  • Ext 设置panel内部的gridpanel的滚动条

    千次阅读 2016-10-09 15:07:56
    今天被GridPanel的滚动条问题困惑了很久 1、在GridPanel中设置 autoScroll="true" 和autoHeight=“true”和autoWidth=“true”时滚动条不出现 2、在GridPanel中设置autoScroll="true" 和Height=“1152”和Width=...
  • http://532222379.blog.51cto.com/3417264/692524
  • Ext, GridPanel刷新当前页

    千次阅读 2014-06-06 11:36:53
    简单的调用gird的toolbar的方法。 相当于
  • GRIDPANEL动态布局

    千次阅读 2010-11-19 19:11:00
    最近研究了下GRIDPANEL动态布局的方法,网上好像可用的资料比较少,自己研究了下,好像效果还不错,但实际每用到。记录在此,也许以后用得上。 procedure TForm1.DisplayControlGroup(GrpName:string;...
  • [Ext.Net]1.X _德仔铁观音学习笔记整理

    千次阅读 2017-08-11 08:30:03
    1 .配置及简单布局 2.常用组件介绍  2.1 Dropdownlist结合TreePanel (checkbox)  2.2 模拟进度条  2.3 上传文件  2.4 TabPanel基本用法  2.4.1 TabPanel基本用法  2.4.2 控制最多可以打开N个页面 ...
  • EXT.NET GridPanel的清除所有选择行问题

    千次阅读 2015-11-12 10:31:31
    GridPanel的清除所有选择行问题 大家都知道EXT的GridPanel的清除所有的选择.selModel.clearSelections();或者getSelectionModel().clearSelections() 这2个方法都是没有效果的,但是经过我的实践发现有一个方法是...
  • Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择、编辑等。在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPanel,今天我们来介绍一下Extjs中GridPanel...
  • ext gridpanel 隐藏列

    千次阅读 2013-06-05 15:48:22
    ext gridpanel 隐藏列   GridPanel_1.ColumnModel.SetHidden(1, true);
  • ExtJs GridPanel Column 自动换行

    万次阅读 2011-06-07 16:49:00
    ExtJs GridPanel ExtJs GridPanel Column ExtJs GridPanel Column 数据溢出 ExtJs GridPanel Column 自动换行 ExtJs GridPanel 自动换行
  • 在new GridPanel时加这个: viewConfig:{ forceFit: true, // 注意不要用autoFill:true,那样设置的话当GridPanel的大小变化(比如你resize了它)时不会自动调整column的宽度 scrollOffset: 0 //不加这个的话...
  • Delphi 动态创建GridPanel

    2016-06-14 06:41:00
    Delphi 如何动态创建GridPanel procedure TForm12.FormCreate(Sender: TObject); var grdpnl: TGridPanel; lbl: TLabel; img: TImage; begin grdpnl := TGridPanel.Create(self); grdpnl.Parent := pnl1; ...
1 2 3 4 5 ... 20
收藏数 8,527
精华内容 3,410
关键字:

gridpanel