Ext基础

最新推荐文章于 2017-04-17 13:50:30 发布

原创最新推荐文章于 2017-04-17 13:50:30 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext

Ext 专栏收录该内容

9 篇文章

订阅专栏

1.支持命名空间

Ext.namespace("Ext.dojochina");
Ext.dojochina.HelloWorld = Ext.emptyFn();
//命名空间别名
Dc=Ext.dojochina;
PN=Ext.dojochina.Person;

2.Ext类继承

Ext.extend(Ext.dojochina.Student,Ext.dojochina.Person,{job:"学生"});
//类实例方法重写 
Ext.extend(Ext.dojochina.Teacher,Ext.dojochina.Person,
		{print:function(){}}
)

3.字符串格式化

String.format("姓名：{0},性别：{1}",this.name,this.sex);

4.页面加载完后执行

Ext.onReady(function(){
})

5.Ext 属性

（1）事件机制: Ext.util.Observable
（2）Ext的公共属性前有read-only,表示只读，设置不起作用。
（3）Ext的配置项是指在构造函数内指定属性值进行配置构造。
例：Ext.Button({text:'确定'});
（4）renderTo:将当前对象所生成的Html对象存放进指定的对象中。
（5）handler:指定一个函数句柄，在默认事件触发时调用，此时默认事件为click.
（6）listeners:这个是在对象初始化之前，就将一系列事件进行定义的手段。
例：listeners:{"click":function(){
}};

6.Ext布局
Ext.layout.FormLayout，只有在此布局下才能正确显示文本框的标签名。
7.数据存储机制

Ext.data.JsonStore({
	data:[{},{}],
	fields:["","",""]//fields对上面的data对象进行解析
})
store.getCount();//数据集个数
store.getAt(1).data;//指定索引的数据
store.filter(“type”,”支出”);//数据过滤，只显示类型为支出的记录
store.clearFilter();//清除过滤条件，显示全部。
Ext.util.JSON.encode(store.getAt(1).data);//对指定对象解析
JsonStore里面的data也可用远程代理取得，需显示调用store.load();
例： proxy:new Ext.data.HttpProxy({
	url:""
})
//本地数组数据存储，字段与data应一一对应。
例：Ext.data.SimpleStore({
	data:[["","",""],[""],[""],[""]],
	fields:["","",""]
})
SimpleStore也支持远程代理，将data用url取代，url返回的数据也应是Array的形式。

8.Store数据解析
（1）构建本地数据和解析的store

例：var store = new Ext.data.Store({
	data:[['男'],['女']],
	reader:new Ext.data.ArrayReader({},
		  Ext.data.Record.create(["sex"])
	)
})

（2）构建本地Json数据和解析的store

例：var store = new Ext.data.Store({
	data:[{sex:'男'},{sex:'女'}],
	reader:new Ext.data.JsonReader({},
		Ext.data.Record.create(["sex"])
	)
})

9.表格组件GridPanel
1.外框架 2.列定义 3.选中机制 4.数据源

例：var grid = new Ext.grid.GridPanel({
	   store:{},
	   cm:new Ext.grid.ColumnModel([
			 {header: 'ID ',dataIndex:'uuid',
			  width:130,sortable:true,hidden:true}
		]),
	    sm: new Ext.grid.RowSelectionModel({singleSelect:true})
	});

如果grid中的store使用代理机制，应设autoLoad为true.
columnModel中如果要指定某列不能过滤或排序，设置menuDisabled为true.
如果要设置gridPanel中列不可拖动，则应设置Panel中enableColumnMove为false.
如果要将gridPanel中的数据显示在指定的FormPanel中，可以在选中事件中，
调用FormPanle的loadRecord();

10.可编辑面板

例：var grid = new Ext.grid.EditorGridPanel({
	store:store,
	cm:[{header: 'ID ',dataIndex:'uuid',width:130,
		 editor:new Ext.form.TextField({})
	  }]
})
var m = store.modified;//被修改的记录
m[0].modified //第一条被修改记录的修改字段
store.commitChanges();//仅提交修改的数据提交到后台。
grid.startEditing(0,0)://第0行，第0列开始修改。

11.Ext组件化编程

 PersonViewFormPanel = Ext.extend(Ext.form.FormPanel,{
	constructor:function(){
	 PersonViewFormPanel.superclass.constructor().call(this,{
	// 此处与构建FormPanel中构造函数配置一样
	 })
   }
})

12.表单字段验证

例：Ext.apply(Ext.form.VTypes,{
	"age":function(_v){
		var _age = parseInt(-v);
		if(-age<200) return true;
		return false;
	},"ageText":"该输入项必须为年龄格式"
})
//然后在表单中的字段中指定vtype = "age".

13.数据提交后台

例：Ext.Ajax.request({
	url:'',
	paramers:{},
	success:function(){},
	failure:function(){}	
})

14. Form组件

取值时可用getForm().findField(“fieldname”).getValue();

15. 日期控件（时间）

例：xtype:"timefield",
fieldLable:'时间',
name:'time',
increment:10,//以10分钟为一个单位
format:"H:i:S"

16.Dom元素查询（Ext.DomQuery）

例：// 检索head下script元素
var array = Ext.DomQuery.select("head/script");//或head>script
for(var i=0;i<array.length;i++){
	alert(array[i].outHTML);//outHTML为元素的Html元素表示
}
//查找span的父元素或祖父元素为div的元素
Ext.DomQuery.select("div span");
("div+span") //查找div的直接兄弟结点span
("div[id]") //查找div下有id节点的
("div[id]=extjs") //查找div下id名称为extjs的节点
("div:first-child") //查找div父节点的第一个子节点
("div:last-child") //查找div父节点的最后一个子节点
("div:nth-child(2)") //查找div节点的第二个div节点
Ext.getDoc();//获得ext的Dom节点树
//创建元素结点
Ext.DomHelpe.append(Ext.getBody(),{
	tag:"div",html:"测试元素"
})

17.树型面板

例：var tree = new Ext.tree.TreePanel({
	el:"tree",
	loader:new Ext.tree.TreeLoader({
		dataUrl:""
	}),root:new Ext.tree.AsyncTreeNode({
		text:"根结点"
	})
})
树型结构主要根据Json数据构造
leaf:true //为叶子结点（在json中构造，复选框也是在json中构造）

//本地数据构建树
例：var tree = new Ext.tree.TreePanel({
	el:"tree",
	root:new Ext.tree.AsyncTreeNode({
		text:'载入结点',
		children:[{text:'硬件',leaf:true},
			{text:'软件',children:[{},{}]}]//children可嵌套多级
})
})

18.菜单构建（在树面板中构建）

var menu = new Ext.menu.Menu({
	items:[{text:'添加'},
	       {text:'修改'},
	       {text:'删除'}]
})
右击树型面板，显示菜单可添加contextmenu事件，
例：listeners:{
	"contextmenu":function(_node,_e){
		menu.showAt(_e,getXY());//在当前单击事件的坐标处显示菜单
		menu["currentNode"]=_node;//将单击时选中的节点赋值给菜单当前结点，以进行相关操作
	}
}
// 修改树型结点
menu["currentNode"].setText("新名称");
// 删除树型结点
menu["currentNode"].remove();
// 添加树型结点
menu["currentNode"].appenChild(
	new Ext.tree.AsyncTreeNode({
		Text:"新结点",
		id:"",
		leaf:true // 在添加节点之前可先将menu["currentNode"].leaf=false,才可重复创建结点
	})
)

注：在添加结点时需将TreeLoader的clearOnLoad设置为false,
添加完节点需将当前结点展开，menu["currentNode"].expand();