Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Resizing ListGrid separates its filter editor from its top

    Using smartGwt 2.0 and GWT 2.0.

    I have a ListGrid configured with list.setShowFilterEditor(true). After it has drawn, I resize it by calling list.resizeTo(width, height). However, this causes the file editor row to separate from the top of the ListGrid. The screenshot attachment show how it looks.

    Following is the code that constructs the ListGrid:

    Code:
    		this.membersList = new ListGrid();

		// Appearance
		this.membersList.setSelectionType(SelectionStyle.MULTIPLE);
		this.membersList.setAlternateRecordStyles(true);
		this.membersList.setWrapCells(true);
		this.membersList.setCellHeight(32);

		// Configure filtering and pagination
		this.membersList.setShowFilterEditor(true);
		this.membersList.setAutoFetchTextMatchStyle(TextMatchStyle.STARTS_WITH);
		this.membersList.setDataPageSize(50);
		this.membersList.setShowAllRecords(false);
		this.membersList.setDrawAheadRatio(1.5f);

		this.membersDs = new MembersDS();
		this.membersList.setDataSource(membersDs);
		this.membersList.setCanReorderRecords(false);
		this.membersList.setSortField(MembersDS.USER);
		this.membersList.setSortDirection(SortDirection.ASCENDING);

		// this.usersList.setContextMenu(createContextMenu());

		this.membersList.fetchData();

		RootPanel.get("membersDiv").add(this.membersList);
    And here is the HTML page where the ListGrid is displayed in the 'membersDiv' div:

    Code:
    <body class="workspaceBodyColor" id="workspaceBody" onLoad="layoutPanels()" onResize="layoutPanels()">
	<table id="header" class="workspaceHeader" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td class="workspaceHeaderColor" width="100%"><%= channelTitle %><span class="groupHintColor"><span class="groupHint"><%= groupTitle %></span></span></td>
		</tr>
		<% if (preamble != null) { %>
		<tr>
			<td class="content" style="padding-left: 0px; padding-top: 8px;"><%= preamble %></td>
		</tr>
		<% } %>
	</table>
	<div id="membersDiv" />
	<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
    Attached Files
    Tags: None
    #2
    In general, we do not recommend embedding SmartGWT components into HTML DIVs unless it's unavoidable. Use SmartGWT's layout mechanisms instead.

    If it is unavoidable, you can fix this particular problem by wrapping the ListGrid with a VLayout or any other SmartGWT component.

    Comment

      #3
      Embedding SmartGWT into DIVs

      Originally posted by Isomorphic
      In general, we do not recommend embedding SmartGWT components into HTML DIVs unless it's unavoidable. Use SmartGWT's layout mechanisms instead.
      Your reply seems to answer a question I've had about the composition and size of SmartGWT-based applications. It seems that GWT, and consequently SmartGWT, leans toward building the entire user GUI as one monolithic SmartGWT application. Is that right? Although the application may have multiple popup windows, dialog boxes, etc, in general it seems that SmartGWT leads us to have an application with one HTML page in which the entire application GUI resides.

      In contrast we have been trying to use SmartGWT as small, single-purpose "widgets" where multiple widgets might be embedded onto the same HTML page. Thus far it feels like we have been "going against the grain", perhaps using SmartGWT in a way for which it was not intended. For example, in our HTML page we wanted our SmartGWT widget to reside within an HTML div whose size had been specified by CSS. We had thought that by having the entry point invoke the method "setWidth100()" that the widget would fill the size of the div. Instead the SmartGWT GUI filled the entire window's width. To solve the problem we had to define bridge methods so that external Javascript could call into the SmartGWT widget, passing a hard-coded number to the "setWidth()" method. Although this worked it seemed rather kludgy.

      So to summarize my question is, is SmartGWT designed to assume large application-sized windows that fill the entire browser window, or is it also suited for small widgets that each display a few lines of information, where multiple widgets reside within the same HTML window?

      Comment

        #4
        This exact use case (flowing into the available space of a plain HTML element) is covered in detail in the FAQ.

        Yes, the primary design goal is single page applications, although there are many cases where SmartClient or SmartGWT works well as a kind of "portlet" embedded in other applications.

        Comment

        Previous template Next
        Working...
        X