extjs2.2记1

1、查找到extjs2.2并下载。

2、安装智能提示（有vs2008、Adobe Dreamweaver、eclspse）

　　我用Adobe Dreamweaver（查找安装dw_cs3_chs、em18_install.exe、spketdwcs-ext-2.2.mxp 这三个文件就可以了）

调试工具用fire box+fire bug

3、建用户的框架：(登录窗口略)

<1>在vs2008中新建2个文件：main.aspx和main.js

<2>main.aspx中主要代码：

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script type="text/javascript" src="extjs/source/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript" src="main.js"></script>

<3>在main.js中主要代码：

Ext.BLANK_IMAGE_URL = "extjs/s.gif";//以免找网上地址
Ext.QuickTips.init();//tip提示
Ext.lib.Ajax.defaultHeaders += ";charset=utf-8";//编码方式
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());//状态数据可以保存在cookie中

//用Ext.Viewport生成north,west,center3个窗口。

<4>north显示为一个图片和1个退出链接。

a.main.aspx中加入:

<div id="top" >
<div id="bg" style="height:60px;background-image:url(images/bg.gif);"></div><a href="">退出</a></div>

b.main.js中加入：

var top=new Ext.BoxComponent({el:"top",height:80});

var north=new Ext.Panel({border:false,region:"north",height:80,items:[top]});

<5>west中为1个panel加入1个树

var west= new Ext.tree.TreePanel({
    region:"west",title : "功能",containerScroll : true,autoScroll : true,width : 200,
    listeners:
    {
        "click":function(node,event)
        {
            if (node.isLeaf())
            {
                event.stopEvent();
                fun(node,grid);//调用函数在center中加入tabpanel
            }          
        }
    }
})

var root = new Ext.tree.TreeNode({id : "0",text : "测试",leaf : false});
var tree_t1 = new Ext.tree.TreeNode({id : "t1",text : "test1",leaf : true});
var tree_t2 = new Ext.tree.TreeNode({id : "t2",text : "test2",leaf : true});
root.appendChild([tree_t1,tree_t2]);
left.setRootNode(root);

//当然，这个树可以强化成以下情况：

var root=new Ext.tree.AsyncTreeNode({...})//从数据库中取数

var treenode=new Ext.tree.TreePanel({root:root...})//生成树

var west=new Ext.Panel({layout:"accordion"...})//生成多个可折叠的树

<6>中间center全用tabpanel

var center = new Ext.TabPanel({region:"center",items : [{title : "首页",html : "欢迎使用",id : "index"}]});

<7>生成viewport

Ext.onReady(function(){
    var vp = new Ext.Viewport({layout : "border",items : [north,west,center] });    
    center.setActiveTab("index");
    left.expandAll();   
})

 

fun(node,grid){

　　var tab = center.getItem(node.attributes.id);

　　if(tab){center.setActiveTab(id);

　　}else{var tab =center.add({id:id,xtype:"panel",title:node.text,closable:true,item[grid]

}//grid为传入的新的gridpanel