ext_js3.0 布局问题，请教

EthanQ 2011-08-11 10:16:44
JScript code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>08.layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="localXHR.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function(){

// 表格配置开始
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);

var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load();

var grid = new Ext.grid.GridPanel({
ds: ds,
cm: cm,
title: 'center-north',
region: 'north'
});
var form2 = new Ext.form.FormPanel({
defaultType: 'textfield',
labelAlign: 'right',
title: 'form',
labelWidth: 50,
frame:true,
width: 220,

title: 'center-north-form',
region: 'north',

items: [{
fieldLabel: '文本框',
anchor: '90%'
}],
buttons: [{
text: '按钮'
}]
});
// 表格配置结束

// 树形配置开始
var tree = new Ext.tree.TreePanel({
loader: new Ext.tree.TreeLoader({dataUrl: '10-05.tree.txt'}),
title: 'west',
region: 'west',
split: true,
border: true,
collapsible: true,
width: 120,
minSize: 80,
maxSize: 200
});

var root = new Ext.tree.AsyncTreeNode({text:'偶是根'});
tree.setRootNode(root);
root.expand();
// 树形配置结束

// 表单配置开始
var form = new Ext.form.FormPanel({
defaultType: 'textfield',
labelAlign: 'right',
title: 'form',
labelWidth: 50,
frame:true,
width: 220,

title: 'center-center',
region: 'center',

items: [{
fieldLabel: '文本框',
anchor: '90%'
}],
buttons: [{
text: '按钮'
}]
});
// 表单配置结束

// 布局开始
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region: 'north',
contentEl: 'north-div',
height: 80,
bodyStyle: 'background-color:#BBCCEE;'
},{
region: 'south',
contentEl: 'south-div',
height: 20,
bodyStyle: 'background-color:#BBCCEE;'
},tree,{
region: 'center',
split: true,
border: true,
layout: 'border',
items: [{
region:'north',
width:200,
layout:'accordion',
layoutConfig: {
titleCollapse:true,
animate:true,
activeOnTop:false
}
items:[{
title:'Menu',
html:'menu'
}]
},form]
}]
});
// 布局结束

});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="north-div">标题栏：viewport加panel实现复杂布局</div>
<div id="south-div">状态栏：Copyright by www.family168.com</div>
</body>
</html>
上边那个是想着在右边展示一个form和伸缩菜单，一上一下都靠右，但是效果出不来。
...全文
78 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
EthanQ 2011-08-18
  • 打赏
  • 举报
 回复
换了一种方式，搞定了。
大哥-你真棒 2011-08-11
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 c3716317 的回复:]

JScript code

///右边不是用region: 'east'的吗
[/Quote]
错了 对不起
大哥-你真棒 2011-08-11
  • 打赏
  • 举报
 回复 


///右边不是用region: 'center'的吗
EthanQ 2011-08-11
  • 打赏
  • 举报
 回复
右边布局是：上边为一个form，下边为一个伸缩菜单。一直搞不定。
EthanQ 2011-08-11
  • 打赏
  • 举报
 回复 
tree,{

            region: 'east',

            split: true,

            border: true,

            layout: 'border',

            items: [{

                    region:'north',

                    width:200,

                    layout:'accordion',

                    layoutConfig: {

                        titleCollapse:true,

                        animate:true,

                        activeOnTop:false    

                    },

                    items:[{

                        title:'Menu',

                        html:'menu'    

                    }]

                },form]

不太明白center应该加在什么地方，是把上边的region:'east'改为center，还是修改form的region? 请赐教。谢谢你的回复！
一品 2011-08-11
  • 打赏
  • 举报
 回复
如果你用border布局 必须得有region: 'center',
EthanQ 2011-08-11
  • 打赏
  • 举报
 回复 
<html>

    <head>

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

        <title>08.layout</title>

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

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

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

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

        <script type="text/javascript">

Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){



    // 表格配置开始

    var cm = new Ext.grid.ColumnModel([

        {header:'编号',dataIndex:'id'},

        {header:'名称',dataIndex:'name'},

        {header:'描述',dataIndex:'descn'}

    ]);



    var data = [

        ['1','name1','descn1'],

        ['2','name2','descn2'],

        ['3','name3','descn3'],

        ['4','name4','descn4'],

        ['5','name5','descn5']

    ];



    var ds = new Ext.data.Store({

        proxy: new Ext.data.MemoryProxy(data),

        reader: new Ext.data.ArrayReader({}, [

            {name: 'id'},

            {name: 'name'},

            {name: 'descn'}

        ])

    });

    ds.load();



    var grid = new Ext.grid.GridPanel({

        ds: ds,

        cm: cm,

        title: 'center-north',

        region: 'north'

    });

     var form2 = new Ext.form.FormPanel({

        defaultType: 'textfield',

        labelAlign: 'right',

        title: 'form',

        labelWidth: 50,

        frame:true,

        width: 220,



        title: 'center-north-form',

        region: 'north',



        items: [{

            fieldLabel: '文本框',

            anchor: '90%'

        }],

        buttons: [{

            text: '按钮'

        }]

    });

    // 表格配置结束



    // 树形配置开始

    var tree = new Ext.tree.TreePanel({

        loader: new Ext.tree.TreeLoader({dataUrl: '10-05.tree.txt'}),

        title: 'west',

        region: 'center',

        split: true,

        border: true,

        collapsible: true,

        width: 120,

        minSize: 80,

        maxSize: 200

    });



    var root = new Ext.tree.AsyncTreeNode({text:'偶是根'});

    tree.setRootNode(root);

    root.expand();

    // 树形配置结束



    // 表单配置开始

    var form = new Ext.form.FormPanel({

        defaultType: 'textfield',

        labelAlign: 'right',

        title: 'form',

        labelWidth: 50,

        frame:true,

        width: 220,



        title: 'center-center',

        region: 'east',



        items: [{

            fieldLabel: '文本框',

            anchor: '90%'

        }],

        buttons: [{

            text: '按钮'

        }]

    });

    // 表单配置结束



    // 布局开始

    var viewport = new Ext.Viewport({

        layout:'border',

        items:[{

            region: 'north',

            contentEl: 'north-div',

            height: 80,

            bodyStyle: 'background-color:#BBCCEE;'

        },{

            region: 'south',

            contentEl: 'south-div',

            height: 20,

            bodyStyle: 'background-color:#BBCCEE;'

        },tree,{

            region: 'east',

            split: true,

            border: true,

            layout: 'border',

            items: [{

            		region:'north',

            		width:200,

            		layout:'accordion',

            		layoutConfig: {

            			titleCollapse:true,

            			animate:true,

            			activeOnTop:false	

            		},

            		items:[{

            			title:'Menu',

            			html:'menu'	

            		}]

            	},form]

        }]

    });

    // 布局结束



});

        </script>

    </head>

    <body>

        <script type="text/javascript" src="../shared/examples.js"></script>

        <div id="north-div">标题栏：viewport加panel实现复杂布局</div>

        <div id="south-div">状态栏：Copyright by www.family168.com</div>

    </body>

</html>


这样试了试，还是不行。谢谢你的回复！
ext js3.0布局
ext js3.0布局
Ext_JS_3.0实例入门.pdf
详细的讲述了ext跟数据之间的 交互，简单易上手
ext3.0ext3.0ext3.0
ext3.0ext3.0ext3.0ext3.0ext3.0ext3.0
Ext_JS_3.0_Cookbook.rar
这是一本关于学习Extjs很不错的书，书中的例子很有代表性，虽然是英文版，但这本书主要包含的是代码，所以很容易看懂。。。
最新Jquary中文手册_html5.0中文手册_css3.0中文手册_Ext中文手册（CHM）
最新Jquary中文手册_html5.0中文手册_css3.0中文手册_Ext中文手册（CHM）最新Jquary中文手册_html5.0中文手册_css3.0中文手册_Ext中文手册（CHM）
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章