Ext_JS3.0 formPanel xtype:'combo'不起作用，不知何故

EthanQ 2011-08-10 01:51:26

Ext_JS3.0 formPanel xtype:'combo'不起作用，不知何故
代码如下：
var form = new Ext.form.FormPanel({
title:"hello",
region:'east',
frame:'true',
width:300,
autoAlign:'right',
labelWidth:60,

defaultType:'textfield',

defaults: {
width:200,
allowBlank:false
}

items:[
{ xtype:'hidden',
name:'id'},
{
xtype:'combo',
name:'sex'
}
]
});

...全文

1077 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

EthanQ 2011-08-10

打赏
举报

上边那个是想着在右边展示一个form和伸缩菜单，一上一下都靠右，但是效果出不来。

EthanQ 2011-08-10

打赏
举报

手边有例子，但改了改还是感觉很无力，搞不定。

<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>

班门弄斧 2011-08-10

打赏
举报

关于布局，自己还是好好看看例子

EthanQ 2011-08-10

打赏
举报

ext_js3.0 布局遇到了一些麻烦：
界面展示：左边（或位置为center)是grid，想右边是两个form，一上一下，但是右边region设为’east'，然后第一个form的region设置为‘north'。在Viewport中 items:[...{region:'east',
split:true, border:true, layout:'border', items:[form1,form2]}]}]...。但是效果出不来，就是一个乱。

EthanQ 2011-08-10

打赏
举报

可行。非常感谢！

班门弄斧 2011-08-10

打赏
举报



editable:false,

EthanQ 2011-08-10

打赏
举报

又发现了一个bug：

var combo = new Ext.form.ComboBox({
store:store,
emptyText:'请选择',
mode:'local',
triggerAction:'all',
valueField:'value',
displayField:'text',
applyTo:'combo',
readOnly:true
});

结果：添加了一个readOnly:true, 出现一个文本输入框，没有下拉。如果设置readOnly:false，则显示正常，不过可以编辑，没有达到不可修改的目的。奇怪了。

EthanQ 2011-08-10