使用ExtJs3.0从零开始建立华丽客户端(5)

时间：2010-08-16 来源：展露

【甜蜜的蔗糖】

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

小瓜：蔗糖老师好久不见啦，最近很忙吗？

蔗糖老师：是啊，最近公司有一个培训，我一直在给同事们做培训呢，所以很少有时间上线了。

蔗糖老师：还好了，最近这一段时间终于忙过去了，总得上来看看大家，对吧？

小瓜：嗯嗯。不知道您接下来会讲些什么内容呢？

蔗糖老师：嗯，今天我们要说说面板(Panel)的使用。

小瓜：好。您前面的一些教程我都已经学完了，正好，又有新东西可以学习了。

蔗糖老师：哈哈，那我们开始吧。

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

蔗糖老师：面板Panel 是ExtJS 控件的基础，很高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式形成。

蔗糖老师：面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。

小瓜：那这么说，面板就像是一个父亲一样喽，也就是一个大大的容器，它可以容纳很多的东西，也可以在它的基础上去产生很多其他的组件。

蔗糖老师：是的。你很聪明。那么我们就来看看我们的面板如何去产生吧。

蔗糖老师：我们先来看看一个完整的Panel是什么样子的。

蔗糖老师：

蔗糖老师：那么在这上面我们是按照完整的Panel去写的这样一个例子。接下来我们来看看代码

蔗糖老师：

 <script type="text/javascript">

         Ext.onReady(

                   function()

                   {

                            

                            new Ext.Panel(

                            {

                                     title:"我是一个panel",

                                     width:500,

                                     ">300,

                                     html:"我是面板的主区域",

                                     //顶部工具栏

                                     tbar:[{text:"我是顶部工具栏"}],

                                     //底部工具栏

                                     bbar:[{text:"我是底部工具栏"}],

                                     //面板尾部

                                     buttons:[{text:"这个按钮位于尾部"}],

                                     

                                     //渲染

                                     renderTo:"panel",

                                     //包含一个东西

                                     //items:[{}]

                            })

                   }

         )

 

</script>

</head>

 

<body><div id="panel"></div>

</body>