在ext的世界里面,我重新感受到了在学校里玩swing的记忆.那时我们都需要为一个控件创建一个数据源,在把这个数据源绑定在控件上.ext也是如此.
首先,两个下拉框,第一个下拉框首先load数据源,在select的事件中在load第二个数据源,这就是一个简单的二级联动的实现原理了.
// 第一个下拉框
var parentStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'loadByParentid.action?parentid=1001'
}),
reader: new Ext.data.JsonReader({
root: 'list',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'name'}
])
});
// 第二个下拉框
var childStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
//这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的
url: 'loadByParentid.action?parentid=1001'
}),
reader: new Ext.data.JsonReader({
root: 'list',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'name'}
])
});
{
fieldLabel: '请选择分类',
xtype:'combo',
store: parentStore,
valueField :"id",
displayField: "mc",
mode: 'local',
forceSelection: true,//必须选择一项
emptyText:'请选择分类...',//默认值
hiddenName:'interviewsDetail.parent_category',//hiddenName才是提交到后台的input的name
editable: false,//不允许输入
triggerAction: 'all',//因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
//allowBlank:false,//该选项值不能为空
id : 'parent_id',
name: 'parent',
width: 400,
listeners:{
select : function(combo, record,index){
childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' + combo.value});
childStore.load();
}
}
},{
xtype:'combo',
store: childStore,
valueField :"id",
displayField: "mc",
//数据是在本地
mode: 'local',
forceSelection: true,//必须选择一项
emptyText:'请选择子分类...',//默认值
hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后台的input的name
editable: false,//不允许输入
triggerAction: 'all',//因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
//allowBlank:false,//该选项值不能为空
fieldLabel: '选择',
id : 'child_id',
name: 'child',
width: 400
}
这样就大功告成了.
分享到:
相关推荐
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
在“C# Extjs 登陆框、框架”这个主题中,我们主要关注的是如何使用ExtJS创建一个登录界面,并结合C#后端实现用户验证。登录框是任何应用程序的基础元素,它通常包含用户名和密码字段,以及登录和取消按钮。在ExtJS...
在给定的描述中,我们看到开发者遇到了一个问题:默认情况下,ExtJs5的`textfield`组件有明显的边框,但通过添加特定的配置项和CSS样式,可以成功移除这些边框。 首先,让我们详细了解一下如何在ExtJs5中配置`...
在ExtJs中,消息提示框(Notification)是用户界面交互的一个重要元素,它能够向用户显示各种类型的通知信息,如警告、确认、信息提示等。 在标题提到的"ExtJs消息提示框"中,我们关注的是如何在ExtJs应用程序中...
Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架
在ASP.NET源码的背景下,我们可以理解这是使用微软的.NET框架构建的后端服务。ASP.NET提供了一整套服务器端开发工具和库,用于生成动态网页和Web应用。它支持多种编程语言,如C#或VB.NET,可以与ExtJS和FineUI这类...
前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access编写(看文件名就知道了). 本例子演示的4级联动菜单:州+国家+城市+地区
在本项目中,"漂亮的Extjs+struts2实现联动下拉"是一个集成这两个技术的实例,实现了在Web应用中动态更新下拉框选项的功能。 联动下拉框是一种常见的交互设计,常见于需要根据前一个选择项动态加载后一个选择项的...
ExtJS的ComboBox是一个非常强大的组件,它用于创建下拉选择框。在Web应用程序中,我们经常需要实现二级联动效果,即一个ComboBox的选择会影响另一个ComboBox的显示内容。这在数据关联和筛选场景中尤为常见,例如省份...
5. **Layouts**:EXTJS的布局管理器确保组件在不同屏幕尺寸和分辨率下的适配,如Fit、Border、Accordion等布局。 6. **Drag & Drop**:EXTJS支持拖放操作,方便用户重新排列组件或在组件之间传输数据。 7. **Ajax...
全选功能通常通过添加一个特殊的复选框来实现,该复选框与所有其他复选框的状态联动,当所有项被选中时,全选复选框自动选中;反之,当至少有一项未被选中时,全选复选框应该变为未选中状态。 问题的根源在于事件...
在EXTJS中,弹出框(也称为警告、信息或确认对话框)是用户界面交互的重要组成部分,常用于向用户提供信息、警告或者等待用户确认操作。实现EXTJS弹出框在n秒后自动消失,我们可以利用EXTJS的定时器(Ext.util....
在这个DEMO中,下拉复选框的实现可能就包含在ux目录下的某个文件中,它扩展了ExtJS的基础功能,提供了下拉复选框的特定行为和样式。 3. **resources** 目录:这个目录包含了ExtJS应用所需的各种资源,如CSS样式文件...
可以把ExtJS用在.Net、Java、Php等各种开发语言...全新的图表库:ExtJS4中, 全新的、插件自由的图表库是最激动人心的新功能之一,创建了饼图、线图、面积图、雷达图等等,所有这些都是动画的、易于配置的和可扩展的。
《使用ExtJS6.0开发应用框架》对应的源码 详见http://download.csdn.net/detail/superlazy/8948511
extjs4.1 框架和文档 从官网下载的extjs-4.1.0-rc1
在"EXT JS"这一标签下,我们关注的是EXTJS框架的使用和学习。EXTJS 4.1.4是该框架的一个稳定版本,提供了大量的改进和新功能。例如,这个版本引入了新的布局管理器,使得页面布局更加灵活和精细;同时增强了数据包层...
ExtJS 2.0的核心特性之一是组件化开发。它包含了一系列预定义的UI组件,如表格、面板、窗口、菜单、按钮等,这些组件可以像积木一样组合使用,构建复杂的Web界面。每个组件都有自己的属性、方法和事件,方便定制和...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
- `extjs复选框树.js`:这是实现上述功能的JavaScript代码,包括工具类和针对树节点的操作方法。 - `样式文件.css`:可能包含了一些自定义的样式,用于美化复选框和树的显示效果。 - `示例HTML文件.html`:演示如何...