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>