extjs 问题集锦 好贴 转

Ext分页的时候
load(params:{start:0, limit:10});
start是第几条开始，limit表示取几条。对于分页工具条，它内部会计算start这个数据
然后发到后台。它从上一次的start值加上pageSize的值，做为这次的start的值。但要注意的是，要有正确的页数，不然就会出现小毛病。对于页数，在后台返回的数据中，必须要有记录总数，做为grid的store，让它读取，即 store要有totalProperty属性，它把这个属性的值除以pageSize做为页数。

•  

Ext store中getTotalCount()与getCount()

getTotalCount()返回的是所有的总数
getCount()返回的是当前页的数目
另外 如果用store.add(record);插入一条记录，那么getTotalCount()返回的数值是不会变的，它总返回最初始的总数
getCount则可以返回改变后的数量

Ext window的大小与屏幕匹配

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth


HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)



1.function resize(){  
2. var win =  Ext.fly('窗体对象组件');//获得要调整的窗体，注意这里先用Ext.fly的方式来获取组件

，如果不行再换别的，如getCmp,get等  
3.//然后参考 http://www.javaeye.com/topic/155981 这篇博客，来动态设定组件的大小  
4. 
5.}  
6.window.onresize = resize;  
7.          
8.Ext.onReady(function(){           
9.  resize();  
10.  //.....  
11.} 

Ext.onReady(function(){
formWindow = new Ext.Window({  
                    layout:'fit', 
                    width:480, 
                    height:360, 
                    resizable:true, 
                    closeAction:'close', 
                    plain: true, 
                    maximizable: true, 
                //    minimizable : true,  // 最小化
                    listeners: { 
                        close:function(w){ 
                            //关键部分：关闭窗口前先还原,滚动条才不会消失 
                            w.restore(); 
                        }, 
                        maximize:function(w){     
                            //关键部分：最大化后需要将窗口重新定位，否则窗口会从最顶端开始最大

化                         
                            w.setPosition(document.body.scrollLeft-4,document.body.scrollTop-

4); 
                        } 
                    } 
});
formWindow.show();
})

• 大小: 101.1 KB

•  

 

editorGrid点击图片删除一行

捕捉单元格的单击事件，判断单元格是有图片的那一列的．是这一列的话就执行函数．在函数中间获得当前的ｇｒｉｄ被选中行的行号．然后通过这个行号来删除ｓｔｏｒｅ中的记录．

listeners :{cellclick':function(grid,rowIndex,columnIndex,e){
            if(columnIndex==2){
              var record= grid.getStore().getAt(rowIndex);
               grid.getStore().remove(record);
            }
           }
        }

加入2是图片（打叉）所放的列，那么通过以上就可以做到貌似点击打叉就可以删除掉本行

Ext 组件的doLayout()方法

当某个组件调用add( Ext.Component/Object component ) : Ext.Component
往组件里填新东西的时候，必须在调用doLayout()方法，更新一下布局，才能看的见刚加入的组件。

Ext grid autoExpandColumn

今天在写grid的时候遇到了个问题
写出来的grid老不出效果
后来经高人指点
autoExpandColumn :''
这个属性必须指定的是id
也就是说
在Ext.grid.ColumnModel中
定义了id属性的那一列
{id:'rule_desc',header: "规则描述", width:240, sortable: true, dataIndex:'rule_desc'}

autoExpandColumn :'rule_desc'

PropertyGrid不支持store动态绑定的折中解决办法

官方说PropertyGrid的store属性应该隐去的
在svn里面已经隐去了
但是docs里还有
他们说因为什么原因所以这个只是个隐含属性，我忘记了
折中解决如下:


x.xml

<dataset>
<property><name>x</name><value>1</value></property>
<property><name>S</name><value>2</value></property>
</dataset>



js

var record = Ext.data.Record.create([
    {name: 'name', mapping : "name"},
    {name: 'value', mapping : "value" }
  ]);


  var pstore = new Ext.data.Store({
    url: 'x.xml',
    reader: new Ext.data.XmlReader({record: 'property'}, record),
    autoLoad: true,
    listeners: {
      load: function(store, records){

        PPGsource = {};

        for(var i = 0; i < records.length; i++){
          PPGsource[records[i].get('name')]=records[i].get('value');
        }

        propertyGrid = new Ext.grid.PropertyGrid({
          width:700,
          autoHeight:true,
          frame: false,
          source: PPGsource
        });

                                     propertyGrid.render("x-www.dc9.cn");

      }
    }
  });



真的，用监听的方式就好啦
然后取值用alert(PPGsource[records[0].get('name')]);
或者alert(PPGsource["x"]);


原来只需要定义一下source对象，propertyGrid中属性值改变的时候source对象中的相应值就会发生改变，想要获得propertyGrid的值则仅仅需要直接从这个对象中读取数值即可。


居然是这么简单容易的方法……我花了两天时间到处找这个问题的解决方案，快哭了……

var PPGsource = {
'x' : '1',
's' : '2',
};
propertyGrid = new Ext.grid.PropertyGrid({
width:700,
autoHeight:true,
frame: false,
source: PPGsource
});

要读取的话只需要这样：
alert(PPGsource['x']);

Ext.grid.PropertyGrid value 不可修改

var grid = new Ext.grid.PropertyGrid({
title:'属性表格',
renderTo: 'grid',
width:300,
autoHeight: true,
source: {
"名字":"张三",
"创建时间":new Date(Date.parse('12/15/2007')),
"是否有效":false,
"版本号": .01,
"描述":"descn"

}

});

//可选的。用来控制VALUE是不是可修改的
grid.on("beforeedit",function(e) {
e.cancel = true;
return false;
});

});

Ext grid 若干问题

1.grid.getSelectionModel().getCount() ;//获得当前选中的行数  
2.grid.getStore().getTotalCount();//获得记录总数  
3.grid.getStore().getCount();//获得当前分页的记录总数  
4. 
5.//获得当前鼠标单击的单元格的value  
6.new GridPanel({  
7.   .....  
8.   listeners:{  
9.       cellclick : function(grid, rowIndex, columnIndex, e) {  
10.          var record = grid.getStore().getAt(rowIndex);  // 获得当前行的记录  
11.          var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //获得列名(字段名)  
12.          var data = record.get(fieldName);//再从记录中获得这列的value  
13.          alert('你当前单击的单元格的value是:' + data);  
14.       }  
15.  }})


如何让可编辑grid的单元格如果没有输入值，这个单元格就不会失去焦点

这个你在设置editor的时候给控件加上 allowBlank:false即可,这样就不允许为空了,至于不让单元格失去焦点,你可以再blur事件中让空间focus就可以了,不过不推荐这样做,你如果设置为不能为空,他会提示用户的.否则这样的话会给用户带来不好的体验!


Js代码
1.var colModel = new Ext.grid.ColumnModel([  
2.    {header: "Ticker", width: 60, sortable: true,  
3.           editor : new Ext.form.TextField({allowBlank:false})  
4.        }     
5. ]);


可编辑的grid的单元格如果被编辑后，就会打上标记，有什么方法可以随意控制不要填上这个标记

你可以再修改记录后马上调用Store的 commitChanges() 方法就可以去掉红三角

以上代码都未经过测试
红三角相关

Ext动态grid

我们知道,实现extjs的Grid必须先定义一个ColumnModel,指定列名称、列标题、宽度、对齐方式，然后定义一个Record和Store，指定数据源的字段名、类型，最后定义一个Grid，完整过程的代码类似如下：     // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cmCust = new Ext.grid.ColumnModel([{
           header: "客户编码",
           dataIndex: 'CUSTID',
           width: 70
        }, {
           header: "客户简称",
           dataIndex: 'CUSTSHORTNAME',
           width: 200
        }, {   
           header: "预收金额",
           dataIndex: 'PREPAYMENT',
           width: 100,
           align: 'right',
           renderer: Ext.util.Format.gbMoney
        },{
           header: "应收金额",
           dataIndex: 'PAYMENT',
           width: 100,
           align: 'right',
           renderer: Ext.util.Format.gbMoney
        },{
           header: "实际欠款",
           dataIndex: 'SJQK',
           width: 100,
           align: 'right',
           renderer: Ext.util.Format.gbMoney
        },{
           header: "信用期限",
           dataIndex: 'LICENSEPERIOD',
           width: 100,
           align: 'right'
        },{
           header: "信用额度",
           dataIndex: 'LICENSEMONEY',
           width: 100,
           align: 'right',
           renderer: Ext.util.Format.gbMoney
        }]);

    // by default columns are sortable
    cmCust.defaultSortable = true;

    // this could be inline, but we want to define the order record
    // type so we can add records dynamically
    var cust = Ext.data.Record.create([
           {name: 'CUSTID', type: 'string' },
           {name: 'CUSTSHORTNAME', type: 'string'},
           {name: 'PREPAYMENT', type: 'float'},
           {name: 'PAYMENT', type: 'float'},
           {name: 'SJQK', type: 'float'},
           {name: 'LICENSEPERIOD', type: 'float'},
           {name: 'LICENSEMONEY', type: 'float'}
      ]);

    // create the Data Store
    var dsCust = new Ext.data.Store({
        // load using HTTP
        proxy: new Ext.data.HttpProxy({url: '../getCustList.do'}),
       
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.DynamicXmlReader({
               // records will have a "customer" tag
               record: 'table',
               totalRecords: 'records'
           }, cust)
    });

var gridCust = new Ext.grid.DynamicGrid( 'customer-grid', {
        ds: dsCust,
        cm: cmCust,
        selModel: new Ext.grid.RowSelectionModel(),
        enableColLock:false,
        loadMask: true,    });

gridCust.render();

此过程相当繁琐。很多情况下，我们需要一个通用的动态Grid，不必指定字段名、字段类型、列头等信息，而是根据返回记录（通常是json或xml格式）的结构和内容，自动将记录展现在Grid中，这就是Dynamic Grid。

extjs的论坛上有两种方式实现Dynamic Grid，一种是json，另一种是xml。前者请看http://extjs.com/learn/Ext_Extensions。对于xml方式，需要扩展Ext.data.XmlReader和Ext.grid.Grid，具体根据返回的xml的结构，假设返回的xml类似：

<?xml version="1.0" encoding="UTF-8"?>
<response success='true'>
        <database>
            <record>
                <SUPPLIERID><![CDATA[1]]></SUPPLIERID>
                <SUPPLIERSHORTNAME><![CDATA[中原公司]]></SUPPLIERSHORTNAME>
                <PREPAYMENT><![CDATA[0.00000000]]></PREPAYMENT>
                <PAYMENT><![CDATA[0.00000000]]></PAYMENT>
                <SJQK><![CDATA[0.00000000]]></SJQK>
            </record>
            <record>
                <SUPPLIERID><![CDATA[2]]></SUPPLIERID>
                <SUPPLIERSHORTNAME><![CDATA[广州市五金公司]]></SUPPLIERSHORTNAME>
                <PREPAYMENT><![CDATA[0.00000000]]></PREPAYMENT>
                <PAYMENT><![CDATA[6855.00000000]]></PAYMENT>
                <SJQK><![CDATA[6855.00000000]]></SJQK>
            </record>

                                            </database>
</response>
在上面的xml内容中，每个<record>是一个记录，我们必须得到<record>中所有子元素的名称，做为Grid的列标题：

Ext.grid.DynamicColumnModel = function(store) {
    var cols = [];
    var recordType = store.reader.recordType;
    var fields = recordType.prototype.fields;
  
    for (var i = 0; i < fields.keys.length; i++) {
        var fieldName = fields.keys[i];
        var field = recordType.getField(fieldName);
        cols[i] = {
            header: field.header,
            dataIndex: field.name,
            tooltip: field.tooltip,
            hidden: field.hidden,
            sortable:true,
            renderer: eval(field.renderer)
        };
    }
    store.fields = fields;this, cols);
};
Ext.extend(Ext.grid.DynamicColumnModel, Ext.grid.ColumnModel, {});

Ext.data.DynamicXmlReader = function(config) {
    Ext.data.DynamicXmlReader.superclass.constructor.call(this, config, []);
};
Ext.extend(Ext.data.DynamicXmlReader, Ext.data.XmlReader, {
    getRecordType : function(data) {
        recordDefinition = Ext.DomQuery.select( this.meta.record + ':first-child > *', data);
        var arr = [];
        for (var i = 0; i < recordDefinition.length; i++) {
            arr[i] = {
                name:recordDefinition[i].tagName,
                header:recordDefinition[i].tagName
            };
        }

        this.recordType = Ext.data.Record.create(arr);
        return this.recordType;
    },
      
    readRecords : function(doc) {
        this.xmlData = doc;
        var root = doc.documentElement || doc;
        this.getRecordType(root);
        return Ext.data.DynamicXmlReader.superclass.readRecords.call(this, doc);
    }
});

Ext.grid.GridView.prototype.bindColumnModel = function(cm) {
    if(this.cm){
        this.cm.un("widthchange", this.updateColumns, this);
        this.cm.un("headerchange", this.updateHeaders, this);
        this.cm.un("hiddenchange", this.handleHiddenChange, this);
        this.cm.un("columnmoved", this.handleColumnMove, this);
        this.cm.un("columnlockchange", this.handleLockChange, this);
    }
    if(cm){
        this.generateRules(cm);
        cm.on("widthchange", this.updateColumns, this);
        cm.on("headerchange", this.updateHeaders, this);
        cm.on("hiddenchange", this.handleHiddenChange, this);
        cm.on("columnmoved", this.handleColumnMove, this);
        cm.on("columnlockchange", this.handleLockChange, this);
    }
    this.cm = cm;
};

Ext.grid.DynamicGrid = function(container, config) {
    Ext.grid.DynamicGrid.superclass.constructor.call(this, container, config);
};
Ext.extend(Ext.grid.DynamicGrid, Ext.grid.Grid, {
    render : function() {
        this.dataSource.addListener('load', this.doReconfiguration, this);
        this.colModel = new Ext.grid.DefaultColumnModel([{ header: '', dataIndex: '' }]);
        Ext.grid.DynamicGrid.superclass.render.call(this);
    },

    doReconfiguration : function() {
        this.colModel = new Ext.grid.DynamicColumnModel(this.dataSource);
        this.view.bindColumnModel(this.colModel);
        this.view.refresh(true);
        //this.dataSource.removeListener("load", this.doReconfiguration);
    }
});

    Ext.grid.DynamicColumnModel.superclass.constructor.call(
上面的代码实现了DynamicColumnModel、DynamicXmlReader和DynamicGrid，DynamicXmlReader根据xml文件的结构和内容，自动配置一个ColumnModel和Store，这样最终的Dynamic Grid实现代码如下所示：

var dsCust = new Ext.data.Store({
        // load using HTTP
        proxy: new Ext.data.HttpProxy({url: '../getCustList.do'}),   
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.DynamicXmlReader({
               record: 'record',
               totalRecords: 'records'
           })
    });

var gridCust = new Ext.grid.DynamicGrid( 'customer-grid', {
        ds: dsCust,
        //cm: cmCust,
        selModel: new Ext.grid.RowSelectionModel(),
        enableColLock:false,
        loadMask: true
    });
   gridCust.render();
相比本文开头的代码简化了很多。当然还有很多地方需要优化，例如实现描述性的列标题（而不是以字段名做为列标题），配置列宽和对齐方式，实现Dynamic EditorGrid等，通常我们还需要一个配置档，将这些原先硬编码的信息在配置档里配置好，然后在返回的json和xml中，除了有结果记录外，还有配置档中的meta信息，以便根据这些信息自动展现Dyanmic Grid。

相比而言，由于json较xml简洁，而且JsonReader本身就支持meta数据，使用JsonReader实现DynamicGrid较XmlReader方式简单，运行效率也高。当然，前提是必须将记录转换成json格式，目前json格式可能不如xml格式使用的多。

需要注意的是，由于Dynamic Grid是在运行时生成ColumnModel，如果你设置了状态管理器，即：Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
那么一旦Dynamic Grid的状态改变，如columnmove/columnresize/sortchange，当重新创建Dynamic Grid时
（例如刷新页面后重新访问)，ext会试图先从cookie中读取状态信息，而此时ColumnModel还没有生成，系统就会报错。所以，可考虑关闭状态管理器，或重写Grid的applyState()方法

Ext树节点右键菜单

1./** 
2. * 项目树 
3. */ 
4.Divo.app.Project = function() {  
5.    /* ----------------------- private变量 ----------------------- */ 
6.    var treeEl = 'project-tree';  
7. 
8.    var tree, root, treeEditor, root, ctx, ctxNode;  
9.    var adding, editing;  
10.    var seed = 0;  
11. 
12.    /* ----------------------- private方法 ----------------------- */ 
13.    // 创建项目树  
14.    function createTree() {  
15.        var xt = Ext.tree;  
16.        tree = new xt.TreePanel( {  
17.            el : treeEl,  
18.            animate : true,  
19.            enableDD : false,  
20.            containerScroll : true,  
21.            lines : false,  
22.            rootVisible : false,  
23.            root : new Ext.tree.TreeNode()  
24.        });  
25.        root = tree.root;  
26. 
27.        var o;  
28.        BasisFacade.findAllProjects( {  
29.            callback : function(retValue) {  
30.                o = retValue;  
31.            },  
32.            async : false 
33.        });  
34.        if (o) {  
35.            for (var i = 0;i < o.length; i++) {  
36.                var n = new xt.TreeNode( {  
37.                    id : o[i].id,  
38.                    text : o[i].name,  
39.                    leaf : true 
40.                });  
41.                root.appendChild(n);  
42.            }  
43.        }  
44. 
45.        var selModel = tree.getSelectionModel();  
46.        selModel.on('selectionchange', onNodeSelected, this, true);  
47. 
48.        tree.on('contextmenu', onContextShow, this);  
49.        // tree.render();  
50.        // root.expand();  
51.    }  
52. 
53.    // 创建TreeEditor  
54.    function createTreeEditor() {  
55.        var xt = Ext.tree;  
56. 
57.        treeEditor = new xt.TreeEditor(tree, {  
58.            allowBlank : false,  
59.            blankText : '请输入项目名称',  
60.            selectOnFocus : true 
61.        });  
62. 
63.        treeEditor.on("complete", onNodeEdited, this, true);  
64.    }  
65. 
66.    // 开始新建项目  
67.    function onAddNode() {  
68.        var node = new Ext.tree.TreeNode( {  
69.            text : '项目' + (++seed),  
70.            id : 'c1' 
71.        });  
72.        adding = true;  
73. 
74.        root.appendChild(node);  
75.        root.expand();  
76.        node.select();  
77.        root.lastChild.ensureVisible();  
78.        treeEditor.triggerEdit(node);  
79.    }  
80. 
81.    // 开始修改项目名称  
82.    function onUpdateNode() {  
83.        if (!ctxNode) {  
84.            Divo.say("请先选择某个项目");  
85.            return;  
86.        }  
87.        treeEditor.triggerEdit(ctxNode);  
88.    }  
89. 
90.    // 删除项目  
91.    function onDeleteNode() {  
92.        if (!ctxNode) {  
93.            Divo.say("请先选择某个项目");  
94.            return;  
95.        }  
96.        if (ctxNode.isLast()){  
97.            Divo.say("最后一个项目不能删除");  
98.            return;  
99.        }  
100.        var id = ctxNode.attributes.id;  
101.        var o;  
102.        BasisFacade.deleteProject(id, {  
103.            callback : function(retValue) {  
104.                o = retValue;  
105.            },  
106.            async : false 
107.        });  
108.        if (!o.success) {  
109.            Divo.alert("删除失败(可能已经启用)");  
110.            return;  
111.        }  
112.        root.removeChild(ctxNode);  
113.        if (ctxNode.lastChild)  
114.            ctxNode.lastChild.select();  
115.              
116.        ctxNode = null;   
117.    }  
118. 
119.    // 项目树编辑结束处理  
120.    function onNodeEdited(o, newText, oldText) {  
121.        var result;  
122.        var node = o.editNode;  
123.        if (adding) {  
124.            BasisFacade.addProject( {  
125.                name : newText  
126.            }, {  
127.                callback : function(retValue) {  
128.                    result = retValue;  
129.                },  
130.                async : false 
131.            });  
132.            if (!result.success) {  
133.                Divo.say("[" + newText + "]保存失败(可能名称重复)。");  
134.                root.removeChild(node);  
135.            } else {  
136.                node.attributes.id = result.newId;  
137.            }  
138.        } else {  
139.            BasisFacade.updateProject( {  
140.                id : node.attributes.id,  
141.                name : newText  
142.            }, {  
143.                callback : function(retValue) {  
144.                    result = retValue;  
145.                },  
146.                async : false 
147.            });  
148.            if (!result.success) {  
149.                node.setText(oldText); //TODO: 不起作用了!  
150.                Divo.say("[" + newText + "]保存失败(可能名称重复)。");  
151.            }  
152.        }  
153.        editing = false;  
154.        adding = false;  
155.    }  
156. 
157.    // 选择项目  
158.    function onNodeSelected(sm, node) {  
159.        if (!node)  
160.            return;  
161.        if (!editing && !adding) {  
162.            var project = {  
163.                id : node.attributes.id,  
164.                name : node.attributes.text  
165.            };  
166.            Divo.publish(Divo.msg.PROJECT_CHANGE, project);  
167.        } // 会失去焦点  
168.    }  
169. 
170.    // 创建上下文菜单  
171.    function createContextMenu() {  
172.        if (ctx)  
173.            return;  
174. 
175.        ctx = new Ext.menu.Menu( {  
176.            id : 'project-ctx',  
177.            items : [ {  
178.                text : '新建',  
179.                icon : Divo.getIconAdd(),  
180.                scope : this,  
181.                handler : onAddNode  
182.                    },{  
183.                text : '修改',  
184.                icon : Divo.getIconEdit(),  
185.                scope : this,  
186.                handler : onUpdateNode  
187.                    }, '-', {  
188.                text : '删除',  
189.                icon : Divo.getIconDelete(),  
190.                scope : this,  
191.                handler : onDeleteNode  
192.                }]  
193.        });  
194.        ctx.on('hide', onContextHide, this);  
195.    }  
196. 
197.    // 右击树节点时  
198.    function onContextShow(node, e) {  
199.        createContextMenu();  
200.          
201.        if(ctxNode){  
202.           ctxNode.ui.removeClass('x-node-ctx');  
203.        }  
204.        if (node) {  
205.           ctxNode = node;  
206.           ctxNode.ui.addClass('x-node-ctx');  
207.        }  
208.          
209.        ctx.showAt(e.getXY());  
210.    }  
211. 
212.    // 隐藏上下文菜单时  
213.    function onContextHide(){  
214.        if(ctxNode){  
215.            ctxNode.ui.removeClass('x-node-ctx');  
216.            ctxNode = null;  
217.        }  
218.    }  
219.      
220.    /* ----------------------- public方法 ----------------------- */ 
221.    return {  
222.        /** 
223.         * 初始化 
224.         */ 
225.        init : function() {  
226.            createTree();  
227.            createTreeEditor();  
228.        },  
229.        /** 
230.         * 返回树对象 
231.         */ 
232.        getTree : function() {  
233.            return tree;  
234.        }  
235. 
236.    }; // return  
237. 
238.}();  

Ext树节点右键菜单

用ext做了一个树

// Add Tree Menu
tree.on('contextmenu', contextmenu, tree);

// 创建右键菜单
function contextmenu(node, e) {
    treeMenu = new Ext.menu.Menu( {
        id : 'treeMenu',
        items : [new Ext.menu.Item( {
                text : '删除',
                iconCls : 'delete',
                handler : clickDelHandler
            })]
    });

    coords = e.getXY();
    treeMenu.showAt([coords[0], coords[1]]);
}

function clickDelHandler() {
            alert(node.id);
}

alert(node.id);   -〉显示的是menu.Item的ID,可是我想得到的是树结点的ID,本来自己想了一个方法，就是在创建menu.Item的时候把树结点的ID分配个menu.Item

如下
treeMenu = new Ext.menu.Menu( {
        id : 'treeMenu',
        items : [new Ext.menu.Item( {
                text : '删除',
                iconCls : 'delete',
                id: 'menu' + node.id
                handler : clickDelHandler
            })]
    });


可以在外部定义一个变量var selected;
在右键事件绑定处如下处理：
tree.on("contextmenu",function(node,e){//右键点击事件的绑定
   
    e.preventDefault();//关闭默认的菜单，以避免弹出两个菜单
    node.select();//选中点击的节点
   // alert(node.id);
   
    selected = new Ext.tree.TreeNode({
    id:node.id,
    text:node.text
    });//保存选中的树结点
   
    contextmenu.showAt(e.getXY());
    });
这样在点击某个树结点的时候，就可以将选中的结点保存到变量selected中
再通过selected.id,selected.text就可以得到要取的值了

function editNode(){//具体应用之处.............
   var id = selected.id;
    alert("我的id值:"+id);
}

Ext 文件上传

Ext.form.TextField 中设置 inputType:'file'
再将form里面的fileUpload设置为true就行了

Java代码
1.import java.io.File;   
2.import java.io.FileInputStream;   
3.import java.io.FileOutputStream;   
4.import java.io.InputStream;   
5.import java.sql.Connection;   
6.import java.sql.DriverManager;   
7.import java.sql.PreparedStatement;   
8.import java.sql.ResultSet;   
9.  
10.  
11.public class Dbtest {   
12.    private static final String URL = "jdbc:mysql://localhost:3306/jiejie?user=root&password=&useUnicode=true";   
13.    private Connection conn = null;   
14.    private PreparedStatement pstmt = null;   
15.    private ResultSet rs = null;   
16.    private File file = null;   
17.      
18.       
19.    /**  
20.    * 向数据库中插入一个新的BLOB对象(图片)  
21.    * @param infile 要输入的数据文件  
22.    * @throws java.lang.Exception  
23.    */  
24.   public void blobInsert(String infile) throws Exception   
25.   {   
26.       FileInputStream fis = null;     
27.           try  
28.           {   
29.               Class.forName("org.gjt.mm.mysql.Driver").newInstance();   
30.               conn = DriverManager.getConnection(URL);   
31.              
32.               file = new File(infile);   
33.               fis = new FileInputStream(file);   
34.               pstmt = conn.prepareStatement("insert into tmp(descs,pic) values(?,?)");   
35.               pstmt.setString(1,file.getName());    //把传过来的第一个参数设为文件名   
36.               pstmt.setBinaryStream(2,fis,fis.available());  //第二个参数为文件的内容   
37.               pstmt.executeUpdate();   
38.      }   
39.           catch(Exception ex)   
40.           {   
41.          System.out.println("[blobInsert error : ]" + ex.toString());   
42.           }   
43.        finally  
44.        {   
45.               //关闭所打开的对像//   
46.               pstmt.close();   
47.               fis.close();   
48.               conn.close();   
49.           }   
50.    }   
51.      
52.  
53.    /**  
54.    * 从数据库中读出BLOB对象  
55.    * @param outfile 输出的数据文件  
56.    * @param picID 要取的图片在数据库中的ID  
57.    * @throws java.lang.Exception  
58.    */  
59.  
60.    public void blobRead(String outfile,String picName) throws Exception   
61.    {   
62.        FileOutputStream fos = null;   
63.        InputStream is = null;   
64.        byte[] Buffer = new byte[4096];   
65.    
66.            try  
67.            {   
68.                Class.forName("org.gjt.mm.mysql.Driver").newInstance();   
69.                conn = DriverManager.getConnection(URL);   
70.                pstmt = conn.prepareStatement("select pic from tmp where descs=?");   
71.                pstmt.setString(1,picName);         //传入要取的图片的ID   
72.                rs = pstmt.executeQuery();   
73.                rs.next();   
74.                        
75.                file = new File(outfile);   
76.                if(!file.exists())   
77.                {   
78.                    file.createNewFile();     //如果文件不存在，则创建   
79.                }   
80.                fos = new FileOutputStream(file);   
81.                is = rs.getBinaryStream("pic");   
82.                int size = 0;   
83.                while((size = is.read(Buffer)) != -1)   
84.                {   
85.                    //System.out.println(size);   
86.                    fos.write(Buffer,0,size);   
87.                }   
88.                                 
89.         }   
90.            catch(Exception e)   
91.            {   
92.                System.out.println("[OutPutFile error : ]" + e.getMessage());   
93.            }   
94.            finally  
95.            {   
96.                //关闭用到的资源   
97.                fos.close();   
98.                rs.close();   
99.                pstmt.close();   
100.                conn.close();   
101.            }   
102.    }   
103.       
104.    public static void main(String[] args)   
105.    {   
106.        try  
107.        {   
108.              
109.            Dbtest blob = new Dbtest();   
110.            //blob.blobInsert("C:/jie1.jpg");             
111.            blob.blobRead("c:/1.jpg","jie.jpg");   
112.        }   
113.        catch(Exception e)   
114.        {   
115.            System.out.println("[Main func error: ]" + e.getMessage());   
116.        }   
117.    }   
118.  
119.}

Ext树

Ext.onReady(function(){
var Tree = Ext.tree;    
var tree = new Tree.TreePanel('tree', {  
animate:true,  
enableDD:false,  
loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()  
lines: true,  
selModel: new Ext.tree.MultiSelectionModel(),  
containerScroll: false 
});  
   
var json =  
[  
{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [  
{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :  
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},  
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},  
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},  
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},  
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}  
]  
},  
{"text" : "TT", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :  
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},  
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},  
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},  
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},  
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}  
]  
}]  
},  
{"text" : "Cadillac", "id" : 300, "leaf" : false, "cls" : "folder", "children" : [  
{"text" : "CTS", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :  
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},  
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},  
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},  
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},  
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}  
]  
},  
{"text" : "CTS-V", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :  
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},  
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},  
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},  
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},  
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}  
]  
}]  
}  
 
];  
 
var root = new Tree.AsyncTreeNode({  
text: 'Autos',  
draggable:false,  
id:'source',  
children: json  
});  
tree.setRootNode(root);  
 
tree.render(tree);  
root.expand(); 
});

 

---

看陆川杨幂新片《琴棋书画》，品网易3D国韵网游《天下贰》