zoukankan      html  css  js  c++  java
  • 2012/7/27Extjs学习随笔

    ①Ext.data.XmlReader  是XML文档解析器,用于把XML文档数据转换成记录集Record对象。看代码:

    	var record = Ext.data.Record.create([
    		{name:'title'},
    		{name:'username',mapping:'author'},
    		{name:'loginTimes',type:'int'}
    		]);
    	
    	var reader  = new Ext.data.XmlReader({
    		totalRecords:'results',
    		record:'rows',
    		id:'id'
    	},record);
    

     上面的reader可以解析下面的xml文档信息:

    	<topics>
    	<results>2</results>
    	<row>
    	<id>1</id>
    	<title>你好</title>
    	<author>小王</author>
    	<loginTimes>3</loginTimes>
    	</row>
    	<row>
    	<id>2</id>
    	<title>新年好<title>
    	<author>小李</author>
    	<loginTimes>4<loginTimes>
    	</row>
    	</topics>
    

     ② DateProxy与自定义Store

    DataProxy字面解释是数据代理,可理解为数据源,就是需要交给DataReader处理的数据的来源。DataProxy基类由Ext.data.DataProxy定义,在DataProxy基础上,Extjs提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy等三个分别用于从客户端内存读数据,Ajax读取服务器端的数据及从跨域服务器中读取数据的三种实现方式。

    比如像SimpleStore等存储器是直接从客户端的内存数组中直接读取数据,此时就可以直接使用Ext.data.MemoryProxy,而大多数需要从服务器加载的数据直接使用Ext.data.HttpProxy,HttpProxy直接使用Ext.Ajax加载服务器的数据,由于这种请求是不能跨域的,所以要读取跨域服务器中的数据时就需要使用到Ext.data.ScriptTagProxy.

    在实际应用中,除了基本的从内存中读取javacript数组对象,从服务器读取JSON数据,从服务器读取XML文档等形式的数据外,有时候还需要使用其他的数据读取方式。这时候需要创建自定义的DataProxy及Store.

    ③在应用程序中, 我们经常会涉及到要显示或处理树状结构的对象信息,比如部门信息,地区信息,或者是树状的菜单信息,操作系统中文件夹信息等。

    对于传统HTML页面来说,要自己实现数比较困难,需要写很多的javascript,特别是对于基于Ajax异步加载的树来说,不但涉及到Ajax数据加载及树立技术,还需要考虑跨浏览器支持等,处理起来非常麻烦。Extjs提供了现存的树控件,通过这些树控件,可以在B/S应用中快速开发出包含树结构信息的应用。

    A. TreePanel

    基本使用

     树控件由Ext.tree.TreePanel类定义,xtype为treepanel,TreePanel继承自Panel面板。在Extjs中使用树控件其实非常简单,看代码:

    Ext.onReady(function(){
    	//创建一个树根
    	var root = new Ext.tree.TreeNode(
    	{
    		id:'root',
    		text:'树的根'
    	}	
    	);
    	//在树根上创建一个子节点
    	root.appendChild(
    	{
    		id:'c1',
    		text:'树的子节点',
    //		150
    	}	
    	);
    	//创建一个树面板
    	var tree = new Ext.tree.TreePanel(
    	{
    		renderTo:'hello',
    		root:root,
    		200
    	}	
    	);
    });
    

     运行效果图:

    另外,在创建树控件的时候,通过给树指定一个节点加载器,可以用来从服务器端动态加载树的节点信息。看代码:

    Ext.onReady(function(){
    	//创建一个树根
    	var root = new Ext.tree.AsyncTreeNode(
    	{
    		id:'root',
    		text:'树的根'
    	}	
    	);
    	//在树根上创建一个子节点
    
    	//创建一个树面板
    	var tree = new Ext.tree.TreePanel(
    	{
    		renderTo:'hello',
    		root:root,
    		200,
    		loader:new Ext.tree.TreeLoader({url:'treedata.js'})
    	}	
    	);
    });
    

     在treedata.js这个url返回的内容如下:

     [{
    id:1,
    text:'子节点1',
    leaf:true
    },{
    id:2,
    text:'子节点2',
    children:[
    {
    id:3,
    text:'孙子节点',
    leaf:true
    }]
    }]

    。执行上面的程序,可以得到一颗异步加载子节点的树。上面的程序是加载完树的所有节点信息。当然我们也可以实现让每一个节点都支持动态加载的树,只需要在向服务器请求数据的时候,每次服务器端返回的数据只包含子节点,而不用把孙子节点也返回。上面的treedata.js中的内容修改一下:

    [{
    id: 1,
    text: '子节点',
    leaf: false
    }]
    

     该节点通过指定leaf为false(默认情况下为false)说明该节点不是一个叶子节点,其下面还有子节点。

    B. 事件处理

     仅仅把树显示出来还不够,我们一般还需要在点击树节点的时候执行相应的动作,比如打开某一个连接,执行一个函数等,这就需要用到函数处理。看代码:

    Ext.onReady(function(){
    	//创建一个树根
    	var root = new Ext.tree.TreeNode(
    	{
    		id:'root',
    		text:'树的根'
    	}	
    	);
    	//在树根上创建一个子节点
    	var c1 = new Ext.tree.TreeNode(
    		{
    			id:'c1',
    			text:'子节点'	
    		}		
    	);
    	root.appendChild(c1);
    	//创建一个树面板
    	var tree = new Ext.tree.TreePanel(
    	{
    		renderTo:'hello',
    		root:root,
    		200,
    	});
    	tree.on('click',function(node,event){
    		alert('您点击了'+node.text);
    	});
    	c1.on('click',function(node,event){
    		alert('您点击了'+node.text);
    	});
    });
    

     运行效果图:

  • 相关阅读:
    手机获取ip地址
    CoreGraphics 自定义button
    抽奖及背景图片的透明度设置时连着转盘图片也跟着虚幻解决方法
    多个UIcollctionView,返回个数不对错误
    collectionview item 间距
    判断键盘的高度
    orcle 11g 的安装图解
    clone()详解
    isAssignableFrom ,isInstance , Instanceof() 区别
    三元表达式
  • 原文地址:https://www.cnblogs.com/howlaa/p/2611334.html
Copyright © 2011-2022 走看看