databass requested this:
http://www.extjs.com/forum/showthrea...720#post426720
I have a multi-column grid, with an additional line for each grid that spans all of the columns.
What I'm trying to do is similar to the RowExpander plugin example in the Grid Plugin example.
http://www.extjs.com/examples/explorer.html#gridplugins
But I don't need the interactivity that the plugin has; I just want the second line to span all of the columns and always be visible.
Is there an easy way to set this up?
Otherwise, I could probably modifiy the RowExpanded plugin example. But how could I modifiy this RowExpander plugin to default being Expanded when it's loaded. Right now, it defaults to being UnExpanded.
i do this with my example:
ForumThread74595FixedLineunder.jpg
you can do this with this codesnippets and the rowexpander:
PHP Code:
//... disable the +/-
expander.setRenderer(new GridCellRenderer<ModelData>() {
public String render(ModelData model, String property, ColumnData d, int rowIndex,
int colIndex, ListStore<ModelData> store, Grid<ModelData> grid) {
d.cellAttr = "rowspan='2'";
return "";
}
});
//... create the rowcontent
expander.setExpandRenderer(new GridCellRenderer() {
public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {
String html = "<p><b>Company:</b> small line with many text and some other things</p>";
LayoutContainer lc = new LayoutContainer();
lc.setBorders(false);
lc.add(new HtmlContainer(html));
return lc;
}
});
// ... expand all rows
grid.addListener(Events.ViewReady, new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
expander.expandAllRows();
}
});
for the content you can use all variants from the examples in the second posting of this thread ( xTEmplate / returning a String / Returning a widget )
here is the full example snippet ( extract from the examples explorere examples)
PHP Code:
private void createExpander2() {
List<Stock> stocks = TestData.getStocks();
for (Stock s : stocks) {
s.set(
"desc",
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.");
}
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
final ExtendedRowExpander expander = new ExtendedRowExpander();
expander.setRenderer(new GridCellRenderer<ModelData>() {
public String render(ModelData model, String property, ColumnData d, int rowIndex,
int colIndex, ListStore<ModelData> store, Grid<ModelData> grid) {
d.cellAttr = "rowspan='2'";
return "";
}
});
expander.setExpandRenderer(new GridCellRenderer() {
public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {
String html = "<p><b>Company:</b> small line with many text and some other things</p>";
LayoutContainer lc = new LayoutContainer();
lc.setBorders(false);
lc.add(new HtmlContainer(html));
return lc;
}
});
configs.add(expander);
ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Company");
column.setWidth(200);
configs.add(column);
column = new ColumnConfig();
column.setId("symbol");
column.setHeader("Symbol");
column.setWidth(100);
configs.add(column);
column = new ColumnConfig();
column.setId("last");
column.setHeader("Last");
column.setAlignment(HorizontalAlignment.RIGHT);
column.setWidth(75);
column.setRenderer(gridNumber);
configs.add(column);
column = new ColumnConfig("change", "Change", 100);
column.setAlignment(HorizontalAlignment.RIGHT);
column.setRenderer(change);
configs.add(column);
column = new ColumnConfig("date", "Last Updated", 100);
column.setAlignment(HorizontalAlignment.RIGHT);
column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());
configs.add(column);
ListStore<Stock> store = new ListStore<Stock>();
store.add(stocks);
ColumnModel cm = new ColumnModel(configs);
ContentPanel cp = new ContentPanel();
cp.setHeading("Expander Rows, Collapse and Auto Fill");
// cp.setIcon(Examples.ICONS.table());
cp.setAnimCollapse(false);
cp.setCollapsible(true);
cp.setLayout(new FitLayout());
cp.setSize(600, 300);
final Grid<Stock> grid = new Grid<Stock>(store, cm);
grid.addPlugin(expander);
grid.setStripeRows(true);
grid.getView().setAutoFill(true);
cp.add(grid);
grid.addListener(Events.ViewReady, new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
expander.expandAllRows();
}
});
grid.getStore().remove(grid.getSelectionModel().getSelectedItem());
panel.add(cp);
}
PS:
maybe as feature of ExtendedRowExpander it can be added to the class :-) something like this: setExpandControlsVisible(boolean visible)
ExtendedRowExpander
Reply With Quote
Originally Posted by Arno.Nyhm
