comboboxGrid多列

最新推荐文章于 2020-01-12 16:05:29 发布

de273364045

最新推荐文章于 2020-01-12 16:05:29 发布

阅读量198

点赞数

分类专栏： ext 文章标签： combobox Grid 多列

本文链接：https://blog.csdn.net/de273364045/article/details/84383807

版权

ext 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

未完善版，后期将贴出完善版，完善版主要是封装了grid

comboboxGrid.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

Ext.onReady(function(){

var cbArr = [['4',"张麻子",'man'], ['6',"汤师爷",'man'], ['8',"黄四郎",'man'],['12',"夫人",'woman'], ['33',"小六子",'man']] ;

var cbJson = [{id:'4',name:'张麻子',sex:'man'},{id:'6',name:'汤师爷',sex:'man'},{id:'12',name:'夫人',sex:'woman'}];

var win=new Ext.Window({

title:"hello",

width:600,

height:400,

items: [{

title: '参保凭证',

height:450,

xtype:'form',

items: [{

xtype: "textfield",

itemId: "letterNumber",

name: "letterNumber",

fieldLabel: '编号1<font color="#FF0000" >*</font>',

anchor: "50%",

maxLength : 50,

maxLengthText : '最大长度为50',

allowBlank: false

}, {

xtype:'steelcombogird'

,type:'combogrid'

,fieldLabel:'下拉列表'

,name:'steelcombo1111'

,editable : true

,displayField : 'functionName'

,valueField : 'functionId'

//这个不是必须的-当要用到影藏列时，可以单独定义

//,fields:[

//'functionId', 'functionName', 'parent', 'type', 'sort', 'status'

//]

,columns:[

{dataIndex:'functionId',header:'ID',sortable:true }

,{dataIndex:'functionName', header:'功能名称',sortable:true }

,{dataIndex:'type',header:'类型',sortable:true}

]

,paging:true

,url:'comboboxGridData.jsp'

}

}]

});

win.show();

});

</script>

</head>

<body>

</body>

</html>

steelcombogird.js

/**

* 部分特定配置方法如下（其他的和ComboBox一样）：

* ------------------------------------------

* 如果需要对grid有特殊的配置，请使用 gridCfg 配置项

* url: [必须] 数据源url

* columns：[必须] grid的cm

* displayField : [必须] 显示对应的列默认为 text

* valueField : [必须] 值对应的列默认为 value

* paging： [可选] 是否分页默认false不分页

* fields： [可选] store的数据列、默认是根据columns的dataIndex构造出了的

* ------------------------------------------

* @extends Ext.form.ComboBox

Ext.SteelComboGrid = Ext.extend(Ext.form.ComboBox, {

steel:1,

JSONSTORE_ROOT:null,

JSONSTORE_TOTALPROPERTY:null,

doQuery: function(q, forceAll) {

q = Ext.isEmpty(q) ? '': q;

var qe = {

query: q,

forceAll: forceAll,

combo: this,

cancel: false

};

if (this.fireEvent('beforequery', qe) === false || qe.cancel) {

return false;

}

q = qe.query;

forceAll = qe.forceAll;

if (forceAll === true || (q.length >= this.minChars)) {

if (this.lastQuery !== q) {

this.lastQuery = q;

this.selectedIndex = -1;

this.store.clearFilter();

this.onLoad();

} else {

this.selectedIndex = -1;

this.onLoad();

}

onLoad: function() {

if (!this.hasFocus) {

return;

}

if(this.isExpanded()){

this.collapse();

}

this.expand();

this.restrictHeight();

if (this.lastQuery == this.allQuery) {

if (this.editable) {

this.el.dom.select();

}

if (this.autoSelect !== false && !this.selectByValue(this.value, true)) {

this.select(0, true);

}

} else {

if (this.autoSelect !== false) {

this.selectNext();

}

if (this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE) {

this.taTask.delay(this.typeAheadDelay);

}

listeners:{

expand:function(){

alert(this.el.dom.value);

this.grid.render('steel-'+this.getId());

this.grid.store.removeAll ();

//此处可以改成axj从后台得到数据

if(1==this.steel){

var cbJson ={totalProperty:5, root:[

{functionId:'1',functionName:'夫人',type:'woman'},

{functionId:'2',functionName:'桃花',type:'woman'},

{functionId:'3',functionName:'杏花',type:'woman'},

{functionId:'4',functionName:'梨花',type:'woman'},

{functionId:'5',functionName:'梅花',type:'woman'}]};

this.grid.store.loadData(cbJson.root,true);

this.grid.store.JSONSTORE_ROOT=cbJson.root;

this.grid.store.JSONSTORE_TOTALPROPERTY=cbJson.totalProperty;

}

if(2==this.steel){

var cbJson = [

{functionId:'1',functionName:'夫人',type:'woman'},

{functionId:'2',functionName:'桃花',type:'woman'}];

this.grid.store.loadData(cbJson,true);

}

this.steel++;

}

store : new Ext.data.SimpleStore({

fields : [],

data : [[]]

}),

editable : this.editable||false,

mode : 'local',

emptyText : this.emptyText||"请选择",

allowBlank : this.allowBlank||true,

blankText : this.blankText||"必须输入!",

triggerAction : 'all',

anchor : '50%',

displayField : 'text',

valueField : 'value',

tpl : '',

selectedClass : '',

grid: null,

/**

* grid的配置参数【可选】

* @type

gridCfg:{},

url: '',

//grid 的 Store

gridStore:null,

paging:false,

fields: [],

columns: [],

gridColumns: [],

initComponent : function() {

var me = this;

Ext.SteelComboGrid.superclass.initComponent.call(this);

this.tpl = "<tpl for='.'><div id='steel-"+this.getId()+"'></div></tpl>";

//如果没有定义fields 按照columns初始化

if(0==this.fields.length && this.columns){

if(0==this.columns.length)console.log("请为"+this.getName()+"定义columns属性");

Ext.each(this.columns,function(c){

me.fields.push(c.dataIndex);

});

}

this.gridStore = new Ext.data.JsonStore({

url:this.url,

/*proxy : new Ext.data.HttpProxy({

url : this.url,

method : 'post'

}),

reader: new Ext.data.JsonReader({

totalProperty:'totalProperty',

root:'root'},

[

{name: 'functionId'},

{name: 'functionName'},

{name: 'type'}

]) */

root:this.JSONSTORE_ROOT,

totalProperty:this.JSONSTORE_TOTALPROPERTY,

fields:this.fields

});

this.listWidth = 350;

this.maxHeight = 300;

this.gridColumns.push( new Ext.grid.RowNumberer());

Ext.each(this.columns,function(c){

me.gridColumns.push(c);

});

this.grid = new Ext.grid.GridPanel(Ext.apply({

title: ''

,border: false

,height : 200

,paging: this.paging

,searchField:'local'

,store: this.gridStore

,colModel:new Ext.grid.ColumnModel(this.gridColumns)

,bbar:new Ext.PagingToolbar({

pageSize:2,

store:me.gridStore,

displayInfo:true,

displayMsg:'显示第{1}条记录,一共有{2}条',

emptyMsg:'没有记录'

})

},this.gridCfg));

this.grid.on('rowclick', function(grid, rowIndex, e) {

var r = me.gridStore.getAt(rowIndex);

if(me.fireEvent('beforeselect', me, r, rowIndex) !== false){

me.setValue(r.data[me.valueField || me.displayField]);

me.collapse();

me.fireEvent('select', me, r, rowIndex);

}

});

this.onViewClick = function(doFocus){};

}

,getStore : function(){

return this.gridStore;

}

,getGrid : function(){

return this.grid;

}

,setValue : function(v){

var text = v;

if(this.valueField){

var r = this.findRecord(this.valueField, v);

if(r){

text = r.data[this.displayField];

}else if(Ext.isDefined(this.valueNotFoundText)){

text = this.valueNotFoundText;

}

this.lastSelectionText = text;

if(this.hiddenField){

this.hiddenField.value = Ext.value(v, '');

}

Ext.form.ComboBox.superclass.setValue.call(this, text);

this.value = v;

return this;

}

,findRecord : function(prop, value){

var record;

if(this.gridStore.getCount() > 0){

this.gridStore.each(function(r){

if(r.data[prop] == value){

record = r;

return false;

}

});

}

return record;

}

});

Ext.reg('steelcombogird', Ext.SteelComboGrid);

de273364045

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
comboboxGrid多列

未完善版，后期将贴出完善版，完善版主要是封装了gridcomboboxGrid.jsp&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt;%String path = request.getContextPath();String basePath = reques...
复制链接

扫一扫

专栏目录