EasyUI动态加载panel,并受panel添加始末。ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页。

给panel一个id,2.制作一个可以拖动的面板 Ext.Panel

例子:

经此文能上学及如下内容
1.创立一个简单的面板 Ext.Panel
2.打一个足拖动的面板 Ext.Panel
3 .使用选择项卡面板
3.使用Ext.Viewport搭一个粗略布局(用一个粗例子来总本文所有内容)
面板是ExtJs控件的根基,很多控件都是以面板的功底及扩大的,或者他会见跟另控件之间来提到。
面板由一个器栏、一个脚工具栏、面板头部、面板尾部和面板主区域几个组成部分组成。面本类中还提供了面板展开、关闭等职能。并提供了片可选用的工具按钮让咱们活的控制面板。面板可以放入其他任何容器中,面板本身为是一个器皿,所以面板里面也得分包其他零件。面板的类名为Ext.Panel,其xtype为panel。
关押下面一个例子来展示出面板的逐一组成部分:
//普通的面板
function panel(){
var panel=new Ext.Panel({
renderTo:’panel’,
title:’面板的脑壳’,
width:400,
height:200,
html:'<h1>面板的预兆显示区域..可含蓄其他html代码</h1>’,
tbar:[{text:’顶部工具栏按钮’}],
bbar:[{text:’底部工具栏’}],
buttons:[
{
text:’面板底部按钮’,
handler:function()
{
Ext.Msg.alert(‘提示’,’面板底部按钮的事件!’);
}
}
]
});
}
面的代码就不举行详细介绍了,特别注意的一点是renderTo:’panel’,这句代码负责把面板绑定到一个div层里,panel就是div的ID。
<div id=”panel”></div>
代码执行后会见显示下面的职能:
图片 1
职能不错吧!面板中得以有多单器栏,可以置身面板的顶部或底层,Ext工具栏是由Ext.Toolbar类表示。工具栏可以存放按钮、文本等情节。而且面板中还提了部分实用的家伙栏,可以由此tools配置属性为面板头部在工具栏选项,看下面的案例:
function panel(){
var panel=new Ext.Panel({
tools:[
{id:”save”},
{id:”help”},
{id:”up”},
{
id:”close”,
handler:function(){
Ext.MessageBox.alert(“工具栏按钮”,”工具栏的闭馆按钮事件”)
}
}
],
renderTo:’panel’,
title:’面板的脑袋’,
width:400,
height:200,
html:'<h1>面板的主显示区域..可含蓄其他html代码</h1>’,
tbar:[{text:’顶部工具栏按钮’}],
bbar:[{text:’底部工具栏’}],
buttons:[
{
text:’面板底部按钮’,
handler:function()
{
Ext.Msg.alert(‘提示’,’面板底部按钮的波!’);
}
}
]
});
}

受布局内动态增长一个panel,给panel一个id,加内容的上加到这个id里就好了

123下一页看全文

 var str=$('<div> <textarea id="context" name="context" style="height:100%; overflow: auto;border: 1px solid #ccc; min-height: 600px;"></textarea></div>');
                          $('#centBody').layout('add',{
                               region: 'east',
                               width: 500,
                               id:'Textx',
                               title: '项目指引',
                               split: true
                          });
                        str.appendTo($('#Textx'));

汝可能感兴趣的篇章:

  • 自从适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
  • 由此viewport实现jsp页面支持手机缩放
  • 关于viewport,Ext.panel和Ext.form.panel的关系
  • 有关meta
    viewport中target-densitydpi属性详解(推荐)

html:

 <div data-options="region:'center',collapsible:false,border:false" style="padding: 0px 5px 0px 0px;
            height: 100%" id="ceshi">
            <div class="easyui-layout" data-options="fit:true,border:false" style="margin: 0px;
                padding: 0px; width: 100%; height: 100%;" id="centBody">
                <%--<div data-options="region:'east',split:true" title="East" style="width: 100px;">
                    文本框
                </div>--%>
                <div data-options="region:'center',collapsible:false,border:false" style="padding: 0px 5px 0px 0px;
                    height: 100%" title="项目分类" id="getTitle" style="height: 100%; width: 100%;overflow:auto;">
                    <div id="TreeCatalog">
                    </div>
                </div>
            </div>
        </div>