[英]Dynamically checkboxes, radio, checkboxgroups, radiogroups extjs
嗨,亲爱的stackoverflow伙计们!
我在stackowerflow中搜索了此问题,但没有一个对我有帮助
my model is like that:
Ext.define('soru', {
extend : 'Ext.data.Model',
fields : [{
name : 'CEVAP',
type : 'string'
},
{
name : 'VALUE',
type : 'int'
},
{
name : 'RECNO',
type : 'int'
}
]
});
我的商店就像:
checkboxArray = [];
var myStoresoru = Ext.create('Ext.data.Store', {
model : 'soru',
id:'sorustore',
proxy : {
type : 'ajax',
url : 'fetchsoru.php',
reader : {
type : 'json',
root : 'data'
}
},
listeners: {
load: function(value, records, options) {
for(var i = 0; i < records.length; i++) {
console.log(records);
console.log(records.length);
checkboxArray.push(new Ext.form.Checkbox(
{
boxLabel: value.data.items[i].data.CEVAP,
name: value.data.keys[i],
xtype: 'checkbox',
inputValue: value.data.items[i].data.VALUE,
id: value.data.items[i].data.RECNO
}));
//{id: records[i].data.id, boxLabel: records[i].data.pagetitle});
}
}
},
autoLoad : false
});
myStoresoru.load();
我的复选框组是这样的:
var check= new Ext.form.CheckboxGroup({
xtype: 'checkboxgroup',//combo çoklu seçim olmalı
fieldLabel: 'İklimsa’yı tercih nedeniniz? ',
//store: myStoresoru,
labelWidth:300,
//columns:2,
name : 'tercih',
id : 'tercih',
itemId: 'tercih',
hiddenName: 'tercih',
items:[checkboxArray]
});
和形式:
form = Ext.create('Ext.form.Panel', { items : [check]
});
好吧,我的问题是复选框没有加载到checkboxgroup中。当我在控制台上键入checckboxArray时,我可以看到checckboxArray存在,但我不知道为什么不显示checckboxes
感谢您重播我。 我已经解决了,我想分享我的解决方案,以帮助在extjs中搜索动态复选框和chexbox组的人
在我的商店中,我写了我的复选框组和广播组
var myStoresoru = Ext.create('Ext.data.Store', {
model : 'soru',
id:'sorustore',
proxy : {
type : 'ajax',
url : 'fetchsoru.php',
reader : {
type : 'json',
root : 'data'
}
},
listeners: {
load: function(value, records, options) {
for(var i = 0; i < records.length; i++) {
//console.log(records);
//console.log(records.length);
if(value.data.items[i].data.GROUPID==0)
{
checkboxGroupArray.push(new Ext.form.CheckboxGroup(
{
fieldLabel: value.data.items[i].data.SORU,
labelWidth:300,
border: '10 5 3 10',
bodyPadding: 10,
columns:2,
id: value.data.items[i].data.RECNOSORU,
xtype: 'checkboxgroup',
originalValue:value.data.items[i].data.SORUTIPI
//layout:
}));
}
else
{
radioGroupArray.push(new Ext.form.RadioGroup(
{
fieldLabel: value.data.items[i].data.SORU,
border: '10 5 3 10',
bodyPadding: 10,
labelWidth:300,
columns:2,
id: value.data.items[i].data.RECNOSORU,
xtype: 'radiogroup',
originalValue:value.data.items[i].data.SORUTIPI
}));
}
} }
},
autoLoad : false
});
并将checboxes和radiofield加载到其gruop项中后,以表格形式加载它们
var myStorecevap = Ext.create('Ext.data.Store', {
model : 'cevap',
id:'cevapstore',
proxy : {
type : 'ajax',
url : 'fetchcevap.php',
reader : {
type : 'json',
root : 'data'
}
},
listeners: {
load: function(value, records, options) {
for(var i = 0; i < records.length; i++) {
//console.log(records);
//console.log(records.length);
if(value.data.items[i].data.GROUPID==0)
{
checkboxArray.push(new Ext.form.Checkbox(
{
boxLabel: value.data.items[i].data.CEVAP,
name: value.data.keys[i],
xtype: 'checkbox',
labelWidth:300,
columns:2,
inputValue: value.data.items[i].data.VALUE,
id: value.data.items[i].data.RECNO,
stateId:value.data.items[i].data.SORUTIPI
}));
}
else
{
radioArray.push(new Ext.form.Radio(
{
boxLabel: value.data.items[i].data.CEVAP,
name: value.data.items[i].data.RECNOSORU,
xtype: 'radiofield',
labelWidth:300,
columns:2,
inputValue: value.data.items[i].data.VALUE,
// id: value.data.items[i].data.RECNOS,
// stateId:value.data.items[i].data.SORUTIPI
}));
}
//console.log(checkboxGroupArray);
}
//var totalcount=checkboxArray.length+radioGroupArray.length;
for(var i = 0; i < checkboxArray.length; i++)
{
for(var j = 0; j < checkboxGroupArray.length; j++)
{
console.log(value.data.items[i].data.RECNOSORU);
var den=value.data.items[i].data.RECNOSORU;
if(checkboxGroupArray[j].id==den)
{
checkboxGroupArray[j].add(checkboxArray[i]);
console.log(checkboxGroupArray);
}
}
}
Ext.getCmp('forms').add(checkboxGroupArray);
for(var k = 0; k < radioArray.length; k++)
{
for(var m = 0; m < radioGroupArray.length; m++)
{
//console.log(value.data.items[k].data.RECNOSORU);
var denm=radioArray[k].name;
console.log(radioArray[k].name);
//console.log(radioGroupArray[m].id);
if(radioGroupArray[m].id==denm)
{
radioGroupArray[m].add(radioArray[k]);
console.log(radioGroupArray[m]);
}
}
}
Ext.getCmp('forms').add(radioGroupArray);
arraytext.push(new Ext.form.TextArea(
{
xtype : 'textareafield',
grow : true,
labelWidth:300,
autoScroll : true,
name : 'message',
id: 'message',
fieldLabel: 'İlave Görüş ve Notlarınız',
anchor : '100%'
}));
Ext.getCmp('forms').add(arraytext);
}
},
autoLoad : false
});
问题是,当您将checkboxArray添加到checkboxGroup时,该数组为空。 当加载商店的ajax请求完成并且数组已满时,checkboxGroup中的项目不会更新。
解决方案是在填充后将checkboxArray添加到checkboxGroup中:
...
load: function(value, records, options) {
for(var i = 0; i < records.length; i++) {
console.log(records);
console.log(records.length);
checkboxArray.push(new Ext.form.Checkbox(
{
boxLabel: value.data.items[i].data.CEVAP,
name: value.data.keys[i],
xtype: 'checkbox',
inputValue: value.data.items[i].data.VALUE,
id: value.data.items[i].data.RECNO
}));
check.add(checkboxArray);
//{id: records[i].data.id, boxLabel: records[i].data.pagetitle});
}
而且,您应该将数组添加到复选框组的方式是:
items: checkboxArray
因为它本身已经是一个数组。 那条线不再是必须的了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.