PDA

View Full Version : EXT Checked Tree - Checkboxes not rendering?



jmichaels
25 Sep 2012, 11:52 AM
Hello all,

I am new to EXT and in the process of implementing the EXT checked tree as a picker for a Symfony application we are using. I have the tree generating the JSON and rendering the tree correctly except for the checkboxes which are not being displayed at all.

Using: EXT 4.1.1 - Tree w/ checkboxes
CSS: js/extjs-4.1.1/resources/css/ext-all.css
JS: /js/extjs-4.1.1/ext-all.js

I have checked the CSS and it is pulling correctly.

When generating the JSON I have 'checked' set to false for each node.
Here is my script:

Ext.onReady(function() {
var market = $('#website_market_id').val(); // get market id selected


var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: "/js/getFeatureJson.php",
extraParams: {
market: market
},
actionMethods: 'POST'
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}]
});


var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
useArrows: true,
frame: true,
renderTo: 'tree-div',
width: 350,
height: 250,
dockedItems: [{
xtype: 'toolbar',
items: {
text: 'Get selected features',
handler: function(){
var records = tree.getView().getChecked(),
names = [];


Ext.Array.each(records, function(rec){
names.push(rec.get('text'));
});


Ext.MessageBox.show({
title: 'Selected Nodes',
msg: names.join('<br />'),
icon: Ext.MessageBox.INFO
});
}
}
}]
});
});

I have also pointed my EXT script to use the default check-nodes.json file included in the examples/tree folder with the same results. Looking in Firebug I can see there is no <input checkbox> being created but if I look at the example online the following is being generated by EXT:
<input type="button" role="checkbox" class="x-tree-checkbox x-tree-checkbox-checked" aria-checked="true">

Any ideas on why this input isnt being generated?

jmichaels
25 Sep 2012, 1:34 PM
Nevermind I found the issue. The default Symfony admin stylings were overwriting the styling for the checkboxes. I had to force the css to keep the width and height at 15px and all was well...

scottmartin
25 Sep 2012, 2:19 PM
Thank you for the update.

Scott.