extjs学习笔记（基本语法实例代码）

//链接
function showUrl(value){
 	return "<a href='http://"+value+"'target='_blank'>"+value+"</a>";
}
//性别区分（CSS样式添加）
function  showSex(value){
 	if(value == 1){
  		return "<span style='color=red;font-weight:bold;' >红男</span>";
 	}else if(value == 2){
  		return "<span style='color=green;font-weight:bold;' >绿女</span>";
 	}else{
  		return "<span style='color=blue;font-weight:bold;' >请选择</span>";
 	}

}

//自动编号
function rowIndexShow(value,cellmeta,record,rowIndex){
	return rowIndex+1;
}

Ext.onReady(function(){ 
 	//读取二维数组中的数据
 	/**
 	var data=[[1,'EasyJWeb','EasyJF','www.easyjf.com'],
 		[2,'jfox','huihoo','www.huihoo.org'],
 		[3,'jdon','jdon','www.jdon.com'],
 		[4,'springside','springside','www.springside.org.cn']];
 	*/
 	//var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
 
 	//读取一维数组中的数据
 	var data_1=[{id:1,name:'EasyJWeb',organization:'EasyJF',homepage:'www.easyjf.com'}, 
  		{id:2,name:'jfox',organization:'huihoo',homepage:'www.huihoo.org'}, 
  		{id:3,name:'jdon',organization:'jdon',homepage:'www.jdon.com'},
  		{id:4,name:'springside',organization:'springside',homepage:'www.springside.org.cn'} 
 	];
 	//var store=new Ext.data.JsonStore({data:data_1,fields:["id","name","organization","homepage"]});

	//可编译的表格（数据源）
 	var data_2=[{id:1,name:'小王',email:'xiaowang@easyjf.com',sex:1,bornDate:'1991-4-4',homepage:'www.easyjf.com'}, 
  		{id:2,name:'小李',email:'xiaoli@easyjf.com',sex:2,bornDate:'1992-5-6',homepage:'www.huihoo.org'}, 
  		{id:3,name:'小明',email:'xiaoli@easyjf.com',sex:1,bornDate:'1992-5-17',homepage:'www.123.org'},
  		{id:4,name:'小华',email:'xiaoli@easyjf.com',sex:1,bornDate:'1992-6-6',homepage:'www.123456.org'},
  		{id:5,name:'小方',email:'xiaoli@easyjf.com',sex:1,bornDate:'1992-8-12',homepage:'www.1234.org'},
  		{id:6,name:'Jim',email:'xiaoli@easyjf.com',sex:1,bornDate:'1992-5-6',homepage:'www.baidu.org'},
  		{id:7,name:'莉莉',email:'xiaoli@easyjf.com',sex:2,bornDate:'1999-5-6',homepage:'www.google.org'},
  		{id:8,name:'露西',email:'xiaoli@easyjf.com',sex:2,bornDate:'2010-5-6',homepage:'www.51.org'},
  		{id:9,name:'小毛',email:'xiaoli@easyjf.com',sex:2,bornDate:'2011-7-6',homepage:'www.qzone.org'},
  		{id:10,name:'国网',email:'xiaoli@easyjf.com',sex:1,bornDate:'2012-5-6',homepage:'www.sohu.org'},
  		{id:11,name:'省网',email:'xiaoli@easyjf.com',sex:2,bornDate:'2012-11-23',homepage:'www.taobao.org'},
  		{id:12,name:'国调',email:'xiaoli@easyjf.com',sex:1,bornDate:'2012-12-1',homepage:'www.yoku.org'},
  		{id:13,name:'省调',email:'xiaoxiao@easyjf.com',sex:2,bornDate:'2012-12-25',homepage:'www.springside.org.cn'} 
 	]; 
 	var store=new Ext.data.JsonStore({

		data:data_2,

		fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"},"homepage"]

	});
	var sm= new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});
 	var colM=new Ext.grid.ColumnModel([
  		new Ext.grid.RowNumberer(),

		sm,
  		//{header:'自动编号',width:60,sortable:true,renderer:rowIndexShow},
  		{header:"姓名",dataIndex:"name",width:80,sortable:true,editor:new Ext.form.TextField({allowBlank:false})}, 
  		{header:"性别",dataIndex:"sex",width:50,sortable:true,

		editor:new Ext.form.ComboBox({transform:"sexList",triggerAction:'all',lazyRender:true}),renderer:showSex}, 
  		{header:"出生日期",dataIndex:"bornDate",width:120,sortable:true,renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
      		editor:new Ext.form.DateField({format:'Y年m月d日'})}, 
  		{header:"电子邮件",dataIndex:"email",width:120,sortable:true,editor:new Ext.form.TextField({allowBlank:false})},
  		{header:"网址",dataIndex:"homepage",width:150,sortable:true,

		editor:new Ext.form.TextField({allowBlank:false}),renderer:showUrl}

		//sortInfo:{fields:"name",direction:"ASC"}
 	]);
	//record的使用
 	/**
 	var MyRecord =Ext.data.Record.create([
  		{name:'title'}, 
  		{name:'username',mapping:'author'}, 
  		{name:'loginTimes',type:'int'}, 
  		{name:'lastLoginTime',mapping:'loginTime',type:'date'}
 	]);
 	*/
 	//实例一个record对象
 	//var r=new MyRecord({title:"日志标题",username:"easyjf",loginTimes:100,loginTime:new Date()}); 
 	//显示各个属性值
	 //alert(MyRecord.getField("username").mapping); 
 	//alert(MyRecord.getField("lastLoginTime").type);
 	//alert(r.data.username);
 	//alert(r.get("loginTimes"));
 
 
	//从xml文件中读取数据
 	//var store= new Ext.data.Store({

		url:"hello.xml",

		reader:new Ext.data.XmlReader({record:"row"},	["id","name","organization","homepage"])});
 	//设置对应字段属性
 	//var colM=new Ext.grid.ColumnModel([
 	// {header:"项目名称",dataIndex:"name",sortable:true},
 	// {header:"开发团队",dataIndex:"organization",sortable:true},
 	// {header:"网址",dataIndex:"homepage",renderer:showUrl}
 	//);
 
 	var myRecord =Ext.data.Record.create([
  		{name:'name',type:'string'},
  		{name:'email',type:'string'},
  		{name:'sex',type:'int'},
  		{name:'bornDate',type:'date'},
  		{name:'homepage',type:'string'}
 	]);

 
 	/**var tb = new Ext.Toolbar(gridHead,[{
  		text:'添加',
  		handler:function(){
  			var intValue = {name:'',email:'',sex:'',bornDate:'',homepage:''};
   			var p = new myRecord(intValue);
   			grid.stopEditing()
   			store.insert(0,p);
   			grid.startEditing(0,0);
   			p.dirty = true;
   			p.modified = intValue;
   			if(store.modified.indexOf(p) == -1){
     				store.modified.push(p);
   			}
  		}
 	}]);*/ 
 
 	//var grid=new Ext.grid.GridPanel({
 	var grid=new Ext.grid.EditorGridPanel({
  		renderTo:"hello",
  		//title:"中国java开源产品及团队",
  		title:"学生基本信息管理",
  		height:300,
  		width:600,
  		//columns:[{header:"项目名称",dataIndex:"name"},
  		//{header:"开发团队",dataIndex:"organization"},
  		//{header:"网址",dataIndex:"homepage"}],
  		//增加和删除
  		tbar:[{text:'添加',handler:function(){
   			var intValue = {name:'',email:'',sex:'',bornDate:'',homepage:''};var p = new myRecord(intValue);
   			grid.stopEditing();store.insert(0,p);grid.startEditing(0,0);p.dirty = true;p.modified = intValue;
   			if(store.modified.indexOf(p) == -1){store.modified.push(p);}}
   			},
   			{text:'删除',handler:function(){
    				Ext.Msg.confirm('信息','确定要删除?',function(btn){
    				if(btn == 'yes'){
      					var sm1 = grid.getSelectionModel();
      					alert(sm1);
      					var cell = sm1.getSelectedCell();
      					alert(cell[0]);
      					var cord = store.getAt(cell[0]);
      					alert(cord);
      					store.remove(cord);
     				}

			});
   		}}],
  		//删除特定的行
 		 bbar:[{text:"删除第二条记录",handler:function(){store.remove(store.getAt(1));grid.view.refresh();}},
   		//分页
   		new Ext.PagingToolbar({
   			pageSize:6,
   			store:store,
   			displayInfo:true,
   			displayMsg:'',
   			emptyMsg:"没有记录"
   		})],
  		cm:colM,
  		store:store,
  		sm:sm,
  		autoExpandColumn:3,
  		clicksToEdit:1
 	});
 	store.load();
 
 	//var gridHead = grid.getView().getHeaderPanel(true);
 	//alert('1');

});