ExtJs 学习笔记1

//model
Ext.define('SectionModel',{
	extend : 'Ext.data.Model',
	fields : [{
		name : 'iiiddd'
	},{
		name : 'hrfname'
	},{
		name : 'num'
	}
	]
});

//声明store
Ext.define('Fssc.claimsupport.SectionStore',{
	extend : 'Ext.data.Store',
	model : 'SectionModel',
	pageSize: 10,
	autoLoad: true,
	proxy : {
		type : 'ajax',
		actionMethods : 'POST',
		url : '../claimsupport/demoQueryAll.action',
		reader : {
			type : 'json',
			root : 'list',
			totalProperty : 'totalCount'
		}
	}
});

//创建查询列表Store
var SectionStore = Ext.create('Fssc.claimsupport.SectionStore');

//列表分页组件
var carTailSectionGrid_pagingToolbar = Ext.create('Fssc.PagingToolbar', {
	store : SectionStore
});

//查询
Ext.define('Fssc.claimsupport.QueryForm',{
	extend : 'Ext.form.Panel',
	title : '查询',
	frame : true,
	bodyCls:'column_container',
	defaultType:'textfield',
	defaults:{
		columnWidth:0.4,
		labelWidth:100,
		margin:'5 10 0 10',
		labelAlign:'right'
	},
	items:[{
		xtype: 'textfield',
    	fieldLabel: 'IIIDDD',
    	name:'iiiddd',
		id:'iiiddd'
	},{
		xtype: 'textfield',
    	fieldLabel: '姓名',
    	id:'hrfname',
		name:'hrfname'    
	}],
	
	buttonAlign : 'center',
	buttons : [{  
		text : '查询',
		cls: 'first_btn',
		handler : function(){ 
			carTailSectionGrid_pagingToolbar.moveFirst();
			}
		},{  
			text : '清空',
			handler : function(){
				queryForm.getForm().reset();
			}
		}]
});
 
//声明查询结果的grid
Ext.define('Fssc.claimsupport.SectionGrid',{
		extend : 'Ext.grid.Panel',
		title : '查询列表',
		frame : true,
		enableColumnHide : false,
		enableColumnMove : true,
		selModel : new Ext.selection.CheckboxModel(),//表格前面的勾选框，当前为复选框
		//clicksToEdit:1,
		store : SectionStore,//类似于一个本地数据存储器,用于提供给panel去显示
		viewConfig : {
			scrolloffset : 20,
			forceFit : true,//true表示依据比例自动智能调整每列以适应grid的宽度
		}, 
		tbar : [ {  
			text : '新增',
			icon : '../images/claimsupport/edit_add.gif',
			//handler : displayAddPanel
		},{
			text : '修改',
			icon : '../images/claimsupport/pencil.png',
			//handler : displayUpdatePanel
		},{
			text : '删除',
			icon : '../images/claimsupport/edit_remove.gif',
			//handler : deleteCarTailSection
		}],
		columns : [
		{
			xtype : 'rownumberer',
			text : '序号',
			width : 50
		},{
			text : 'ID',
			dataIndex : 'iiiddd',
			align : 'left',
			width : 50
		},{
			text : '姓名',
			dataIndex : 'hrfname',
			align : 'left',
			width : 150
		},{
			text : '操作时间',
			dataIndex : 'DemoDate',
			align : 'left',
			flex:1,
			renderer:function(v){
				return Ext.Date.format(new Date(v),'Y-m-d H:m:s');
			}
		}],
		//分页组件添加进去
		constructor : function(config) {
			var me = this, cfg = Ext.apply({}, config);
			me.bbar =carTailSectionGrid_pagingToolbar;
			me.callParent([cfg]);
		}
		
	});

//创建界面
//创建查询列表Grid
var  queryForm = Ext.create('Fssc.claimsupport.QueryForm');
var sectionGrid = Ext.create('Fssc.claimsupport.SectionGrid');

//SectionGrid.addListener('itemdblclick',displayUpdatePanel,this);

Ext.onReady(function() {
	Ext.QuickTips.init();
	Ext.create('Ext.panel.Panel', {
		id : 'T_claimsupport-demo_content',
		cls : "panelContentNToolbar",
		bodyCls : 'panelContentNToolbar-body',
		items : [ queryForm,sectionGrid ],
		renderTo : 'T_claimsupport-demo-body'
	});
})

grid 列根据内容长度自动换行

var temp=Ext.create('Ext.grid.Panel', {
                            title: title.substring(0,10),
                            iconCls: 'icon-grid-list',
                            id:id,
                            forceFit: true,
                            region : 'center',
                            store: repStore,
                            columnLines:true,
                            closable:true,
                            columns: [{dataIndex:'usernam',text:'姓名',align:'center'},{dataIndex:'itemtypename',text:'类型',align:'center'},
                                      {dataIndex:'itemcontent',text:'内容',width:500,renderer: function(value, meta, record) {
                                          meta.style = 'overflow:auto;padding: 3px 6px;text-overflow: ellipsis;white-space: nowrap;white-space:normal;line-height:20px;';   
                                          return value;   
                                     }},{dataIndex:'itemstaname',text:'状态',align:'center'}]

                        });