Extjs4.0 学习札记二

Extjs4.0 学习笔记二

                       Extjs4.0 学习笔记二

一:页面效果


Extjs4.0 学习札记二

二:页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Accordion Layout</title>

 <!-- Ext -->

<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />

<style type="text/css">

    html, body {

        font:normal 12px verdana;

        margin:0;

        padding:0;

        border:0 none;

        overflow:hidden;

        height:100%;

    }

    .x-panel-body p {

        margin:5px;

    }

    .x-column-layout-ct .x-panel {

        margin-bottom:5px;

    }

    .x-column-layout-ct .x-panel-dd-spacer {

        margin-bottom:5px;

    }

    .settings {

        background-image:url(shared/icons/fam/folder_wrench.png) !important;

    }

    .nav {

        background-image:url(shared/icons/fam/folder_go.png) !important;

    }

</style>

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

<script type="text/javascript">

Ext.require(['*']);

    Ext.onReady(function(){

Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

       var viewport = Ext.create('Ext.Viewport', {

            layout:'border',

            items:[{

                region:'west',

                id:'west-panel',

                title:'West',

                split:true,

                width: 200,

                minSize: 175,

                maxSize: 400,

                collapsible: true,

                margins:'35 0 5 5',

                cmargins:'35 5 5 5',

                layout:'accordion',

                layoutConfig:{

                    animate:true

                },

                items: [{

                    html: 'hello world',

                    title:'Navigation',

                    autoScroll:true,

                    border:false,

                    iconCls:'nav'

                },{

                    title:'Settings',

                    html: 'hello world',

                    border:false,

                    autoScroll:true,

                    iconCls:'settings'   //A CSS class that specifies a background-image to use as the icon for this item. ...

                }]

            },{

                region:'center',

                margins:'35 5 5 0',

                layout:'column',

                autoScroll:true,

                defaults: {

                    layout: 'anchor',

                    defaults: {

                        anchor: '100%'

                    }

                },

                items: [{

                    columnWidth: 1/3,

                    baseCls:'x-plain',

                    bodyStyle:'padding:5px 0 5px 5px',

                    items:[{

                        title: 'A Panel',

                        html: 'go go'

                    }]

                },{

                    columnWidth: 1/3,

                    baseCls:'x-plain',

                    bodyStyle:'padding:5px 0 5px 5px',

                    items:[{

                        title: 'A Panel',

                        html: 'go go'

                    }]

                },{

                    columnWidth: 1/3,

                    baseCls:'x-plain',

                    bodyStyle:'padding:5px',

                    items:[{

                        title: 'A Panel',

                        html: 'go go'

                    },{

                        title: 'Another Panel',

                        html: 'go go'

                    }]

                }]

            }]

        });

    });

</script>

</head>

<body>

</body>

</html>

三 总结

通过本次例子可以学习总结到以下知识点:

1. Ext.create 说明

 

 createString name, Mixed args ) : Object   本方法返回的是一个对象

 

 Instantiate a class by either full name, alias or alternate name (通过全名或别名实例化一个类)

 

 If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.

 

   Ext.create is alias for Ext.ClassManager.instantiate. 

 

  Ext.create 功能与 Ext.ClassManager.instantiate 是一样的

 

2. 菜单图标的引入方式

  首先在CSS代码中引入图片

    .settings {

        background-image:url(shared/icons/fam/folder_wrench.png) !important;

    }

    .nav {

        background-image:url(shared/icons/fam/folder_go.png) !important;

}

然后在通过ExtjsiconCls属性来引入上面定义的CSS

 iconCls:'settings'   

 iconCls:'nav'

Extjs官网API描述如下:

iconCls: A CSS class that specifies a background-image to use as the icon for this item. ...

样式如图所示:


Extjs4.0 学习札记二

3:面板的左右可折叠功能

     此功能是通过Extjs的属性  collapsible: true 来实现的。

加上此语句后:面板上就会出现如下样式(红色框中样式即为可折叠功能样式):


Extjs4.0 学习札记二

1 楼 rav009 2011-10-10  
顶啊,顶啊
2 楼 rav009 2011-10-10  
讲讲tree吧
3 楼 rav009 2011-10-10  
4.0的tree我都用出来过
4 楼 rav009 2011-10-10  
都没用出来过......
5 楼 周凡杨 2011-10-10  
后期会有的