ExtJs布局之table


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<!DOCTYPE html>

<html>

<head>

    <title>ExtJs</title>

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

    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">

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

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

        <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

 

    <script type="text/javascript">

            Ext.onReady(function() {

                Ext.create('Ext.panel.Panel',{

                    title: 'Ext.layout.container.Table',

                    frame: true,

                    height: 600,

                    width: 800,

                    renderTo: Ext.getBody(),

          defaults: {

                        bodyStyle: 'background-color: #FEE300;',

                        height: 150,

            width: 150,

                        frame: true

                    },

                    layout: {

            type: 'table',

            columns: 4

          },

 

                    items: [{

                        title: '子面板一',

                        width: 450,

            colspan: 3

                    },{

                        title: '子面板二',

            rowspan: 2,

                        height: 300

                    },

          {title: '子面板三'},

          {title: '子面板四'},

          {title: '子面板五'}

        ]

                });

            });

    </script>

</head>

<body>

    <div id='form'></div>

        <div id='form1'></div>

 

 

</body>

</html>

　　

时间： 2024-11-05 19:02:58

ExtJs布局之table的相关文章

关于extjs布局，只显示一列

问题描述 关于extjs布局,只显示一列 代码如下,这个actionPanel有两列,第一列是6个Button正常显示(newTimeLine,addTimeLine,.....),第二列是6个Label显示不出来(finishLabel,...). 能不能帮忙看是哪里错了? var actionPanel=new Ext.form.FormPanel({ region:'center', border:false, labelAlign:'right', bodyStyle : 'paddin

extjs 布局中添加了collapseMode:&amp;#039;mini&amp;#039;,就能出现小箭头折叠west 请问小箭头的click事件是什么？

问题描述 extjs 布局中添加了collapseMode:'mini',就能出现小箭头折叠west 请问小箭头的click事件是什么?我想手动调用让他折叠! 问题补充:柴秉承 写道 解决方案 Ext.onReady(function() {var nodeData = [{text:'node',leaf:false,children:[{text:'childNode',leaf:false,children:[{text:'hello',leaf:true}]}]}]var panel =

WEB标准：Div布局与Table布局

web|web标准 前几天在做个网站,想全部用Div布局,起初控制得还好,代码也很整洁,但是Div没有垂直居中对齐(至少我没有过找到相关属性),后到不结合Table,如下代码: 1.无Table <div class="sectionItem">     <div class="image">         <a href="RoadWarningLamp/default.aspx"><img src=

ExtJS布局：制作后台管理布局

一个后台管理页面大概头部.左侧导航.右侧的在线用户(可有可无)和状态栏(不是必须) 头部一般放一些logo.登陆用户信息和提醒事项等 我上面给出的这个图片就是我用ExtJS实现的一个后台管理页面布局,源代码如下: Ext.onReady(function () { Ext.create('Ext.container.Viewport', { layout: 'border', items: [{ region: 'north', html: '<h1 class="x-panel-head

ExtJs布局之accordion,fit,auto

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 <!DOCTYPE html> <html> <head>     <title>ExtJs</title>      

ExtJs布局之border

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 <!DOCTYPE html> <html> <head>     <title>ExtJs</title>   

ExtJs布局之BOX

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 <!DOCTYPE html> <html> <head>     <title>ExtJs</title>         <meta http-equiv="Cont

div+css布局和table布局区别

一.用div+css网站布局的好处 1:表现和内容相分离 将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息. 2:提高搜索引擎对网页的索引效率 用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的网页内容,并可能给你一个较高的评价. 3:提高页面浏览速度 对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小. 4:易于维护和改版 你只要简单的修改几个CSS文件就可以重新设计整个网站的

DIV+CSS网页布局和TABLE相比有哪些明显优势

DIV+CSS是网站标准(或称"WEB标准")中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种样式制作定位. div是html(超文本语言)中的一个元素,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离. div 是标签 css是层叠样式表(css样式) DIV CSS高级布局已逐渐流行,