Are alterations to the widget behaviors possible?

[piston]

I'm designing a cool project that uses mostly extjs stuff, but how easy/hard/impossible is it to change the stock behavior of these widgets?

Examples:

A Panel Change: I'd like for a panel to show a bunch of options that are clickable (radios, CBs, etc). Once a user clicks on some items and collapses the panel, the 'clicked' items will remain showing in the panel and the title bar will now show a different color (designating that item as having some sort of "problem")

Accordion Change: I need an accordion that collapses all the way down to one bar - and when you click on it, it expands to show lots of title bars which then can open further to show detailed text and forms. You would be able to add more title bars or copy the contents into into a new title bar - the accordion would grow with time as new items are added.

I'm a JS/Extjs noob, so are these possible or are these widgets closed for alterations?

[Animal]

It's all easy with 2.0.

Accordion. Try this:



Ext.onReady(function() {
mainLayout = new Ext.Viewport({
id: 'main-layout',
layout: 'border',
items: [{
region: 'north',
title: 'North',
height: 53
}, {
margins: '5 0 0 0',
cmargins: '5 5 0 0',
region: 'west',
title: 'West',
collapsible: true,
split: true,
width: 200
}, {
margins: '5 0 0 0',
region: 'center',
layout: 'fit',
border:false,
items: {
title: "Collapse Me",
collapsible: true,
layout: 'accordion',
items: [{
title: "Panel 1",
html: "foo bar"
}, {
title: "Panel 2",
html: "foo bar"
}, {
title: "Panel 3",
html: "foo bar"
}, {
title: "Panel 4",
html: "foo bar"
}]
},
bbar: new Ext.Toolbar([{
id: 'foobar',
text: 'Click me'
}])
}, {
region: 'south',
title: 'South',
collapsible: true,
split: true,
height: 100
}]
});
});


The center region contains a collapsing accordion. You can make the whole thing collapsible because it's a Panel which are collapsible.

The other stuff, I don't understand. You want to collapse a Panel, but still have contents visisble? Then it's not collapsed.

Changing the title bar region is just a matter of addoing your own CSS.

[piston]

damn it must be nice to be so good at this stuff - i wouldn't leave the house. That looks really good - I can make that panel into a free-form panel though, right? And that "Click Me" button would be able to either add accordion bars or copy contents of one into a new one?

To explain the collapsing - my panels will have tons of clickable options (it will be a medical form), so for instance, if a panel is used for "Medical History", and the doctor will have literally maybe 50-100 choices (diabetes, hypertension, arthritis, etc) that he can click. If nothing is wrong with the patient, the doctor will collapse the panel and it will show a green color (no problems), but if person has diabetes and hypertension, but nothing else, then when he collapses the panel, the title bar will turn pink and will show those "problems" inside the panel, but nothing else. It's meant to be a way to quickly review a patient's history by color coding panels and saving space by only showing what we call "pertinent negatives".