第九讲：ExtJS组件之FormPanel(中)

最新推荐文章于 2019-08-01 18:10:01 发布
最新推荐文章于 2019-08-01 18:10:01 发布
阅读量225 收藏
点赞数
分类专栏： EXTJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhengN/article/details/84492163
版权

ComboBox组合框。

示例一：显示本地数据。（相应的一定会有远程数据，教程一般都是模拟数据，事实上数据处理的能力一定要强）

Ext.onReady(function(){

Ext.QuickTips.init();

 

var store = new Ext.data.SimpleStore({

fields:["city"],

data:[

["北京"],

["广州"],

["上海"]

]

});

 

var form = new Ext.FormPanel({

renderTo:"form",

title:"表单Panel",

width:300,

height:300,

frame:true,

labelSeparator:":",

labelWidth:30,

items:[

new Ext.form.ComboBox({

id:"city",

name:"city",

fieldLabel:"城市",

triggerAction:"all",//查询所有数据

store:store,

displayField:"city",

valueField:"city",

mode:"local"

})

]

});

});

 

示例二：键值对的设置。

Ext.onReady(function(){

Ext.QuickTips.init();

 

var store = new Ext.data.SimpleStore({

fields:["chinese","english"],

data:[

["北京","beijing"],

["广州","guangzhou"],

["上海","shanghai"]

]

});

 

var form = new Ext.FormPanel({

renderTo:"form",

title:"表单Panel",

width:300,

height:300,

frame:true,

labelSeparator:":",

labelWidth:30,

items:[

new Ext.form.ComboBox({

id:"city",

name:"city",

fieldLabel:"城市",

triggerAction:"all",//查询所有数据

store:store,

displayField:"chinese",

valueField:"english",

mode:"local"

})

]

});

});

 

示例三：获得value值。

Ext.onReady(function(){

Ext.QuickTips.init();

 

var store = new Ext.data.SimpleStore({

fields:["chinese","english"],

data:[

["北京","beijing"],

["广州","guangzhou"],

["上海","shanghai"]

]

});

 

var form = new Ext.FormPanel({

renderTo:"form",

title:"表单Panel",

width:300,

height:300,

frame:true,

labelSeparator:":",

labelWidth:30,

items:[

new Ext.form.ComboBox({

id:"city",

name:"city",

fieldLabel:"城市",

triggerAction:"all",//查询所有数据

store:store,

displayField:"chinese",

valueField:"english",

mode:"local",

hiddenName:"cityValue",

listeners:{

"select":function(){

Ext.MessageBox.alert("城市","你选择的城市是" +  Ext.get("cityValue").getValue())

}

}

})

]

});

});

 

示例四：获得远程数据。

Ext.onReady(function(){

Ext.QuickTips.init();

 

var store = new Ext.data.SimpleStore({

fields:["chinese","english"],

proxy: new Ext.data.HttpProxy({

url:"citySearchServer.jsp"

})

});

 

var form = new Ext.FormPanel({

renderTo:"form",

title:"表单Panel",

width:300,

height:300,

frame:true,

labelSeparator:":",

labelWidth:30,

items:[

new Ext.form.ComboBox({

id:"city",

name:"city",

fieldLabel:"城市",

triggerAction:"all",//查询所有数据

store:store,

displayField:"chinese",

valueField:"english",

mode:"remote",

hiddenName:"cityValue",

listeners:{

"select":function(){

Ext.MessageBox.alert("城市","你选择的城市是" +  Ext.get("cityValue").getValue())

}

}

})

]

});

});

 

<%@ page language="java" contentType="text/html; charset=gb2312"

pageEncoding="gb2312"%>

<%

String citys = "[['北京','beijing'],['上海','shanghai'],['广州','guangzhou'],['长沙','changsha']]";

response.getWriter().write(citys);

%>

示例五：动态查询。

Ext.onReady(function(){

Ext.QuickTips.init();

 

var store = new Ext.data.SimpleStore({

fields:["chinese","english"],

proxy: new Ext.data.HttpProxy({

url:"citySearchServer2.jsp"//现在一般都是前后端分离开发的，但是很久前都是不分离的

})

});

 

var form = new Ext.FormPanel({

renderTo:"form",

title:"表单Panel",

width:300,

height:300,

frame:true,

labelSeparator:":",

labelWidth:30,

items:[

new Ext.form.ComboBox({

id:"city",

name:"city",

fieldLabel:"城市",

triggerAction:"all",//查询所有数据

store:store,

displayField:"chinese",

valueField:"english",

mode:"remote",

hiddenName:"cityValue",

queryParam:"shengfen",//查询参数

allQuery:"hunan",//查询值

listeners:{

"select":function(){

Ext.MessageBox.alert("城市","你选择的城市是" +  Ext.get("cityValue").getValue())

}

}

})

]

});

});

 

<%@ page language="java" contentType="text/html; charset=gb2312"

pageEncoding="gb2312"%>

<%

String shengfen = request.getParameter("shengfen");

 

String beijing = "['北京','beijing']";

String guangdong = "['广州','guangzhou'],['中山','zhongshan']";

String hunan = "['长沙','changsha'],['益阳','yiyang']";

 

String citys = "";

if(shengfen.equals("beijing")) {

citys = "[" + beijing + "]";

} else if(shengfen.equals("guangdong")) {

citys = "[" + guangdong + "]";

} else if(shengfen.equals("hunan")) {

citys = "[" + hunan + "]";

}

response.getWriter().write(citys);

%>

示例六：ComboBox级联

Ext.onReady(function(){

Ext.QuickTips.init();

 

var store = new Ext.data.SimpleStore({

fields:["chinese","english"],

proxy: new Ext.data.HttpProxy({

url:"citySearchServer2.jsp"

})

});

 

var shenfenstore = new Ext.data.SimpleStore({

fields:["chinese","english"],

proxy: new Ext.data.HttpProxy({

url:"shengfenSearchServer.jsp"

})

})

 

var shengfen = new Ext.form.ComboBox({

id:"shengfen",

fieldLabel:"省份",

triggerAction:"all",//查询所有数据

displayField:"chinese",

valueField:"english",

mode:"remote",

hiddenName:"shengfenValue",

store:shenfenstore,

listeners:{

                  "select":function(combo, record,index){

                   city.clearValue();

                   store.proxy = new Ext.data.HttpProxy({

url:"citySearchServer2.jsp?shengfen=" + Ext.get("shengfenValue").getValue()

});

store.load();

                 }

           }

})

 

 

var city = new Ext.form.ComboBox({

id:"city",

name:"city",

fieldLabel:"城市",

triggerAction:"all",//查询所有数据

store:store,

displayField:"chinese",

valueField:"english",

mode:"remote",

hiddenName:"cityValue",

queryParam:"shengfen",//查询参数

allQuery:"hunan",//查询值

listeners:{

"select":function(){

Ext.MessageBox.alert("城市","你选择的城市是" +  Ext.get("cityValue").getValue())

}

}

})

 

var form = new Ext.FormPanel({

renderTo:"form",

title:"表单Panel",

width:300,

height:300,

frame:true,

labelSeparator:":",

labelWidth:30,

items:[

shengfen,city

]

});

});

forceSelection : true, 要求输入值必须在列表中存在

resizable : true,  允许改变下拉列表的大小

typeAhead : true,  允许自动选择匹配的剩余部分文本

value:'beijing',  默认选择北京

emptyText:'请选择一个城市//为空时显示文本

转换select组件为Ext.form.ComboBox的示例

Ext.onReady(function(){

var form = new Ext.form.FormPanel({

title:'转换select组件为Ext.form.ComboBox的示例',

labelSeparator :'：',//分隔符

labelWidth : 80,//标签宽度

bodyStyle:'padding:5 5 5 5',//表单边距

frame : true,

height:80,

width:270,

applyTo :'form',

items:[

new Ext.form.ComboBox({

name:'level',

fieldLabel:'职称等级',

lazyRender : true,

triggerAction: 'all',//单击触发按钮显示全部数据

transform : 'levelName'

})

]

})

});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

  <head>

    <title>TestFormPanel</title>

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

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

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

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

  <style type="text/css">

  </style>

  </head>

  <body>

<SELECT ID="levelName">

<OPTION VALUE="1">高级工程师</OPTION>

<OPTION VALUE="2">中级工程师</OPTION>

<OPTION VALUE="3" SELECTED>初级工程师</OPTION>

<OPTION VALUE="4">高级经济师</OPTION>

<OPTION VALUE="5">中级经济师</OPTION>

<OPTION VALUE="6">初级经济师</OPTION>

</SELECT>

  </body>

</html>

 

 

odng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJsCustomComponent:ExtJs自定义组件
06-19
SearchComboBox: 扩展ExtJs4的combobox控件，当输入框改变时就会向后台发送请求，展现数据。TreeField: 扩展ExtJs4的Ext.form.field.Picker类，当点击下拉框时，异步加载树形结构数据的所有层级，需要后台提供树形...
extJs中关于formPanel动态添加组件的验证问题
04-13
NULL 博文链接：https://627443183-qq-com.iteye.com/blog/1725391
第四章 介绍Extjs的formPanel (入门教程)
czpae86x的专栏
02-06 249
第四章 介绍Extjs的formPanel (入门教程)   这章我们主要简单介绍一下Extjs的formPanel——formPanel的创建、formPanel字段数据的取得、xtype属性的使用、ComboBox的使用。   Extjs的formPanel分为两部分： 1，Ext.form.FormPanel ： 这个form我们可以理解为管表现的，就是呈现在界面我们看到的form...
Extjs4之 formpanel使用
为梦想放生,创造梦一样的未来！
06-18 703
formpanel 布局 // formpanel 表单 var formPanel = Ext.create('Ext.form.Panel',{ id : 'formPanel_TemporaryAttendance', modal : true, autoScroll : true, closable : true, clos
FormPanel内加入现成的From界面
weixin_40029679的博客
08-01 240
FormPanel内加入现成的From界将其他frm加入PanelMenu中 /// <summary> /// 切换窗体 /// </summary> /// <param name="frm">窗体</param> private void CreatForm(Form frm) { ...
FormPanel 使用
hcmfys2009的专栏
11-09 107
往Ext.Window中放一个Ext.form.FormPanel，FormPanel有一个属性为url，可以设置其的值，可参照下面的代码：//Form表单var addManagerInfoForm = new Ext.form.FormPanel({  labelAlign:'right',  labelWidth:70,  frame:true,  url:'manage/manager/a...
eEcology-ExtJS:eEcology 项目中应用的共享 ExtJS 组件
06-30
eEcology 项目中应用程序的共享 ExtJS 组件。 要求 SenchaCmd，从下载并安装。 karma，为了运行测试，使用sudo apt-get install nodejs lcov和sudo npm install -g karma-cli 。 业力插件， cd packages/datetime/...
extjs中的formPanel以及表单的应用
05-28
NULL 博文链接：https://zxf-noimp.iteye.com/blog/634692
extjs-reactjs-examples:ExtJS到React过渡的代码示例
05-16
浮动组件（代码） 数据绑定/控制器 用React绑定（代码） 使用Redux处理应用程序状态（代码） 使用MobX处理应用程序状态（代码） 资料储存库 使用React （代码） 加载，排序和过滤数据 使用Redux处理数据（代码...
ExtJS笔记----FormPanel的使用
04-04
NULL 博文链接：https://lucky16.iteye.com/blog/1490278
第八讲：ExtJS组件之FormPanel(上)
xiaozhengN的博客
11-25 873
示例一：最简单的FormPanel示例。 Ext.onReady(function(){ var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, items:[ new Ext.fo...
27. FormPanel类的defaults属性
weixin_33919941的博客
09-24 97
defaults : Object defaults属性可以包含任意个name/value属性对，这些属性将会被添加到每一个元素中...例如, 为了自动向容器包含的每个Ext.Panel 元素的宽度添加width属性，你应该传递：defaults: {width:150}。 1 Ext.onReady(function(){ 2 var top = new Ext...
C# WinForm技巧“将Form嵌入到Panel”
拓
01-18 3069
C# WinForm技巧“将Form嵌入到Panel” 来自：http://greatverve.cnblogs.com/archive/2011/07/11/panel-form.html 虽然有 TabControl控件, 但是为了减少主窗体的代码量, 可以将部分分页的功能模块放置于一个 Form 中, 当调用时, 直接把这个 Form嵌入到一个 Panel中即可.
隐藏及显示，formPanel 中的某些属性
free&free
02-24 542
隐藏及显示，formPanel 中的某些属性 1. var commonOperate  = function(items , operateType)    {       if (!items || items.length &lt;= 0)       {          return ;       }       var item = null;       for ...
Ext JS4学习教程+笔记（五）Form Panel的使用
yanqlv的专栏
06-11 4447
Ext JS4中Form Panel的显示和提交， 示例代码如下： function formTest(){      Ext.create('Ext.form.Panel',{           title:'form测试',           bodyPadding:10,           renderTo:Ext.getBody(),           wid
Extjs之FormPanel布局
idomyway的博客
12-04 2691
FormPanel有两种布局：form和column。 form是纵向布局，column为横向布局。默认为后者。使用layout属性定义布局类型。对于一个复杂的布局表单，最重要的是正确分割，分割结果直接决定布局能否顺利实现。 如果不再使用默认布局，那么我们必须为每一个元素指定一种布局方式，另外，还必须遵循以下几点： 落实到任何一个表单组件后，最后总是form布局 defaultType属性不一定
ExtJs formPanel(一、基础)
WEBCODE
07-29 123
转自:http://witcheryne.iteye.com/blog/335577 Extjs的formPanel分为两部分： 1，Ext.form.FormPanel ： 这个form我们可以理解为管表现的，就是呈现在界面我们看到的form。 2，Ext.form.BasicForm ： 这是管数据的，例如form操作数据一般使用它。 Extjs的f...
extjs在form表单中怎么使用layui组件
最新发布
05-11
如果你想在ExtJS的form表单中使用Layui组件，需要手动引入Layui的相关CSS和JS文件，并且在代码中使用Layui的API来实现组件的渲染和交互。 以下是一个使用Layui的日期选择器组件在ExtJS的form表单中的示例代码： ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值