PDA

View Full Version : My "Embed Anything" in GridPanel and problem with it + tab



Jack9
24 Sep 2009, 3:01 PM
First of all, I've been unhappy, overall, with the implementations of [control X] into grids (especially grids with checkbox selection models!). This is probably because I'm not familiar enough with Ext/javascript, but it remains the driving issue in why I got here. I finally got a working prototype below.

Included, is an ad-hoc (hackish) way to get checkbox selection model to work sanely. What I mean to say is, clicking on an element in the row will not cause the row to select/deselect. You must explicitly click the checkbox. That being said, there's a bit of event complexity involved in it, of course, the source of my problem with a tab panel.

I'm not completely sure why my elements arent being rendered to the grid in the inactive panel when it's brought forward. Thanks for looking and maybe it will be useful to others insofar that it works outside of tabPanels :p This is the javascript:



Ext.onReady(function(){

Ext.QuickTips.init();

var items1Store = new Ext.data.ArrayStore({
data: []
,fields: [
{name: 'name'}
],
listeners:{
load:function(){
console.debug("Items1Len:"+this.data.length);
for(var i=this.data.length;i--;)
{
new Ext.form.Checkbox({
val: i
,id: 'items1selection_'+i
,renderTo: document.getElementById('items1select_'+i)
,listeners:{
check:function(){
var cb = Ext.getCmp('items1selection_'+this.val);
if(cb.getValue())
{
items1Tab.getSelectionModel().selectRow(this.val,true);
}else{
items1Tab.getSelectionModel().deselectRow(this.val);
}
}
}
});
new Ext.Button({
text:"Addon"
,renderTo: document.getElementById('items1addon_'+i)

});
new Ext.Button({
text:"Detail"
,renderTo: document.getElementById('items1detail_'+i)

});
}
}
}
});

var items2Store = new Ext.data.ArrayStore({
data: []
,fields: [
{name: 'name'}
]
,listeners:{
load:function(){
console.debug("items2Len:"+this.data.length);
for(var i=this.data.length;i--;)
{
new Ext.form.Checkbox({
val: i
,id: 'items2selection_'+i
,renderTo: document.getElementById('items2select_'+i)
,listeners:{
check:function(){
var cb = Ext.getCmp('items2selection_'+this.val);
if(cb.getValue())
{
items2Tab.getSelectionModel().selectRow(this.val,true);
}else{
items2Tab.getSelectionModel().deselectRow(this.val);
}
}
}
});
new Ext.Button({
text:"Addon"
,renderTo: document.getElementById('items2addon_'+i)

});
new Ext.Button({
text:"Detail"
,renderTo: document.getElementById('items2detail_'+i)

});
}
}
}
});

var stateDS = new Ext.data.Store({
id:'stateDS'
,url: 'http://10.10.15.90/test/test.php'
,reader: new Ext.data.JsonReader(
{}
,[
,{name: 'items1', localroot: 'items1'}
,{name: 'items2', localroot: 'items2'}
,{items1:[
{name: 'name'}
,{name: 'otheritems',localroot: 'otheritems'}
,{otheritems:[
{name: 'name'}
]}
]}
,{items2:[
{name: 'name'}
,{name: 'otheritems',localroot: 'otheritems'}
,{otheritems:[
{name: 'name'}
]}
]}
]
)
,listeners:{
load: function(options){
var data = stateDS.getAt('0');
var items1Arr = new Array(data.get('items1').length);
for (var i = data.get('items1').length; i--;) {
items1Arr[i] = new Array(data.get('items1')[i]['name']);
}
items1Store.loadData(items1Arr);
}
}
});

var cbsm = new Ext.grid.CheckboxSelectionModel({
listeners:{
beforerowselect:function(thisSM,rowIndex,record){
var cb = Ext.getCmp('items1selection_'+rowIndex);

if(!cb.getValue() || (cb.getValue() && this.isSelected(rowIndex)))
{
return false;
}
}
}
});

var items1Tab = new Ext.grid.GridPanel({
title:"Items1"
,autoHeight:true
,autoScroll:true
,hideBorders:true
,border:false
,loadMask: true
,ds:items1Store
,sm:cbsm
,columns: [
{
header:''
,width: 20
,renderer: function(value, metaData, record, rowIndex, colIndex, store){
return "<div id='items1select_"+rowIndex+"'/>";
}
},{
header: "Item1 Name"
,width: 500
,sortable: true
,dataIndex: 'name'
},{
header: "Addons"
,align: 'center'
,dataIndex:''
,width: 80
,renderer: function(value, metaData, record, rowIndex, colIndex, store){
return "<div id='items1addon_"+rowIndex+"'/>";
}
},{
header: "@Desc"
,align: 'center'
,dataIndex:''
,width: 80
,renderer: function(value, metaData, record, rowIndex, colIndex, store){
return "<div id='items1detail_"+rowIndex+"'/>";
}
}]
});

var cbsm2 = new Ext.grid.CheckboxSelectionModel({
listeners:{
beforerowselect:function(thisSM,rowIndex,record){
var cb = Ext.getCmp('items2selection_'+rowIndex);

if(!cb.getValue() || (cb.getValue() && this.isSelected(rowIndex)))
{
return false;
}
}
}
});
var items2Tab = new Ext.grid.GridPanel({
title:"Items2"
,autoHeight:true
,autoScroll:true
,hideBorders:true
,border:false
,loadMask: true
,ds: items2Store
,sm:cbsm2
,columns: [
{
header:''
,width: 20
,renderer: function(value, metaData, record, rowIndex, colIndex, store){
return "<div id='items2select_"+rowIndex+"'/>";
}
},{
header: "Item2 Name"
,width: 500
,sortable: true
,dataIndex: 'name'
},{
header: "Addons"
,align: 'center'
,dataIndex:''
,width: 80
,renderer: function(value, metaData, record, rowIndex, colIndex, store){
return "<div id='items2addon_"+rowIndex+"'/>";
}
},{
header: "@Desc"
,align: 'center'
,dataIndex:''
,width: 80
,renderer: function(value, metaData, record, rowIndex, colIndex, store){
return "<div id='items2detail_"+rowIndex+"'/>";
}
}]
,listeners:{
afterrender:function(){
var data = stateDS.getAt('0');
var items2Arr = new Array(data.get('items2').length);
for(var i=data.get('items2').length;i--;)
{
items2Arr[i] = new Array(data.get('items2')[i]['name']);
}
items2Store.loadData(items2Arr); // calls store, which loads and is supposed to render components to divs
}
}
});

var tabPanel = new Ext.TabPanel({
activeTab: 0
,title: 'TabPanel'
,items:[
items1Tab
,items2Tab
]
});

var mainPanel = new Ext.form.FormPanel({
title: 'Main Panel'
,frame: true
,header:false
,width:697
,height:600
,style:{
marginTop: '5px',
marginLeft: '5px',
marginRight: '5px',
}
,items:[
new Ext.form.FieldSet({
title:'This is a fieldset'
,items:[
tabPanel
]
})
]
});

mainPanel.render(document.body);
stateDS.load();
});This is the JSON message:


[{
items1:[{
name: 'Item1_1',
otheritems: [{
name: 'Item1_1_Other_1'
},{
name: 'Item1_1_Other_2'
}]
},{
name: 'Item1_2',
otheritems: [{
name: 'Item1_2_Other_1'
},{
name: 'Item1_2_Other_2'
}],
},{
name: 'Item1_3',
otheritems: [{
name: 'Item1_3_Other_1'
},{
name: 'Item1_3_Other_2'
},{
name: 'Item1_3_Other_3'
}]
}],
items2:[{
name: 'Item2_1',
otheritems: [{
name: 'Item2_1_Other_1'
},{
name: 'Item2_1_Other_2'
}]
},{
name: 'Item2_2',
otheritems: [{
name: 'Item2_2_Other_1'
},{
name: 'Item2_2_Other_2'
}],
},{
name: 'Item2_3',
otheritems: [{
name: 'Item2_3_Other_1'
},{
name: 'Item2_3_Other_2'
},{
name: 'Item2_3_Other_3'
}]
}]
}]