BlogJava-沉睡森林@漂在北京-随笔分类-Ext

json和javascript的关系

wangchangbing — Tue, 20 Mar 2012 13:19:00 GMT

参考json网站： http://www.json.org/json-zh.html

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language,Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

wangchangbing 2012-03-20 21:19 发表评论

extjs查找树节点的2种方法

wangchangbing — Fri, 29 Jan 2010 09:12:00 GMT

方法一：自己做递归函数

方法二：利用现成方法 cascade

wangchangbing 2010-01-29 17:12 发表评论

带checkbox的treepanel实例

wangchangbing — Mon, 25 Jan 2010 07:09:00 GMT

下面的代码定义了一个完整的ext treepanel的实例，其中，对checkchange事件的处理，使单击父亲节点时对下面的子节点全部选中或取消选中。

sysFunClassTree = new Ext.tree.TreePanel({
    id:'sysFunClassTree',split:true,collapsible:true,rootVisible:false,name:'sysFunClassTree',autoScroll:true,border:true,
    region:'east',title:'功能分类树',width:200,
    loader:new Ext.tree.TreeLoader({dataUrl:'http://localhost:8080/jeasyweb/treeSysFunClass.do',baseParams:{'_tree_checkbox':'true'}})
});
sysFunClassTree_root = new Ext.tree.AsyncTreeNode({
    text:'Ext TreeRoot',id:'src_root'
});
sysFunClassTree.setRootNode(sysFunClassTree_root);
sysFunClassTree.on('click', function(node, e){treeClick(node, e);});
sysFunClassTree.on('checkchange', function(node, flag) {
    if (node.hasChildNodes()) {
        node.eachChild(function(child) {
            child.ui.toggleCheck(flag);
            child.attributes.checked = flag;
            child.fireEvent('checkchange', child, flag);
        });
    }
});

wangchangbing 2010-01-25 15:09 发表评论

ext树实例bug修改记录

wangchangbing — Sun, 03 Jan 2010 13:49:00 GMT

摘要: 在利用ext树开发一个demo时发现了一个bug，代码如下： Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 阅读全文

wangchangbing 2010-01-03 21:49 发表评论

标签开发ext树的完整例子

wangchangbing — Sun, 03 Jan 2010 03:23:00 GMT

摘要: 具体的JSP代码如下： Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> <%@ page c... 阅读全文

wangchangbing 2010-01-03 11:23 发表评论

利用ext标签的好处

wangchangbing — Fri, 25 Dec 2009 05:09:00 GMT

摘要: 一个对单表的增加、删除、修改、查看页面，直接使用ext开发，需要大量的js代码来渲染UI。具体代码如下： Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> ... 阅读全文

wangchangbing 2009-12-25 13:09 发表评论

GXT与EXT-GWT GWT-EXT 以及收费问题

wangchangbing — Tue, 20 Oct 2009 12:57:00 GMT

最近看了看gae，准备做小程序放上去。后来又看了看GWT，然后又看了看GXT。
最终还是整了个GXT的desktop例子，准备接着写试试。
网上不少文档，让我比较迷糊，迷糊了2天，今天终于全部通透了。
下面的文章给我不少帮助，贴出来分享一下。

地址：http://yonglin4605.javaeye.com/blog/450625

很多人可能搞不太清楚这几个东西的区别

GWT-EXT是google团队在ext基础上开发的基于GWT平台的框架
ext在2.2版本之前是免费的（LPGL协议）
而在2.2版本后改变了协议，为GPL3.0，意味这EXT将不再完全免费
google的GWT-EXT团队非常不爽，一怒之下决定停止GWT-EXT的开发，因此GWT-EXT的最后版本对应EXT是2.0，并且以后也不会再升级

在EXT更改协议之前，还有一个GWT上面的框架MyGwt,也是基于EXT开发的。

在EXT更改协议后，EXT团队合并了MyGwt，将该框架设为EXT下的一个子项目。重命名为：EXT-GWT
也叫GXT

关于收费问题。
EXT原先遵循LPGL协议，之后改为GPL协议
这2个协议就差一个L字母，这里L的意思就是less
就是说LPGL比GPL有更少的开放性。
很多人听了后会说，这样的话GPL更开放，岂不是更好。

事实是，GPL太开放了，以至于没人敢用他。因为他具有传染性，
比如EXT是GPL协议，如果你使用了EXT，那么你的项目也必须开源。
而这对应商业应用是致命的，商业项目开源了，你还怎么赚钱啊。

那么为什么交了钱，你的EXT就可以随便用了呢。
其实这更GPL协议无关了。
因为你交了钱后，EXT组织会给你一个单独的授权协议，与GPL无关。
在该授权协议中，你可以随便使用EXT而不用开源自己的项目。
GXT的收费情况和EXT是一样的。

wangchangbing 2009-10-20 20:57 发表评论

javascript动态调用时参数传递

wangchangbing — Thu, 23 Jul 2009 12:47:00 GMT

<html>
    <body>
    <script>
function a(){
    alert('called by b');
      var s = "";
      for(var   i   =   0;   i   <   arguments.length;   i   ++)  {
          s   +=   arguments[i]   +   ",";
      }
      alert('s in a=>'+s);
  }

function   b() {
  var   s   =   "";
  for(var   i   =   0;   i   <   arguments.length;   i   ++)  {
      s   +=  "'"  +  arguments[i]   +   "',";
  }
  alert(s);

  var ds = new String(s);
  if(  arguments.length>0){
          ds = ds.substr(0,ds.lastIndexOf(","));
  }
  alert("forward   function");
// eval("a("+ds+")");   //我想把传入b的动态参数自动传到a函数调用
  a.apply(   this,   arguments   );
  }

  var xxd = 'xxxxxxx';
  b('aaa','bbb',xxd);



    script>
    body>
html>

wangchangbing 2009-07-23 20:47 发表评论

ext中使用iframe的tabs页

wangchangbing — Tue, 16 Jun 2009 14:46:00 GMT

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Tabs Exampletitle>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />



     <script type="text/javascript" src="../../adapter/ext/ext-base.js">script>


    <script type="text/javascript" src="../../ext-all.js">script>





head>
<body>
<script>
Ext.onReady(function(){
    function func_loadTab1(){
        window.frames['tab1-frame'].location = 'ajax3.htm';
    }
    var queryForm = new Ext.form.FormPanel({
        title:'query form',
        region:'west',
        width:150,
        items:[{fiedLabel:'username'}],
        buttons:[{text:'auto load1',handler:func_loadTab1}]
    });
    var tabs = new Ext.TabPanel({
        activeTab: 0,
        region:'center',
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
        items:[{
            id:'tab1',
            name:'tab1',
             title: 'Ajax Tab 1',
             html:'<iframe scrolling="auto" name="tab1-frame" frameborder="0" width="100%" height="100%" src="ajax1.htm">iframe>'
        },{
             title: 'Ajax Tab 2',
            html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="ajax2.htm">iframe>'
        }]
    });

    var viewport = new Ext.Viewport({
         layout:'border',
         items:[queryForm,tabs]
    });
});

script>

body>
html>

wangchangbing 2009-06-16 22:46 发表评论

带checkbox框的树菜单例子

wangchangbing — Fri, 12 Jun 2009 02:25:00 GMT

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Reorder TreePaneltitle>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />



     <script type="text/javascript" src="../../adapter/ext/ext-base.js">script>


    <script type="text/javascript" src="../../ext-all.js">script>

head>
<body>
<script>


function lookupNode(_root,id){
    if(_root){
        var treeId = _root.attributes['id'];
        if(id == treeId){
            return _root;
        }
        var nodes = _root.childNodes;
        if(nodes.length==0){
             return null;
        }
        for(var i=0; i<nodes.length; i++){
            if(nodes[i]!=null){
                var xx = lookupNode(nodes[i],id);
            }
        }
        return xx;
    }
}

Ext.BLANK_IMAGE_URL = 'http://localhost:8080/greatwall/script/ext/resources/images/default/s.gif';
function insertTreeNode(root,pid,nodeConfig){
    var pNode = lookupNode(root,pid);

    if(pNode == null){
        root.appendChild(new Ext.tree.TreeNode(nodeConfig));
    }else{
        pNode.appendChild(new Ext.tree.TreeNode(nodeConfig));
    }
}

var pWinCmpId = null;

Ext.onReady(function() {

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';

/******************下面开始Body内JavaScript代码输出************************/

function treeClick(node, e){

}

var sysFunClassTree_root = new Ext.tree.TreeNode({text: "Autos",draggable: false,id: "source",checked:false});
insertTreeNode(sysFunClassTree_root,'',{"text":"Form控件","leaf":false,"id":"A00001",checked:false});
insertTreeNode(sysFunClassTree_root,'A00001',{"text":"checkbox控件","pid":"A00001",id:"000A01","leaf":false,checked:false});
insertTreeNode(sysFunClassTree_root,'A00001',{"text":"comboBox控件","pid":"A00001",id:"000B01","leaf":false,checked:false});
insertTreeNode(sysFunClassTree_root,'000B01',{"text":"radio控件","pid":"000B01",id:"000C01","leaf":false,checked:false});
insertTreeNode(sysFunClassTree_root,'000C01',{"text":"radio控件222","pid":"000C01",id:"000C01x","leaf":true,checked:false});

var sysFunClassTree = new Ext.tree.TreePanel({
  border: true,
  root: sysFunClassTree_root, rootVisible: true,
  name:'sysFunClassTree',region:'center',width:250,nodename:'tree',pidname:'pid',idname:'id',textname:'text',dataXml:'/tagsdemo/tree/data.xml',id:'sysFunClassTree'
});

sysFunClassTree.on("click", treeClick);
sysFunClassTree.on('checkchange', function(node, checked) {
    node.expand();
    node.attributes.checked = checked;
    node.eachChild(function(child) {
        child.ui.toggleCheck(checked);
        child.attributes.checked = checked;
        child.fireEvent('checkchange', child, checked);
    });
}, sysFunClassTree);


var viewport_cdb32ddef82f42e3a11d965320b7d09e = new Ext.Viewport({
  layout:'border',
  items:[sysFunClassTree]
});

sysFunClassTree_root.expand();

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

// 创建右键菜单
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(node, e) {
    alert(node.id);
}

/******************Body内JavaScript代码输出结束************************/
});
script>

<div id="divTree">div>
body>
html>

wangchangbing 2009-06-12 10:25 发表评论

ext树菜单右键menu处理

wangchangbing — Thu, 11 Jun 2009 12:58:00 GMT

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Reorder TreePaneltitle>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />



     <script type="text/javascript" src="../../adapter/ext/ext-base.js">script>


    <script type="text/javascript" src="../../ext-all.js">script>

head>
<body>
<script>


function lookupNode(_root,id){
    if(_root){
        var treeId = _root.attributes['id'];
        if(id == treeId){
            return _root;
        }
        var nodes = _root.childNodes;
        if(nodes.length==0){
             return null;
        }
        for(var i=0; i<nodes.length; i++){
            if(nodes[i]!=null){
                var xx = lookupNode(nodes[i],id);
            }
        }
        return xx;
    }
}

Ext.BLANK_IMAGE_URL = 'http://localhost:8080/greatwall/script/ext/resources/images/default/s.gif';
function insertTreeNode(root,pid,nodeConfig){
    var pNode = lookupNode(root,pid);
    alert('pNode=>'+pNode);

    if(pNode == null){
        root.appendChild(new Ext.tree.TreeNode(nodeConfig));
    }else{
        pNode.appendChild(new Ext.tree.TreeNode(nodeConfig));
    }
}

var pWinCmpId = null;

Ext.onReady(function() {

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';

/******************下面开始Body内JavaScript代码输出************************/

function treeClick(node, e){

}

var sysFunClassTree_root = new Ext.tree.TreeNode({text: "Autos",draggable: false,id: "source"});
insertTreeNode(sysFunClassTree_root,'',{"text":"Form控件","leaf":false,"id":"A00001"});
insertTreeNode(sysFunClassTree_root,'A00001',{"text":"checkbox控件","pid":"A00001",id:"000A01","leaf":false});
insertTreeNode(sysFunClassTree_root,'A00001',{"text":"comboBox控件","pid":"A00001",id:"000B01","leaf":false});
insertTreeNode(sysFunClassTree_root,'000B01',{"text":"radio控件","pid":"000B01",id:"000C01","leaf":false});
insertTreeNode(sysFunClassTree_root,'000C01',{"text":"radio控件222","pid":"000C01",id:"000C01x","leaf":true});

var sysFunClassTree = new Ext.tree.TreePanel({
  border: true,
  root: sysFunClassTree_root, rootVisible: true,
  name:'sysFunClassTree',region:'center',width:250,nodename:'tree',pidname:'pid',idname:'id',textname:'text',dataXml:'/tagsdemo/tree/data.xml',id:'sysFunClassTree'
});

sysFunClassTree.on("click", treeClick);

var viewport_cdb32ddef82f42e3a11d965320b7d09e = new Ext.Viewport({
  layout:'border',
  items:[sysFunClassTree]
});

sysFunClassTree_root.expand();

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

// 创建右键菜单
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);
}

/******************Body内JavaScript代码输出结束************************/
});
script>

<div id="divTree">div>
body>
html>

wangchangbing 2009-06-11 20:58 发表评论

ext树菜单的小问题一个

wangchangbing — Thu, 11 Jun 2009 12:35:00 GMT

下面是html代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Reorder TreePaneltitle>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />



     <script type="text/javascript" src="../../adapter/ext/ext-base.js">script>


    <script type="text/javascript" src="../../ext-all.js">script>

head>
<body>
<script>


function lookupNode(_root,id){
    if(_root){
        var treeId = _root.attributes['id'];
        if(id == treeId){
            return _root;
        }
        var nodes = _root.childNodes;
        if(nodes.length==0){
             return null;
        }
        for(var i=0; i<nodes.length; i++){
            if(nodes[i]!=null){
                return lookupNode(nodes[i],id);
            }
        }
    }
}

Ext.BLANK_IMAGE_URL = 'http://localhost:8080/greatwall/script/ext/resources/images/default/s.gif';
function insertTreeNode(root,pid,nodeConfig){
    var pNode = lookupNode(root,pid);
    alert('pNode=>'+pNode);

    if(pNode == null){
        root.appendChild(new Ext.tree.TreeNode(nodeConfig));
    }else{
        pNode.appendChild(new Ext.tree.TreeNode(nodeConfig));
    }
}

var pWinCmpId = null;

Ext.onReady(function() {

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';

/******************下面开始Body内JavaScript代码输出************************/

function treeClick(node, e){

}

var sysFunClassTree_root = new Ext.tree.TreeNode({text: "Autos",draggable: false,id: "source"});
insertTreeNode(sysFunClassTree_root,'',{"text":"Form控件","leaf":false,"id":"A00001"});
insertTreeNode(sysFunClassTree_root,'A00001',{"text":"checkbox控件","pid":"A00001",id:"000A01","leaf":false});
insertTreeNode(sysFunClassTree_root,'A00001',{"text":"comboBox控件","pid":"A00001",id:"000B01","leaf":false});
insertTreeNode(sysFunClassTree_root,'000B01',{"text":"radio控件","pid":"000B01",id:"000C01","leaf":false});
insertTreeNode(sysFunClassTree_root,'000C01',{"text":"radio控件222","pid":"000C01",id:"000C01x","leaf":true});

var sysFunClassTree = new Ext.tree.TreePanel({
  border: true,
  root: sysFunClassTree_root, rootVisible: true,
  name:'sysFunClassTree',region:'center',width:250,nodename:'tree',pidname:'pid',idname:'id',textname:'text',dataXml:'/tagsdemo/tree/data.xml',id:'sysFunClassTree'
});

sysFunClassTree.on("click", treeClick);

var viewport_cdb32ddef82f42e3a11d965320b7d09e = new Ext.Viewport({
  layout:'border',
  items:[sysFunClassTree]
});

sysFunClassTree_root.expand();

/******************Body内JavaScript代码输出结束************************/
});
script>

<div id="divTree">div>
body>
html>

问题很简单，希望可以利用id获取到对应的node。这个很多树菜单都实现了接口，但是ext好像没有，难道需要自己写遍历？

修改后代码如下：对遍历函数处理了一下，树菜单显示正常。

wangchangbing 2009-06-11 20:35 发表评论

ext树菜单的入门例子

wangchangbing — Thu, 11 Jun 2009 12:14:00 GMT

<html>
<head>
  <title> New Document title>
   <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
      <script type="text/javascript" src="../adapter/ext/ext-base.js">script>
      <script type="text/javascript" src="../ext-all.js">script>
head>
<body>
<script type="text/javascript">
  Ext.onReady(function(){
      //定义树的跟节点
      var root=new Ext.tree.TreeNode({
            id:"root",//根节点id
            text:"我是树根"
      });

      //定义树节点
      var c1=new Ext.tree.TreeNode({
        id:'c1',//子结点id
        text:'我是大儿子'
      });

      var c2=new Ext.tree.TreeNode({
        id:'c2',
        text:'我是小儿子，请点击我',
        icon:'im2.gif',//自定义节点图标
        href:'http://www.extshow.com/',//添加超链接
        hrefTarget:'_blank'//新窗口打开链接
      });

      var c22=new Ext.tree.TreeNode({
        id:'c22',
        text:'我是大孙子,请点击我'
      });

      root.appendChild(c1);//为根节点增加子结点c1
      root.appendChild(c2);//为c1增加子节点c2，相信你已经找到规律了吧^_^
      c1.appendChild(c22);//为c1增加子节点c22

      //生成树形面板
      var tree=new Ext.tree.TreePanel({
        renderTo:"show",
        root:root,//定位到根节点
        animate:true,//开启动画效果
        enableDD:false,//不允许子节点拖动
        border:false,//没有边框
        rootVisible:true//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
     });

     //增加点击事件
     c22.on('click',function(node){
          alert('我是："'+node.text+'"，我的id是："'+node.id+'"');//这里增加你所需要的点击事件
     });

  })
script>

<div id="show">div>
body>
html>

wangchangbing 2009-06-11 20:14 发表评论

ext的Layout代码

wangchangbing — Mon, 25 May 2009 07:32:00 GMT

Ext.onReady(function() {
      Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
      Ext.Ajax.request({
           url : "txn980301.do",
           method : "get",
           success : function(response, options) {
                 var array = Ext.util.JSON.decode(response.responseText);
                 for (var i = 0; i < array.length; i++) {
                      var obj = array[i];
                      accordion.add({
                            id : obj.id,
                            title : obj.text,
                            html : "" + obj.id  + ">

"
                      });
                      accordion.doLayout(true);

                      buildTree(obj.id);
                 }
           }
      });

      var tab = new Ext.TabPanel({
           region : "center",
           margins : "0 5 0 0",
           deferredRender : false,
           activeTab : 0,
           resizeTabs : true,
           enableTabScroll : true
      });

      tab.add({
           id : "welcome",
           title : "welcome",
           html : "

hello world

"
      });

      function treeClick(node, e) {
           if (!node.isLeaf()) {
                 e.stopEvent();
           } else {
                 var n = tab.getComponent(node.id);
                 //alert(node['qtip']);

                 if (!n) {
                      var n = tab.add({
                            "id" : node.id,
                            "title" : node.text,
                            closable : true,
                            html : "" + node.id  + ".do   style='width:100%;height:100%' >"
                      });
                 }
                 tab.setActiveTab(n);
           }
      }

      function buildTree(subMenuId) {
           var root = new Ext.tree.AsyncTreeNode({
                 text : "Autos",
                 draggable : false,
                 id : "source"
           });

           var tree = new Ext.tree.TreePanel({
                 el :  subMenuId ,
                 border : 0,
                 animate : true,
                 enableDD : false,
                 loader : new Ext.tree.TreeLoader({
                      dataUrl : "txn980302.do?subMenuId=" + subMenuId,
                      requestMethod : "GET"
                 }),
                 root : root,
                 rootVisible : false,
                 autoHeight : true,
                 containerScroll : false,
                 renderTo : subMenuId
           });

//           tree.render(subMenuId);
           root.expand();
           tree.on("click", treeClick);
      }

      var header = new Ext.Panel({
           region : "north",
           margins : "0 5 0 5",
           height : 80,
           collapsible : true,
           split : true,
           minSize : 80,
           maxSize : 80
      });

      var status = new Ext.Panel({
           region : "south",
           margins : "0 5 5 5",
           height : 20,
           minSize : 20,
           maxSize : 20,
           split : true
      });

      var accordion = new Ext.Panel({
           region : "west",
           margins : "0 0 0 5",
           split : true,
           width : 210,
           layout : "accordion",
           autoScroll : true,
           animCollapse : false,
           animate : true,
           layoutConfig : {
                 animate : true
           }
      });

      var viewport = new Ext.Viewport({
           layout : "border",
           items : [header, status, accordion, tab]
      });

});

wangchangbing 2009-05-25 15:32 发表评论

ext过程中遇到的问题

wangchangbing — Mon, 25 May 2009 01:20:00 GMT

在利用ext查询grid列表数据时，在IE下面提示错误“拒绝访问”。使用的代码如下：
/**
* 利用表单数据，查询gird数据，结合分页处理。
* @param  gridName 列表名称
* @param  formName 表单名称
*/
function queryGrid(gridName, formName){
    var grid = Ext.getCmp(gridName);
    var toolbar = grid.getBottomToolbar();
    var limit_ = toolbar['pageSize'];
    var ds = grid.getStore();
    if (formName) {a
        var form = Ext.getCmp(formName);
        ds.on('beforeload', function(){
            ds.baseParams = form.getForm().getValues();
        });
    }
    ds.reload({
        params: {
            start: 0,
            limit: limit_
        }
    });
}

在FF和Google Chrome下面都没有问题。

在利用ext模拟一个dialog对话框时，利用iframe形式打开一个新的页面，涉及代码如下：
/**
* 转到对应的URL页面。
* @param {String} url1 URL地址，为空时使用page的内部定义地址。
*/
function _pageDefine_goPage(url1){
    var url2 = "";
    if (url1) {
        url2 = url1 + this.paramList;
    }else {url2 = this.url + this.paramList;}

    var id = Ext.id();

    if (this.isJsp) {
        url2 = basePath + url2;
    }else {url2 = rootPath + url2;}

    alert('url2=>'+url2);
    var newWindow = new Ext.Window({
        id: id,name: id,title: this.title,width: this.width,
        height: this.height,maximizable: true,minimizable: true,
        closable: true,closeAction: 'close',frame: true,modal: true,
        html: '<iframe id="frame-' + id + '" name="frame-' + id + '" src="' + url2 + '" frameborder="0" height="100%"  width="100%" >iframe>'
    });
    newWindow.show();
    subWin = window.frames['frame-' + id];

    if (window.attachEvent) {
        subWin.attachEvent("onload", function(){
            subWin.pWinCmpId = id;
        });
    }else {
        subWin.addEventListener("load", function(){
            subWin.pWinCmpId = id;
        }, true);
    }
}

我在每个子页面上面定义了一个变量标记Window的ID和NAME属性。
当子页面需要关闭时，调用
window.parent.Ext.getCmp(pWinCmpId).close();
关闭Window。
在FF和IE下面都通过，但是在Google Chrome却不能将pWinCmpId值准确的赋到。

在利用ext做一个典型的layout布局时，左边是树菜单，右边是结合iframe打开的tabs。
在FF下，iframe页面的边框无法去掉，总是带有黑色的边框。

以上几个问题是我在开发ext过程中遇到的两个比较烦的问题，很久没有找到好的解决办法。
本人美工水平极差，连基本的CSS都存在很大的问题，希望结合EXT的强大功能开发一个快速开发平台。

wangchangbing 2009-05-25 09:20 发表评论

ext的grid和queryForm的整合处理

wangchangbing — Mon, 04 May 2009 08:49:00 GMT

摘要: 最近一直在考虑将ext进行标签处理，利用简单的标签和属性输出ext的ui效果。将常用的ext方法进行封装，提供统一的js函数给外部调用，以此提高开发的效率。下面是一点尝试的成果，需要改进的东西还很多很多。希望自己在5月份可以多多的整理文档，和做ext开发的朋友分享。代码还是有不少的问题，不过基本的框架出来了。下面是jsp代码： <%@ page ... 阅读全文

wangchangbing 2009-05-04 16:49 发表评论

jqGrid试用日记

wangchangbing — Fri, 20 Mar 2009 07:56:00 GMT

主要的代码如下：

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/commons/taglibs.jsp" %>
<html>
<head>
<%@ include file="/commons/meta.jsp" %>
<title>User Managetitle>

<link rel="stylesheet" type="text/css" media="screen" href="/scripts/styles/jqGrid/themes/basic/grid.css"/>" />
<link rel="stylesheet" type="text/css" media="screen" href="/scripts/styles/jqGrid/themes/jqModal.css"/>" />

<script src="/scripts/plugIn/jqGrid/jquery.jqGrid.js"/>" type="text/javascript">
"<c:url value="/scripts/plugIn/jqGrid/jqModal.js"/>" type="text/javascript">
"<c:url value="/scripts/plugIn/jqGrid/jqDnR.js"/>" type="text/javascript">
"<c:url value="/scripts/plugIn/corner/jquery.corner.js"/>" type="text/javascript">


"text/javascript">

jQuery(document).ready(function(){
    //var _documentWidth = $(document.body).innerWidth();
    //alert('_documentWidth2=>'+_documentWidth);

  jQuery("#list").jqGrid({
    url:'${ctx}/module/yhqxgl/userinfo/data-xmlmap.xml',
    datatype: 'xml',
    mtype: 'GET',
    xmlReader: {
          root:"result",
          row:"invoice",
          page:"invoices>currentpage",
          total:"invoices>totalpages",
          records:"invoices>totalrecords",
          repeatitems:false,
          id:"asin"
    },
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
      colModel :[
                 {name:'invid', index:'invid', width:55, xmlmap:"invoiceno"},
                 {name:'invdate', index:'invdate', width:90, xmlmap:"invoicedate"},
                 {name:'amount', index:'amount', width:80, align:'right', xmlmap:"invoiceamount"},
                 {name:'tax', index:'tax', width:80, align:'right', xmlmap:"invoicetax"},
                 {name:'total', index:'total', width:80, align:'right', xmlmap:"invoicetotal"},
                 {name:'note', index:'note', width:150, sortable:false, xmlmap:"notes"}
     ],
    pager: jQuery('#pager'),
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: "desc",
    viewrecords: true,
      multiselect: true,
  //multikey: 'ctrlKey', //不设置这个值时可以连续的选中记录
       multiboxonly :true,
    width:800,
    height: 'auto',
    hidegrid: false,
    imgpath: '${ctx}/scripts/styles/jqGrid/themes/basic/images',
    caption: 'My first grid',
    loadError : function(xhr,st,err) {
        $("#tblMasterMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
    },
    ondblClickRow : function(rowid) {
        //$("#tblDetails").editGridRow(rowid,editdtprm);
        alert('ondblClickRow rowid=>'+rowid);
    },
    onRightClickRow :  function(rowid){
        alert('onRightClickRow rowid=>'+rowid);
    },
    onSelectRow :  function(rowid){
        alert('onSelectRow rowid=>'+rowid);
    },
    onSortCol : function(index, colindex, sortorder){
        alert('onSortCol index=>'+index +" colindex=>"+colindex +"  sortorder=>"+sortorder);
    }
  });

  //block-query
  $("#queryForm").corner("bevel 8px")

});

    "queryForm"  style="height:200px;width:100px;background-color:red">

    "list" class="scroll" width="100%">
    "pager" class="scroll" style="text-align:center;">
    "tblMasterMessage">

其中，

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>

<script>
var _contextPath = '${ctx}';
script>

<script src="/scripts/jquery/jquery.js"/>" type="text/javascript">
"<c:url value="/scripts/styles/default.css"/>" type="text/css" rel="stylesheet">

其中，

wangchangbing 2009-03-20 15:56 发表评论

jQuery插件收集

wangchangbing — Wed, 18 Mar 2009 04:42:00 GMT

http://methvin.com/jquery/splitter/3csplitter.html 这个是一个layout的插件，不过比较简陋

wangchangbing 2009-03-18 12:42 发表评论

ViewportTag出现的问题

wangchangbing — Mon, 17 Nov 2008 09:22:00 GMT

摘要: 在利用viewport进行布局处理的时候出现了问题，情况是页面显示不合理。具体的代码如下： var _bodyWidth = Ext.getBody().getWidth()-12; function testForm1(){ } Ext.onReady(function(){ Ext.QuickTips.init... 阅读全文

wangchangbing 2008-11-17 17:22 发表评论

Ext标签开发整理

wangchangbing — Fri, 14 Nov 2008 08:11:00 GMT

经过两天的测试，发现了不少tags的问题，但是还好，都被解决了。下面贴一点成果出来，很简陋，但是还是可以解决简单的问题的。下面的是在jsp里面写的tags代码，相当的简单。

<%@ page contentType="text/html;charset=UTF-8" %>

<%@ taglib uri="/WEB-INF/greatwall.tld" prefix="w" %>

Example of Form Demo

name="username" fieldLabel="username" allowBlank="false" />

name="email" fieldLabel="email" />

name="qq" fieldLabel="qq" />

name="msn" fieldLabel="msn" />

下面是经过解析后生成的html页面

Example of Form Demo

代码引用了一个greatwall-form.js文件，具体的内容如下：

/**

* 提交制定的表单

* @param {String} formName 需要提交的表单名称

function submitForm(formName) {

if (!formName) {

Ext.Msg.alert('错误', '传入的表单名称错误！');

return;

}

var formPanel = Ext.getCmp(formName);

if (formPanel.form.isValid()) {

formPanel.form.doAction("submit", {

method : formPanel.form.method,

url : formPanel.form.url,

params : formPanel,

success : function() {

failure : function() {

}

});

}

/**

* 重置表单数据

* @param {String} formName 需要重置的表单名称

function resetForm(formName){

if (!formName) {

Ext.Msg.alert('错误', '传入的表单名称错误！');

return;

}

var formPanel = Ext.getCmp(formName);

if(formPanel.form){

formPanel.form.reset();

}else{

Ext.Msg.alert('错误', '传入的表单名称不存在！');

}

/**

* 利用表单域名称获取表单域的值，名称错误或者不存在该表单域时返回null。

* @param {String} fieldName 表单域名称

* @return {String} 返回表单域的值

function getFormFieldValue(fieldName) {

if (!fieldName) {

Ext.Msg.alert('错误', '传入的表单域名称错误！');

return null;

}

if (Ext.getCmp(fieldName) == null) {

Ext.Msg.alert('错误', '传入的表单域不存在！');

return null;

}

return Ext.getCmp(fieldName).getValue();

}

页面最终打开的效果就不多说了，利用第二段代码就可以看到效果了。还是比较高兴的，对ext的运用提高了不少。下一步需要开始制作grid还有layout了。个人感觉ext不难，制作标签也不难，但是需要开发一套经过测试完整的标签却是很巨大的工程，需要长时间的投入和大量的工作。其实说白了就是需要一个坚持的动力吧。

wangchangbing 2008-11-14 16:11 发表评论

Ext表单在布局后的提交问题

wangchangbing — Thu, 13 Nov 2008 09:22:00 GMT

摘要: 在对ext的form进行布局处理后，发现不能提交textfield的值到服务器上面。代码只能提交params里面的一个参数，其他的field不能提交。下面的代码是布局后的代码： wangchangbing 2008-11-13 17:22 发表评论

“Ext JS 3.0 线路图和开发工具”看后的一点感想

wangchangbing — Wed, 12 Nov 2008 14:23:00 GMT

无意看到了javaeye上面的一篇文章， Ext JS 3.0 线路图和开发工具，还有提供的一个视频。对新版的ext开发工具真是佩服不已，同时也感觉自己的开发之路可谓前途迷茫。并不是担心工具强大从而使自己怎么样，只是，感觉类似的工具一出，确实使开发人员更加的不能体会到js的强大了。以前很多人提出尽量不要使用ext，因为它太强大了，使用jQuery就可以满足要求了。其实提出这种观点的人同样也是基于，jQuery对于开发人员来说更加容易接受，后期容易维护和修改。ext的东西一旦用上了就会陷入它的强大功能之中，后期的修改和维护会很困难。感觉有点瞎写了，反正对这种强大的工具，我是即爱也恨，也许是一种担心。感觉总是找不到最好的开发模式，总是在学习最好的开发模式，但是当新的技术新的工具来到的时候，本来以为新的模式又变成了旧的模式了。哎，睡觉了。不想这么多了，还是恨期待这样一个工具的面世的。

wangchangbing 2008-11-12 22:23 发表评论

ext之“Node cannot be inserted at the specified point in the hierarchy”的问题

wangchangbing — Tue, 11 Nov 2008 15:06:00 GMT

今天在调式ext的时候发现一个恶心的问题，错误提示如下：
错误： uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "http://localhost:8080/greatwall/script/ext/ext-all.js Line: 58"]

这个错误在ie下面是不存在，在FF和google的浏览器下都出现了这个问题。baidu几乎没有可以查到的资料，在google上面找了下，不少人遇到了这个问题。具体出现这个情况的场景是：
1、我利用ajax请求服务器，获取到accordion面板有多少个大的面板，动态的添加到ext中。
         for ( var i = 0; i < array.length; i++) {
                var obj = array[i];
                accordion.add( {
                    id :obj.id,
                    title :obj.text,
                    html :""
                });
                accordion.doLayout(true);
                buildTree(obj.id);
            }
2、在ajax请求返回后，动态添加面板到accordion中，并且动态的生成一棵树。出现问题的地方就在这里，具体的代码是：el:subMenuId。去掉该代码，在FF和google、IE下面都可以查看树的效果，但是树的位置却发生了变化。
   function buildTree(subMenuId) {
        var root = new Ext.tree.AsyncTreeNode( {
            text :"Autos",
            draggable :false,
            autoCreate:false,
            id : subMenuId
        });
        var tree = new Ext.tree.TreePanel( {
            el:subMenuId,
            border :0,
            animate :true,
            enableDD :false,
            loader :new Ext.tree.TreeLoader( {
                dataUrl :"txn900001.do?subMenuId=" + subMenuId,
                requestMethod :"GET"
            }),
            root :root,
            rootVisible :false,
            autoHeight :true,
            containerScroll :false,
            autoCreate:false
        });
        tree.render(subMenuId);
        root.expand();
        tree.on("click", treeClick);
    }

目前这个问题还是没有很好的搞定。对ext的理解还是很简单，仅仅是简单的应用。距离真正意义上的理解还有很多路要走，特别是对于跨浏览器的各种问题。不过，今天把form下面的field基本上都进行了tags化处理，效果还是很不错的。后面需要利用已经开发的这个标签，在BS环境下试试效果如何，不可以急于求进。

PS：光棍节快乐。我不是光棍，上床陪老婆睡觉了。

wangchangbing 2008-11-11 23:06 发表评论

对于ext标签开发的一点想法

wangchangbing — Mon, 10 Nov 2008 14:18:00 GMT

准备做一套tags，利用tags解析为EXTJS。这个想法有了很久，但是实现起来有一定的难度。目前实现了一些简单的功能，但是还没有经过测试。并且很多简单的功能也没有完全实现，需要结合ext进一步的处理。感觉不仅要求速度，更加要求质量。对代码的质量和理解需要进一步，为日后的应用做准备。

wangchangbing 2008-11-10 22:18 发表评论

ComboBox的标签处理

wangchangbing — Mon, 10 Nov 2008 11:32:00 GMT

利用comboBox进行处理的过程中，下面的代码是可行的，但是问题还是存在。这里只能处理一个值的显示和下拉选择，但是对于通常情况是一个“value”，一个“name”。该如何处理？利用valueset进行处理是一个很好的方式，可以进行异步的操作，特别是对于从数据库里面查询的情况。但是从数据库里面查询，需要后台的支持，目前还没有走到那一步。其实从数据库里面查询出来也是需要缓存到内存中的，这种代码集不可能每次都去查询。还是先做一个item标签解决当前的问题，让页面显示可以过去，至于valueset可以日后再去考虑。

var store = new Ext.data.SimpleStore({

fields: ['state'],

data : [ ['1111'],['2222'],['3333'],['4444'],['5555'] ]

});

var combo = new Ext.form.ComboBox({

store: store,

displayField:'state',

typeAhead: true,

fieldLabel:'select',

mode: 'local',

forceSelection: true,

value:'1111',

triggerAction: 'all',

emptyText:'Select a state...',

selectOnFocus:true

});

wangchangbing 2008-11-10 19:32 发表评论

Ext下利用table方式布局FormPanel

wangchangbing — Sun, 09 Nov 2008 14:47:00 GMT

   周末对ext布局进行了研究，发现以前觉得比较麻烦的东西，现在看来十分简单。ext的使用不是特别困难，但是如何才可以保证ext可以满足各种变态的页面需求的同时又可以使开发人员不去接触一堆一堆的js呢？这个问题肯定是个难题。

   还是贴点代码。下面的代码实现了利用table模式布局FormPanel。解决了在非form模式下label不能显示的问题，但是还是存在问题，例如通常情况下“开始日期”和“结束日期”一般只占一个column，也就是两个元素各占半个column。




        Untitled Document

wangchangbing 2008-11-09 22:47 发表评论

ext布局类型整理

wangchangbing — Sat, 08 Nov 2008 16:16:00 GMT

Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。

Column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。

Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。在实际应用中，Ext.form.FormPanel这个类默认布局使用的是Form布局，而且FormPanel还会创建与

Ext布局实例

wangchangbing — Sat, 01 Nov 2008 11:39:00 GMT

摘要: 最近研究了下ext，其漂亮的UI十分吸引人。但是在制作tree控件的时候，利用JSON处理不是特别方便。因为大部分的应用的菜单都是配置在XML格式的文件中。于是，我写了一个XML文件，利用DOM4J解析XML文件，生成JSON字符串到前台。特殊的一点是，这个布局左边是一个accordion布局，于是利用XML... 阅读全文

wangchangbing 2008-11-01 19:39 发表评论

贴一个EXT的Tree的例子

wangchangbing — Thu, 30 Oct 2008 13:04:00 GMT

Drag and Drop between 2 TreePanels

wangchangbing 2008-10-30 21:04 发表评论