ExtJS表单面板示例-优快云博客

本文链接：https://blog.youkuaiyun.com/hwq1987/article/details/6198854

本文介绍了一个使用ExtJS库创建的表单面板示例，该表单包含一个文本字段，可设置提示文本，并通过按钮触发更改。此外，文章还展示了如何加载必要的样式表和JavaScript文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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



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



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



<
script
>



var
 oForm ;

Ext.onReady(
function
(){

    oForm 
=
 
new
 Ext.FormPanel({

        renderTo:
"
form_panel
"
,

        layout:
"
form
"
,

        hideLabels:
false
,

        border:
false
,

        labelAlign:
"
left
"
,

        labelWidth:
70
,

        width:
400
,

        standardSubmit:
true
,

        method:
'
POST
'
,

        monitorValid:
true
,

        onSubmit: Ext.emptyFn,

        submit: 
function
(){

            
with
(
this
.getForm().getEl().dom){

                target    
=
 
"
hf
"
;

                action    
=
 
'
controller.asp?action=order_add
'
;

                submit();

            }

        },

        items:[

            {

            xtype: 
'
textfield
'
,

            fieldLabel: 
'
查找
'
,

            emptyText:
'
请输入...
'


            }

        ],

        buttons:[

            {xtype:
"
button
"
,text:
"
改变
"
,formBind:
true
,handler:
function
(){oForm.items.get(
0
).emptyText
=
'
改变了...
'
;oForm.items.get(
0
).setValue(
""
);}}

        ]

    });



});


</
script
>



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



textField.emptyText='XXX...'; 

 textField.setValue("");