BlogJava-风人园-随笔分类-Ext

Ext.data.jsonReader的格式

风人园 — Tue, 11 Aug 2009 01:45:00 GMT

在Grid和Form进行异步载入的时候，一般都是用json来进行返回，这个时候就需要注意格式的问题。jsonReader的格式是固定的，都是一样的
{"data":[{"spec":"aa","id":1,"name":"aa","helpCode":null,"code":"aaa"}],"success":true}
注意：data的数据是一个数组，不管是grid显示还是form显示，都是数组，只是grid有多条，而form就只需要一条而已，这个问题我也找了好一会儿。

从代码上看，grid和form调用的jsonReader是一样，怎么格式有点不一样，原来是这么个回事，两者确实都是一样的。

经过这次之后，对jsonReader有了更深的了解，只要是异步，用jsonReader就好了，一般的问题都能搞定。

特别是form的自己载入，这样可以省掉很多事情。

风人园 2009-08-11 09:45 发表评论

Ext应用六 -- Form

风人园 — Thu, 10 Jan 2008 08:02:00 GMT

对于Ext form只能说看上去很美，对于一个复杂的页面，写惯了html之后，突然让你写一大堆的js，对我来讲确实有点很为难。一时间实在是接受不了。而且对于页面来说不是很直观，比较难控制。

个人意见，对于复杂的页面还是不要用ext了，实在有点繁。

但是对于象登录页面这种，绝对是可以用ext的，简单，而且用户体验又好。

下面的任务就是做一个跟后台交互的登录页面。
一是自己学习，二是网上完整的代码很少。

以便大家交流参考。：）

期待ing

风人园 2008-01-10 16:02 发表评论

Ext应用三 -- tab(3)

风人园 — Thu, 10 Jan 2008 06:08:00 GMT

在使用ajax tab的时候，可能有些资料需要返回给当前的页面，这个时候怎么把那个tab的中的页面的资料传到当前页面呢？不懂

tab中嵌入iframe的简单方法
// second tabs built from JS
    var tabs2 = new Ext.TabPanel({
        renderTo: document.body,
        activeTab: 0,
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
        items:[{
                title: 'Disabled Tab',
                disabled:true,
                html: ""
            }
        ]
    });

这样就可以轻松实现一个嵌入页面。

ajax方式和iframe方式各有特点。
如果只是显示一些内容的话，用ajax方式方便。
如果有操作，那就用iframe，否则页面路径都需要重新设置，而且提交的时候还有些不方便，js好像也有问题。

风人园 2008-01-10 14:08 发表评论

Ext应用五 -- 基础方法

风人园 — Thu, 10 Jan 2008 01:37:00 GMT

1、Ext.get 获得dom对象，类似于document.getElementById

        Ext.get("hideit").on('click', function() {
           var w = Ext.getCmp('west-panel');
           w.collapsed ? w.expand() : w.collapse();
        });

2、Ext.getCmp 获得Ext组件对象，然后就可以直接进行组件操作，首先组件要有ID。

风人园 2008-01-10 09:37 发表评论

Ext应用三 -- Tab(2)

风人园 — Wed, 09 Jan 2008 02:15:00 GMT

前面在使用了简单的tab之后，在后来的应用中，又用到了高级tab。

需要用户点击一个链接之后，在panel中新增tab。这里有很多地方有疑问。

1、在var viewport = new Ext.Viewport（）中定义tab是这样子的。

new Ext.TabPanel({
                id:tabs,
                region:'center',
                enableTabScroll:true,
                defaults: {autoScroll:true},
                deferredRender:false,
                activeTab:0,
                items:[{
                    contentEl:'center2',
                    title: 'Start',
                    autoScroll:true
                }]
            })

但是这样子导致这个TabPanel没有变量名，不能直接操作。
然后我试了通过viewport.add进行添加的方式，可能是方法使用错误，导致没有出来。
如果效果出来了。
后面还有问题，我怎么通过这个tab来显示一个页面呢。通过ajax tab来显示。在basic tab这个例子里有看到过，知识还没有研究。

下面是动态添加tab的方法

    function addTab(){
        tabs.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
            html: 'Tab Body ' + (index) + '<br/><br/>'
                    + Ext.example.bogusMarkup,
            closable:true
        }).show();
    }

就通过TabPanel这个对象的变量来直接add。在add时候再动态载入页面内容。

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: 'menu'
}, {
id: 'center_panel',
region: 'center',
layout: 'card',
items: [
{id: 'first_center', html: 'first center'}
]

}]
});

var center = Ext.getCmp('center_panel');
center.remove('first_center');
center.add({
id: 'second_center',
html: 'second center'
});
center.getLayout().setActiveItem('second_center');
center.doLayout();

通过指定TabPanel id，然后通过Ext.getCmp('center_panel')，就可以获得这个panel的句柄，就可以对这个组件进行操作。layout在add/remove之后需要调用center.doLayout()方法，才能使后来新建的tab的生效。

3、ajax tab
function addFormTab(strScreen_ID, strScreenName){
  var tabs = Ext.getCmp('tabs');
  tabs.add({
   id: strScreen_ID,
   title: strScreenName,
   //html: 'second center',
   autoLoad: {url: './pages/web/business_frame.jsp', params: 'screen_ID=WEB.BU&screen_FK=' + strScreen_ID},
   closable:true
  });
  tabs.getLayout().setActiveItem(strScreen_ID);
  tabs.doLayout();
}

autoLoad: {url: './pages/web/business_frame.jsp', params: 'screen_ID=WEB.BU&screen_FK=' + strScreen_ID}

指定这个autoload，就可以从相应的指定页面载入。

以上已经测试成功。嘿嘿：）

风人园 2008-01-09 10:15 发表评论

Ext应用四 -- Toolbar & Menu

风人园 — Tue, 08 Jan 2008 06:03:00 GMT

Ext.onReady(function(){
Ext.QuickTips.init();

    var tb = new Ext.Toolbar();
    tb.render('toolbar');

    var menu = new Ext.menu.Menu({
        id: 'mainMenu',
        items: [
            {
                text: 'Logout',
                handler: Document_onLogout
            }
        ]
    });

    tb.add({
            text:'Main Menu',
            iconCls: 'blist',  // <-- icon
            menu: menu  // assign menu by instance
        }
    )
}

以上是一个简单的toolbar 及一个下拉按钮。

1、声明一个toolbar
2、定义一个菜单及按钮
3、把菜单添加到toolbar上面。

注： handler: Document_onLogout 是点击这个菜单项时调用这个js函数。

风人园 2008-01-08 14:03 发表评论

Ext应用三 -- Tab

风人园 — Fri, 28 Dec 2007 06:53:00 GMT

简单tab的应用，参考例子

    var tabs = new Ext.TabPanel({
        renderTo: 'tabs1',
        width:450,
        activeTab: 0,
        frame:true,
        defaults:{autoHeight: true},
        items:[
            {contentEl:'script', title: 'Short Text'},
            {contentEl:'markup', title: 'Long Text'}
        ]
    });

tab的激活事件
在item的配置中增加
listeners: {activate: handleActivate}
handleActivate是一个方法，也就是当激活某一个tab的时候，就会调用这个方法。

    // second tabs built from JS
    var tabs2 = new Ext.TabPanel({
        renderTo: document.body,
        activeTab: 0,
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
        items:[{
                title: 'Normal Tab',
                html: "My content was added during construction."
            },{
                title: 'Ajax Tab 1',
                autoLoad:'ajax1.htm'
            },{
                title: 'Ajax Tab 2',
                autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
            },{
                title: 'Event Tab',
                listeners: {activate: handleActivate},
                html: "I am tab 4's content. I also have an event listener attached."
            },{
                title: 'Disabled Tab',
                disabled:true,
                html: "Can't see me cause I'm disabled"
            }
        ]

    });

autoLoad:异步载入的页面。

风人园 2007-12-28 14:53 发表评论

Ext应用二 -- 事件

风人园 — Fri, 28 Dec 2007 06:50:00 GMT

事件的自定义
treeDept.on('click', function(node){
    if(node.leaf==true){
       addSelected(node.id, node.text);
    }
});
如何自定义事件。上面针对tree的单击事件，设置的单击时所要做的动作。

其他的事件设置可以参考这个。从API上查到相应的事件名称，然后就可以设定了。

风人园 2007-12-28 14:50 发表评论

Ext应用一 -- TreeView

风人园 — Fri, 28 Dec 2007 05:01:00 GMT

在导入需要文件之后，以下代码就能生成一个tree了，非常的简单。
ajax去后台action拿组织架构的json字符串。搞定。还有页面上要定义一个div来显示这个tree。

风人园 2007-12-28 13:01 发表评论