ExtJs的html布局

最新推荐文章于 2022-12-17 11:48:24 发布
最新推荐文章于 2022-12-17 11:48:24 发布
阅读量3.1k 收藏 1
点赞数
文章标签： html extjs stylesheet path layout div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hwq1987/article/details/6340325
版权

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'MyJsp.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">    

<script type="text/javascript" src="<%=path%>/js/ext-base.js"></script>

<script type="text/javascript" src="<%=path%>/js/ext-all.js"></script>

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

  <script type="text/javascript">

   Ext.onReady(function(){

   var array =

   [

   '<table border=1>',

   '<tr><td colspan="3">112</td></tr>',

   '<tr><td>120</td><td colspan="2">119</td></tr>',

   '<tr><td colspan="3">110</td></tr>',

   ' </table>'

   ];

   var panel = new Ext.Panel(

   {

   id:'hwq',

   renderTo:'div',

   title:'Test',

   html:"<div id='getValue'>hwq</div>"

   });

   Ext.fly(Ext.get("getValue").dom.id).applyStyles("background-color:#ff0000");

   alert(Ext.get("getValue").dom.id);<%--

          var htmlArray =

           [   

                        '<table border=1 width="100%" height="100%">',   

  '<tr><td colspan="3">112</td></tr>',

  '<tr><td width="30%" id="panelShow"></td><td width="70%" id="panelShow2"></td></tr>',

  '<tr><td colspan="3">110</td></tr>',

                        '</table>'  

                      ];  

       var win = new Ext.Window({ 

        layout:'fit',

                width:'100%',

     height:'100%', 

                minimizable:true ,

                maximizable:true ,

           title:'使用html配置项自定义面板内容',   

           frame:true,//渲染面板   

           collapsible : true,//允许展开和收缩   

           autoScroll : true,//自动显示滚动条   

           applyTo :'div',   

           html:htmlArray.join(''),

           //items: new Ext.DatePicker(),//向面板中添加一个日期组件  

           bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色   

       });

       win.show();

      

       var panel = new Ext.Panel(

   {

   id:'hwq',

   layout:'fit',

   height : 150,   

             width : 250,

   renderTo:'panelShow',

   title:'Test',

   html:array.join('')

   });

          var panel = new Ext.Panel({   

            layout : 'card',   

            activeItem : 0,//设置默认显示第一个子面板   

            title:'Ext.layout.CardLayout布局示例',   

            frame:true,//渲染面板   

            height : 150,   

            width : 750,   

            applyTo :'panelShow2',   

            defaults : {//设置默认属性   

                bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色   

            },   

            items: [   

                {   

                    title : '嵌套面板一',   

                    html : '说明一',   

                    id : 'p1'  

                },   

                {   

                    title : '嵌套面板二',   

                    html : '说明二',   

                    id : 'p2'  

                }   

                ,   

                {   

                    title : '嵌套面板三',   

                    html : '说明三',   

                    id : 'p3'  

                }   

            ],   

            buttons:[   

                {   

                    text : '上一页',   

                    handler : changePage   

                },   

                {   

                    text : '下一页',   

                    handler : changePage   

                }   

            ]   

        })   

        //切换子面板   

        function changePage(btn){   

            var index = Number(panel.layout.activeItem.id.substring(1));   

            if(btn.text == '上一页'){   

                index -= 1;   

                if(index < 1){   

                    index = 1;   

                }   

            }else{   

                index += 1;   

                if(index > 3){   

                    index = 3;   

                }   

            }   

            panel.layout.setActiveItem('p'+index);   

        }  --%> 

   })

  </script>

 

  </head>

 

  <body>

    <div id="div"></div>

 

    

    

    

  </body>

</html>

hwq_1987
关注
[ExtJS] tpl的html中放置extjs控件
拒绝成猿的程序员
12-12 4757
在使用ExtJS开发时，有些样式不好写，需要用tpl自己手绘html样式。 但是这些绘制的html，又想要点击可以用extjs控件进行编辑，如下图 这个是用DataView一类，含有tpl（或itemtpl）一类控件绘制的 在进行替换时，主要通过 htmlDom对象.replaceWith(extjs控件.el); 或采用 htmlDom对象.doReplaceWith(extjs控...
ExtJS是一个基于纯Html/CSS+JS技术的框架，它提供了丰富的跨浏览器UI组件，并支持使用JSON/XML数据源进行开发
最新发布
BLOG域名:programb.blog.csdn.net
03-09 780
LigerUI是一个轻量级的后台管理系统框架，它提供了丰富的组件和功能，使得开发后台管理系统变得更加简单和高效。这样，我们就可以方便地管理和操作各种业务数据。初始化LigerUI组件：在页面加载完成后，使用LigerUI提供的API初始化各个组件，例如菜单、表格、表单等。进行测试和优化：对开发的后台管理系统进行测试，修复可能存在的bug，并进行性能优化，以提升系统的稳定性和响应速度。处理用户交互：监听用户的操作事件，例如点击按钮、选择下拉框等，然后编写相应的处理函数来响应用户的操作。
extjs-html配置
香酥蟹的博客
01-06 356
1、这是我写的extjs的html的简单配置，主要用于下面几个例子。 2、我写的extjs的小例子是引用了extjs4.2的包， 随后我会把连接奉上。 http://download.csdn.net/detail/zyt807/9391268 html> head> meta http-equiv="Content-Type" content="text/html;
extjs html 指向网页,extjs-mvc结构实践(二):基本页面
weixin_33917277的博客
06-30 256
接着来，上一篇搭建了基本的项目骨架，到最后，其实啥也没看见。。。书接上回，开始写UI效果。目标全屏显示、左侧导航菜单，右侧标签页切换操作内容区域。包含header和footer导航菜单动态ajax产生，点击对应菜单可以动态加载js资源或者数据不要太丑！！！！先扯点概念：一些基本的Extjs概念本文不会去讲，请参考官网API文档。但是对于用java的同志来说，看extjs的结构应该是很容易的定义与创...
extjs html 布局实例,浅谈ExtJS的布局
weixin_30903865的博客
07-06 143
ExtJs的最大特性之一就是可用简单的方法来进行布局。我们可通过合适的类来定义固定布局或非固定布局。比如，我们来为容器内的子组件设置布局时，如没有定义布局，则缺省使用auto布局。auto布局是将子组件在容器内一个接一个的来显示的。ExtJs中可以用很多布局来安排组件，比如：accordions,cards,columns,table等。一些常用的布局有：边界布局适应布局卡片布局手风琴布局锚定布局...
学习ExtJS table布局
12-10
一、Table布局由类Ext.layout.TableLayout定义，类以于html中的table，可以对行或列进行合并。 layoutConfig使用columns指定父容器分成3列， rowspan合并行数目。 colspan合并列数目。 二、应用举例 代码如下: Ext....
学习ExtJS fit布局使用说明
10-29
### ExtJS Fit布局详解 #### 一、Fit布局概述 在ExtJS中，`Fit`布局是一种非常实用的布局管理器，它可以让一个或多个子元素自动填充到其父容器中。当设置为`Fit`布局时，父容器会根据其中的第一个子元素的大小来...
学习ExtJS accordion布局
10-29
Accordion布局是ExtJS中的一种特殊布局方式，它允许在一个容器内展示多个可折叠的面板，每个面板的展开会自动收起其他已展开的面板，从而提供了一种高效的屏幕空间利用机制。 一、Accordion布局的核心概念 ...
学习ExtJS form布局
10-29
在ExtJS中，表单是数据输入的重要组成部分，而`Ext.layout.FormLayout`就是专门为管理这些表单元素而设计的布局策略。 一、Ext.layout.FormLayout详解 `Ext.layout.FormLayout`布局类定义了表单布局，它专注于组织...
HTML 和 ExtJS 组件
lic0112的专栏
12-01 239
当你要创建一个网页时， 经常会发现，你知道怎样用原生的html来创建，却不知道如何使用浩如烟海的ext组件来实现。本文将介绍一些使用ext组件创建html的一些技巧。 简介   组件的渲染 首先让我们用一个简单的例子了解一下组件是如何渲染的: /** The renderTo config option specifies a parent DOM element for * ...
Extjs4.2Html编辑器扩展
01-06
扩展Extjs4.2的htmleditor，添加 “上传图片”，”上传附件”等功能。
EXtJS资源，非常好的html页面模版
05-21
EXtJS资源，非常好的html页面模版
extjs 引入html页面,Extjs嵌入html
weixin_32307599的博客
06-09 2238
方式一：使用组件的html属性嵌入html代码，如果html代码中存在参数可以使用字符串拼接的方式拼接html代码。html页面：Extjs中嵌入htmlExtjs代码：Ext.Loader.setConfig({enabled : true});Ext.Loader.setPath('Ext.ux', '../extjs/ux');Ext.require([ 'Ext.form.*', 'Ext...
extjs html 布局实例,谈谈Ext JS的组件——布局的使用方法
weixin_35081861的博客
06-18 301
概述在ExtJS中，包含两类布局：组件类布局和容器类布局。由于有些组件是有不同的组件组合而成的，如字段就由标题和输入框构成，他们之间也是存在布局关系的，而这就需要组件类布局来处理组件内自己特有的布局关系。如果我们不定义自己的组件，基本不需要使用到组件布局，知道就行了。本文主要介绍的是容器类布局，因为这个在开发中是必定会使用到的。注意：在Ext JS中，字段有两层意思。在模型中所说的字段，与数据库中...
html ext布局 顶层菜单,Extjs4 常用控件与面板、布局
weixin_35876299的博客
06-18 187
1.使用逗号分隔参数列表配置组件首先来看一个简单的逗号分隔参数列表的例子。这个例子非常简单，它用来显示信息提示框。2.使用Json对象配置组件接下来看一个使用Json对象配置组件的例子，很多地方习惯性称之为配置对象。Ext.onReady(function() {//使用逗号配置Ext.Msg.alert('提示', '逗号分隔参数列表');//使用Json对象配置var config ={ ...
ext中加载html,ExtJS中更新html内容以及iframe中内容打印
weixin_29601703的博客
05-31 525
工作一年多来，最近的开发，虽说前台和后台都有分工，但是大部分经历都放在前台，界面上有太多的东西需要修改和完善，调试程序更是需要更多的时间，最近的工作在用xsl写样式将xml中的内容显示在界面上，而我们的界面是基于Extjs的，这样我们就在panel中使用html属性，获取内容显示，这样就存在一个问题，当我们需要更新panel中的内容时该怎么办，换面板是一个可以实现目标的方法，但是这似乎又是很笨的方...
extjs+html5
xzyxuanyuan的专栏
05-03 733
m_info_grid = new Ext.Panel({                height:500,               width:820,               frame:true,               bodyStyle:'background-color:#FFFFFF',               html:'',
Extjs4.2 window加载HTML，父子页面html传参
加菲猫的VFP
12-17 539
Extjs的窗口是可以加载自己的HTML的，但这样两个页面就相当独立了，传参是个问题 ，网上也没有很好的解答清楚，猫猫今天就说清楚这个模式的传参要点。
extjs引入html,ExtJs教程第一集 搭建ext环境后的第一个hello World
weixin_33166692的博客
06-16 272
下载js文件，官方地址，ExtJSv3.2.0或者ExtJSv3.4.0都行解压Extjs包，把以下文件夹和js文件拿出来adapter(文件夹)resources(文件夹)ext-all.jsext-all-debug.js目录结构如下 5.开始写html代码版本1 HTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">测试...
ExtJS Accordion布局详解与应用
Accordion布局是ExtJS开发中的一种重要组件，它定义了一个名为Ext.layout.Accordion的布局方式，适用于创建具有可折叠功能的容器组件。在ExtJS中，这种布局允许容器内的子元素以折叠形式展现，提供了丰富的交互体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值