52,792
社区成员
发帖
与我相关
我的任务
分享extjs 根据ComboBox的下拉值，生成不同的field
js/field.js
materialSearchFiled=Ext.extend(Ext.form.Field,{
constructor:function (){
materialSearchFiled.superclass.constructor.call(this,{
id:'find_Name',
// renderTo : Ext.getBody(),
xtype:'field',
value :'请输入素材名称',
listeners:{
focus:function (s){
this.setValue("");
},
blur:function (){
if (this.getValue().length == 0){
this.setValue("请输入素材名称");
}
}
}
})
}
});
materialSearchBeginSize=Ext.extend(Ext.form.Field,{
constructor:function (){
materialSearchBeginSize.superclass.constructor.call(this,{
id:'find_beginSize',
// renderTo:Ext.getBody(),
xtype:'field',
value:'起始值(单位KB)',
listeners:{
focus:function (){
this.setValue("");
},
blur:function (){
if (this.getValue().length == 0){
this.setValue('起始值(单位KB)')
}
}
}
})
}
});
materialSearchEndSize=Ext.extend(Ext.form.Field,{
constructor:function (){
materialSearchEndSize.superclass.constructor.call(this,{
id:'find_endSize',
// renderTo:Ext.getBody(),
// regex:/^[^\d\.]+?$/,
value:'结束值(单位KB)',
listeners:{
focus:function (){
this.setValue("");
},
blur:function (){
if (this.getValue().length == 0){
this.setValue('结束值(单位KB)')
}
},
change:function (thiz,newValue,oldValue){
// alert("--"+newValue.replace(^/[^\d\.]+?/g,''))
}
}
})
}
});
materialSearchEmpty=Ext.extend(Ext.form.Field,{
constructor:function (){
materialSearchEmpty.superclass.constructor.call(this,{
hidden :true
})
}
});
materialfindToolbar = Ext.extend(Ext.Toolbar,{
choiceSearch:null,
choiceSearch1 : null,
constructor:function (){
choiceSearch = new materialSearchFiled();
choiceSearch1=new materialSearchEmpty();
materialfindToolbar.superclass.constructor.call(this,{
items : [
{
xtype: 'combo',
triggerAction: 'all',
width:100,
displayField: 'name',
emptyText:"素材名称",
id:'materCombo',
store:[
'素材名称',
'大小',
'类型'
],
listeners:{
select:function (combo, record, index){
choiceCombo=index
alert(index + "--" + record.data.text) // 根据选择的index 生成不同的Field
if (index == 0){
choiceSearch = new materialSearchFiled();
}
else if (index == 1){
}
}
}
}
,new Ext.Toolbar.Separator(),
choiceSearch,
choiceSearch1
,{
id:'search_name',
cls:'search',
text:'查询'
},new Ext.Toolbar.Fill(), // 右对齐
{
id : 'materialUplpad',
text : '上传',
aligh : 'right'
}, new Ext.Toolbar.Separator(), {
id : 'materialDel',
text : '删除'
}]
})
}
})
materialGridPanel = Ext.extend(Ext.grid.GridPanel, {
mToolbar : null,
constructor:function (){
mToolbar = new materialfindToolbar();
materialGridPanel.superclass.constructor.call(this,{
renderTo : Ext.getBody(),
// title:'dsf',
tbar : mToolbar
})
}
})
页面
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget='side';
new materialGridPanel();
})
需要实现的效果：
选择 “素材名称” 调用 materialSearchFiled 这个组件 ，并显示出来，
选择 “大小” 调用 materialSearchBeginSize materialSearchEndSize 这两个组件 ，并显示出来，
把materialSearchFiled 清空
可以直接运行，请各位高手帮一个忙，搞了一天，没有搞出来，谢谢了。。
...全文
请发表友善的回复…
发表回复
greatmind829 2011-02-15
- 打赏
- 举报
再问你一个问题：Ext.form.Field 输入框只能输入数字，数字带有小数点。
greatmind829 2011-02-15
- 打赏
- 举报
谢谢你，我解决了。。
greatmind829 2011-02-15
- 打赏
- 举报
谢谢你的耐心讲解，我不想要这个ALL,应如何去更改。我知道问题出在哪里，但是我不知道怎么去改。
dataminer_2007 2011-02-15
- 打赏
- 举报
我用的是 ext3.2.1, combo 默认是 all 显示所有的, 当选择不同的值, 显示对应的查询 textfield, 时间关系没有排版和定义好变量名，见谅
materialSearchFiled=Ext.extend(Ext.form.Field,{
constructor:function (){
materialSearchFiled.superclass.constructor.call(this,{
id:'find_Name',
// renderTo : Ext.getBody(),
xtype:'field',
value :'请输入素材名称',
listeners:{
focus:function (s){
this.setValue("");
},
blur:function (){
if (this.getValue().length == 0){
this.setValue("请输入素材名称");
}
}
}
})
}
});
materialSearchBeginSize=Ext.extend(Ext.form.Field,{
constructor:function (){
materialSearchBeginSize.superclass.constructor.call(this,{
id:'find_beginSize',
// renderTo:Ext.getBody(),
xtype:'field',
value:'起始值(单位KB)',
listeners:{
focus:function (){
this.setValue("");
},
blur:function (){
if (this.getValue().length == 0){
this.setValue('起始值(单位KB)')
}
}
}
})
}
});
materialSearchEndSize=Ext.extend(Ext.form.Field,{
constructor:function (){
materialSearchEndSize.superclass.constructor.call(this,{
id:'find_endSize',
// renderTo:Ext.getBody(),
// regex:/^[^\d\.]+?$/,
value:'结束值(单位KB)',
listeners:{
focus:function (){
this.setValue("");
},
blur:function (){
if (this.getValue().length == 0){
this.setValue('结束值(单位KB)')
}
},
change:function (thiz,newValue,oldValue){
// alert("--"+newValue.replace(^/[^\d\.]+?/g,''))
}
}
})
}
});
materialSearchEmpty=Ext.extend(Ext.form.Field,{
constructor:function (){
materialSearchEmpty.superclass.constructor.call(this,{
hidden :true
})
}
});
materialfindToolbar = Ext.extend(Ext.Toolbar,{
choiceSearch:null,
choiceSearch1 : null,
constructor:function (){
choiceSearch = new materialSearchFiled();
choiceSearch1=new materialSearchEmpty();
a = new materialSearchBeginSize();
b = new materialSearchEndSize();
materialfindToolbar.superclass.constructor.call(this,{
items : [
{
xtype: 'combo',
triggerAction: 'all',
width:100,
displayField: 'name',
emptyText:"ALL",
id:'materCombo',
store:[
'ALL',
'素材名称',
'大小',
'类型'
],
listeners:{
select:function (combo, record, index){
choiceCombo=index
//alert(index + "--" + record.data.text) // 根据选择的index 生成不同的Field
if (index == 0){
//choiceSearch = new materialSearchFiled();
Ext.getCmp("find_Name").show();
Ext.getCmp("find_beginSize").show();
Ext.getCmp("find_endSize").show();
}
else if (index == 1){
Ext.getCmp("find_Name").show();
Ext.getCmp("find_beginSize").hide();
Ext.getCmp("find_endSize").hide();
}
else if (index == 2){
Ext.getCmp("find_Name").hide();
Ext.getCmp("find_beginSize").show();
Ext.getCmp("find_endSize").show();
}
}
}
}
,new Ext.Toolbar.Separator(),
choiceSearch,
a,b
//choiceSearch1
,{
id:'search_name',
cls:'search',
text:'查询'
},new Ext.Toolbar.Fill(), // 右对齐
{
id : 'materialUplpad',
text : '上传',
aligh : 'right'
}, new Ext.Toolbar.Separator(), {
id : 'materialDel',
text : '删除'
}]
})
}
})
materialGridPanel = Ext.extend(Ext.grid.GridPanel, {
mToolbar : null,
constructor:function (){
this["store"] = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : ''
}),
pruneModifiedRecords : true,
autoLoad: false,
reader : new Ext.data.JsonReader({
root : 'root'
}, [{
name : 'jobno',
type : 'string'
}])
});
mToolbar = new materialfindToolbar();
materialGridPanel.superclass.constructor.call(this,{
renderTo : Ext.getBody(),
// title:'dsf',
tbar : mToolbar,
columns : [{
header : "Job No.",
sortable : true,
dataIndex : "jobno",
width: 150
}]
})
}
})
greatmind829 2011-02-15
- 打赏
- 举报
可否贴一下代码，刚学EXTJS 没多久。columns, store 加在哪里。
greatmind829 2011-02-15
- 打赏
- 举报
我用的是2.2的
dataminer_2007 2011-02-15
- 打赏
- 举报
加了 columns, store 就可以了
最简单的办法, 把那几个 textfield 都放在后面然后都设置为 hidden: true, 然后选择的时候把对应的 textfield 显示出来, Ext.getCmp("").show() 就可以了, 隐藏就用 Ext.getCmp("").hide(),代码就不用贴了吧
最简单的办法, 把那几个 textfield 都放在后面然后都设置为 hidden: true, 然后选择的时候把对应的 textfield 显示出来, Ext.getCmp("").show() 就可以了, 隐藏就用 Ext.getCmp("").hide(),代码就不用贴了吧
dataminer_2007 2011-02-15
- 打赏
- 举报
你用的哪个版本,我这里怎么报错
