① extjs中下拉框的内容实现有条件选择,对应的情况下可以选择一些对应的选项
参考代码如下:
{ header: '单位名称', dataIndex: 'unitname',
field:
{ xtype: 'combo',
editable: false,
emptyText: "请选择...",
valueField: "id",
displayField: "text",
mode: 'local',
store: storeddl
}
}
var storeddl = Ext.create('Ext.data.Store', {
proxy: {
type: 'ajax',
url: "../../Handler/SystemHandler/UnitHandler.ashx?Lx=ddl"
},
root: 'items',
forceSelection: true,
// lazyRender: true,
fields: ['id', 'text'],
listeners:
{
select: selectRow,
focus: eventFocus
}
});
② 用extjs技术怎么在行中嵌入下拉列表框
首先grid的是new Ext.grid.EditorGridPanel可编辑的列表。这里可以配置参数单击或双击编辑所在行,具体的见api。
然后是这里new Ext.grid.ColumnModel([
需要嵌入下拉列表框的列这样定义就哦了
{header : "合同状态",width : 100,sortable : true,align : "center",dataIndex : "state"
,editor : new Ext.form.ComboBox({//编辑的时候变成下拉框。
triggerAction : "all",
width : 120,
editable: false,
store : ["建立","执行","作废","完结"],
resizable : true,
mode : 'local',
lazyRender : true
})
}
③ Extjs怎么实现下拉框多选
|1、扩展js类库,在项目中建立一个 js文件,命名为:xxx.js 其代码为
if('function'!==typeofRegExp.escape)
{
RegExp.escape=function(s)
{
if('string'!==typeofs)
{
returns;
}
returns.replace(/([.*+?^=!:${}()|[]/\])/g,'\$1');
};
}
Ext.ns('Ext.form');
Ext.form.MultiSelect=Ext.extend(Ext.form.ComboBox,
{
checkField:'checked',
multi:true,
separator:',',
initComponent:function()
{
if(!this.tpl)
{
this.tpl='<tplfor=".">'+'<divclass="x-combo-list-item">'
+'<imgsrc="'+Ext.BLANK_IMAGE_URL+'"'
+'class="ux-MultiSelect-iconux-MultiSelect-icon-'
+'{[values.'+this.checkField+'?"checked":"unchecked"'
+']}">'
+'{[values.'+this.displayField+']}'
+'</div>'
+'</tpl>';
}
Ext.form.MultiSelect.superclass.initComponent.apply(this,arguments);
this.on(
{
scope:this,
beforequery:this.onBeforeQuery,
blur:this.onRealBlur
});
this.onLoad=this.onLoad.createSequence(function()
{
if(this.el)
{
varv=this.el.dom.value;
this.el.dom.value='';
this.el.dom.value=v;
}
});
},
initEvents:function()
{
Ext.form.MultiSelect.superclass.initEvents.apply(this,arguments);
this.keyNav.tab=false;
},
beforeBlur:function()
{
},
postBlur:function()
{
},
clearValue:function()
{
this.value='';
this.setRawValue(this.value);
this.store.clearFilter();
this.store.each(function(r)
{
r.set(this.checkField,false);
},this);
if(this.hiddenField)
{
this.hiddenField.value='';
}
this.applyEmptyText();
},
getCheckedDisplay:function()
{
varre=newRegExp(this.separator,"g");
returnthis.getCheckedValue(this.displayField).replace(re,this.separator+'');
},
getCheckedValue:function(field)
{
field=field||this.valueField;
varc=[];
varsnapshot=this.store.snapshot||this.store.data;
snapshot.each(function(r)
{
if(r.get(this.checkField))
{
c.push(r.get(field));
}
},this);
returnc.join(this.separator);
},
onBeforeQuery:function(qe)
{
qe.query=qe.query.replace(newRegExp(RegExp.escape(this.getCheckedDisplay())+'['+this.separator+']*'),'');
},
onRealBlur:function()
{
this.list.hide();
varrv=this.getRawValue();
varrva=rv.split(newRegExp(RegExp.escape(this.separator)+'*'));
varva=[];
varsnapshot=this.store.snapshot||this.store.data;
Ext.each(rva,function(v)
{
snapshot.each(function(r)
{
if(v===r.get(this.displayField))
{
va.push(r.get(this.valueField));
}
},this);
},this);
this.setValue(va.join(this.separator));
this.store.clearFilter();
},
onSelect:function(record,index)
{
if(this.fireEvent('beforeselect',this,record,index)!==false)
{
record.set(this.checkField,!record.get(this.checkField));
if(this.store.isFiltered())
{
this.doQuery(this.allQuery);
}
if(this.multi)
{
if(record.get("key")=="---"&&record.get(this.checkField))
{
this.setValue("---");
}
else
{
this.setValue(this.getCheckedValue());
}
}
else
{
this.clearValue();
this.value=record.get(this.valueField);
this.setRawValue(record.get(this.displayField));
this.list.hide();
}
this.fireEvent('select',this,record,index);
}
},
setValue:function(v)
{
if(v)
{
v=''+v;
if(this.valueField)
{
this.store.clearFilter();
this.store.each(function(r)
{
varchecked=!(!v.match('(^|'+this.separator+')'
+RegExp.escape(r.get(this.valueField))
+'('+this.separator+'|$)'));
r.set(this.checkField,checked);
},this);
this.value=this.getCheckedValue();
this.setRawValue(this.getCheckedDisplay());
if(this.hiddenField)
{
this.hiddenField.value=this.value;
}
}
else
{
this.value=v;
this.setRawValue(v);
if(this.hiddenField)
{
this.hiddenField.value=v;
}
}
if(this.el)
{
this.el.removeClass(this.emptyClass);
}
}
else
{
this.clearValue();
}
},
selectAll:function()
{
this.store.each(function(record)
{
record.set(this.checkField,true);
},this);
this.doQuery(this.allQuery);
this.setValue(this.getCheckedValue());
},
deselectAll:function()
{
this.clearValue();
}
});
Ext.reg('multiSelect',Ext.form.MultiSelect);
2、在ext-all.css文件最后,加入css样式
.ux-MultiSelect-icon{width:16px;height:16px;float:left;background-position:-1px-1px!important;background-repeat:no-repeat!important;}
.ux-MultiSelect-icon-checked{background:transparenturl(../images/default/menu/checked.gif);}
.ux-MultiSelect-icon-unchecked{background:transparenturl(../images/default/menu/unchecked.gif);}
3、使用
varDepartUserStore=newExt.data.Store(
{
proxy:newExt.data.HttpProxy(
{
url:'/Web/Manage/DeskTop/JSON/ScheleManager/GetSimpleDepartUserInfo.aspx'
}),
//读取Json
reader:newExt.data.JsonReader(
{totalProperty:"totalCount",root:"root"},
[
{name:'UserId',type:'int'},
{name:'UserName',type:'string'}
])
});
varDepartUserCbox=newExt.form.MultiSelect(
{
fieldLabel:'姓名',
labelStyle:'width:80px',
width:150,
editable:false,
id:'DepartUserDS',
hiddenName:'DepartUserIdDS',
store:DepartUserStore,
emptyText:'--请选择--',
allowBlank:false,
blankText:'请选择',
mode:'remote',
displayField:'UserName',
valueField:'UserId',
triggerAction:'all',
selectOnFocus:true,
listWidth:200
});
DepartUserStore.on('load',function()
{
DepartUserCbox.selectAll();//全选
});
DepartUserStore.load();
④ Extjs可编辑表格中的下拉框,新手求指导
sql?
select a.name name , b.aid form b inner join a on a.aid = b.aid
⑤ EXTJS 为下拉框赋值问题
EXTJS 下拉框 combobox 可以通过3种方式赋值
1定义时 用value:值
2.点击选项赋值
3.用setValue 或者 setRawValue 方法赋值
需要内注意的是容 setValue 或者 setRawValue 需要在对象 渲染后才能执行 否则或赋值失败
对于您的问题 要看代码 是否是在渲染后赋值 , 或者 在没有 setValue 时 是否正常
⑥ extjs 多选下拉框
用lvcombo插件就行了(地址:://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//lovcombo.extjs.eu/lovcombo-1.0.zip&id=1&pagename=FILE:%20download/lovcombo/lovcombo-1.0.zip)
教程:
{
xtype : 'lovcombo',
name : 'roles',
fieldLabel : 'Roles',
store : lvComboStore,
valueField : 'name',
displayField : 'name',
mode : 'local',
editable : true,
triggerAction : 'all'
}
⑦ extjs 下拉框怎么写
举个状态的域的例子,所传的值是隐藏域的值
{
内 fieldLabel : '状态',
容 hiddenName : 'news.status',
allowBlank : false,
xtype : 'combo',
editable : false,
mode : 'local',
triggerAction : 'all',
store : [['0', '禁用'], ['1', '激活']],
value : 1
},
另有一种,传的是显示域的值:
{
fieldLabel : '状态',
name : 'news.status',
allowBlank : false,
xtype : 'combo',
editable : false,
mode : 'local',
triggerAction : 'all',
store : ['禁用', '激活'],
value : 1
},