Extjs grid里某个column的xtype为combobox，怎样在页面ready的时候加载combobox下拉列表理的数据？

Posted 2023-04-16

我定义了一个panel:
Ext.define(‘MyPanel’,
...
//store : panelStore,

colums[
...


text : 'User Name',
dataIndex: 'username',

editor:
//store: boxStore,
xtype: 'combobox'




]

)
在页面ready的时候创建panelStore, boxStore和MyPanel, 并将boxStore 塞给MyPanel的store：
Ext.onReady(function()
var panelStore = Ext.create('Ext.data.Store',...);

var boxStore = Ext.create('Ext.data.Store',...);
Ext.create('MyPanel',
renderTo : Ext.getElementById('facility-example'),
store : panelStore
);//这里创建MyPanel，并把panelStore数据塞给panel,

...//问题是我怎样把boxStore 塞给MyPanel里面那个text 为“User Name”的column？



那个column是 combobox的，有下拉列表，下拉列表中的数据读自boxStore。

ComboBox 定义有问题。你的 MyPanel 是  Ext.panel.Panel 还是 Ext.panel.Grid   ?

var combo = Ext.create('Ext.form.field.ComboBox', 
    displayField : 'name',
    valueField : 'code',
    editable : false,
    store : comboStore,
    labelAlign : 'right',
    width : 260,
    labelWidth : 60,
    emptyText : '名称',
    fieldLabel : '名称',
);

追问

跟panel 无关，事实上它是 Ext.tree.pabel

追答var OneStore= Ext.create('Ext.data.Store', 
    fields : ['code', 'name'],
    data : [
        name : "性别",
        code : null
    , 
        name : "男",
        code : "01"
    , 
        name : "女",
        code : "02"
    ]
);
var OneCombo = Ext.create('Ext.form.ComboBox', 
    store : OneStore,
    allowBlank : true,
    displayField : 'name',
    valueField : 'code',
    emptyText : '性别',
    editable : false  // 不可编辑
);
getOneDisplay = function(value, meta, record) 
    var rowIndex = OneCombo.store.find("code", "" + value);
    if (rowIndex < 0)
    return '';
    var record = OneCombo.store.getAt(rowIndex);
    return record ? record.get('name') : '';

// 在你的columns 写成如下
columns : [
    dataIndex : 'sexuality',
    text : '性别',
    width : 120,
    editor : OneCombo,
    renderer : getOneDisplay
]

不管是 treeGrid, 还是普通 Grid 都可以，参考下。

参考技术A var states = Ext.create('Ext.data.Store',
fields: ['abbr', 'name'],
data : [
"abbr":"AL", "name":"Alabama",
"abbr":"AK", "name":"Alaska",
"abbr":"AZ", "name":"Arizona"
]
);

Ext.create('Ext.form.ComboBox',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
valueField: 'abbr',
renderTo: Ext.getBody(),
// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">abbr - name</div>',
'</tpl>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'abbr - name',
'</tpl>'
)
); 参考技术B boxStore 创建完就 load() 加载

boxStore.load();这句话写在MyPanel创建之前追问

我的意思是创建MyPanel时里面怎么添加代码，把column的store设为boxStore，目前我是在创建后解决的：
mp = Ext.create('MyPanel',...);
mp.columns[4].editor.store = boxStore；//4是index

extjs grid怎么序号自增

想让序号自增，

想用序号=当前行数+1这样
但是不知道怎么取当前行数
求高手解答

还是说有其他方法？
在表格中新增行的时候想让序号自增

ExtJs Grid分页时，默认情况下每页的序号都是从1起始的，这往往不符合我们的习惯。这里实现了序 号的自动增加。
实现步骤如下：
1、定义全局变量。
var record_start = 0;

2、Grid的columns部分的定义。
columns　:　[new　Ext.grid.RowNumberer(
　　 header　:　"序号",
　　 width　:　40,
　　 renderer:function(value,metadata,record,rowIndex)
　　　 return　record_start　+　1　+　rowIndex;
　　
　 ),　
　　 header　:　"项目编号",
　　 width　:　50,
　　 sortable　:　false,
　　 dataIndex　:　"projectNumber"
　 ]

3、Grid 的PagingToolbar部分的定义。
bbar　:　new　Ext.PagingToolbar(
　　 store　:　grid_store,
　　 pageSize　:　8,
　　 displayInfo　:　true,
　　 beforePageText:"第",
　　 afterPageText:"/　0页",
　　 firstText:"首页",
　　 prevText:"上一页",
　　 nextText:"下一页",
　　 lastText:"尾页",
　　 refreshText:"刷新",
　　 displayMsg　:　"当前显示记录从　0　-　1　总　2　条记录",
　　 emptyMsg　:　"没有相关记录!",
　　 doLoad　:　function(start)
　　　 record_start　=　start;
　　　　　　　　　　 var　o　=　,　pn　=　this.paramNames;
　　　　　　　　　　 o[pn.start]　=　start;
　　　　　　　　　　 o[pn.limit]　=　this.pageSize;
　　　　　　　　　　 this.store.load(params:o);
　　　　　
　 )

说明：
1、全局变量record_start用于记录列表开始的数据点，如第一页，那么为0，如第二页，那么为8，这 里分页pagesize设置为了8
2、分页中doLoad这部分的代码来自于Ext.PagingToolbar的doLoad方法，PagingToolbar在分页发生变 化时会调用这个方法来重新load数据，只是多了个对全局变量进行赋值的步骤，为的就是在分页发生变化 时，记录传递给Url的参数start的值。
3、在columns中实例化Ext.grid.RowNumberer时，重写了renderer方法，其实之所以这样做的原因，大家看一下 Ext.grid.RowNumberer源码中的renderer方法就知道了，就是根据行号+1来设置序号的，这里我们改这个方法，是为了得到行号+分页变化时得到的start参数的值+1 的值，这样就能够正确得到序号结合分页的数据了。 参考技术A 想让序号自增在ColumnModel添加这句就可以了
new Ext.grid.RowNumberer(),
如果是想取出行号
header:"Name", width:80, sortable:true,renderer:
function(value, cellmeta, record, rowIndex, columnIndex, store)
rowIndex就是行号。
或者store.data.lenght,是当然总行数。本回答被提问者采纳 参考技术B var colModel =newExt.grid.ColumnModel([
new Ext.grid.RowNumberer(),
header:"Name", width:80, sortable:true
]);
这么定义就可以了，用Ext.grid.RowNumberer()列