ExtJs Grid acting very strange - asp.net

So I have two pictures of the weirdness that is occuring
As you can see in the picture above, the scroll bar on the right hand side is being cut off a little bit by the screen, and even when you scroll to the right, you don't get the bar back, it remains cut off.
Here is the other scenario:
Here, you can see that when I scroll down in this grid, the scroll bar kind of fits into the bottom of the grid and doesn't even go all the way down. You need to manually click into the grid and hit the down arrow to get the rest of the way down.
What could be causing both of these weird issues?
Edit:
Here is the code to generate the grid (Ext created through VB controls):
Dim VehicleOptionsGrid As New Akcelerant.Framework.WebControls.Grids.Grid
With VehicleOptionsGrid
.ID = "VehicleOptionsGrid"
.Title = "Vehicle Options"
.Toolbar.UseDefaultButtons = False
.Mode = Grids.Grid.GridMode.Control
.Panel.Border = False
.Panel.Style = "border-width:1px;margin-bottom:5px"
.Ref = "../../../../../VehicleOptionsGrid"
.Editable = True
With .Columns.Add("IsSelected", "Selection", Akcelerant.Framework.WebControls.Grids.Grid.ColumnDataType.Boolean)
.Renderer = "renderVehicleCheckbox"
End With
.Columns.Add("CollateralId", "").Hidden = True
.Columns.Add("OptionId", "OptionId").Hidden =True
.Columns.Add("OptionName", "Name").Width = 200
.GridHeight = 400
.DataBind()
ViewResponse.AddScript(.ToString(False))
ViewResponse.AddScript("VehicleOptionsGrid.grid.addListener('cellclick', changeOptionStatus);")
End With
Here is where we add the grid to the page:
With .AddPanel
With .AddPanel
.Title = ""
.Html = "Standard Options are preselected. Please select additional options as needed."
.Style = "padding-bottom:5px"
End With
.Ref = "../../../../VehicleOptionsPanel"
.Title = "Vehicle Options"
.Frame = True
.Style = "padding-bottom:5px"
.Layout = Pages.Panel.LayoutType.Column
.Height = 400
.Collapsed = True
.AddExtObject("VehicleOptionsGrid.grid")
End With

It seems that the grid sizes are higher than the actual component that holds the grid (a collapsible panel).

Related

How to make Report Footer print at bottom of page

I want the Report Footer to print at the bottom of the page rather than at the bottom of the end of the last line item of the report.
Also I'm formatting this for a paper that has a pre-printed grid on it and in order to make everything fit in the grid, I also have a Page Footer that's a couple inches high. However, I need the Report Footer to print in the Page Footer area.
There is no report footer in the Stimulsoft Reports.
There is a Report Summary where you could set the Pring at Bottom property.
You should set PrintOnAllPages = True in the footer band
StiFooterBand footerBand = new StiFooterBand();
footerBand.Height = 0.5f;
footerBand.Name = "FooterBand";
footerBand.Border = new StiBorder(StiBorderSides.All, Color.Black, 1, StiPenStyle.Solid);
footerBand.PrintOnAllPages = true;
page.Components.Add(footerBand);

Aspx Listbox rows match count issue

I have a strange issue when adding items to a listbox. I want it to adjust it's size to match it's count. When adding 1 all is fine, add the second and the rows go to 4 then after we have more than 4 all is working fine. The other thing is the location of the top of the listbox also moves up a few pixels - wierd. Is this a bug? This is the button event code for adding them. Updated!
Dim s As String = tbTest.Text
If Not s = "" Then
Dim li As New ListItem(s)
If Not lsbTest.Items.Contains(li) Then
lsbTest.Items.Add(li)
Dim i As Integer = lsbTest.Items.Count
lsbTest.Rows = i
lsbTest.Height = i * 22
End If
End If
Don't use Rows property. Let it stretch by setting the CSS height to 100% of a containing div.
UPDATE:
Take a look at this solution (Googled it):
Allowing listbox to grow vertically....

cObject in Typolink assigned with border-content

Basically, I (think I ) need to know how to assign borderContent to a cObject, when it is a typolink parameter.
To tell the whole story: I'm using perfect lightbox, and I want it to open the lightbox when a text is clicked, and display the images that are in a single content element in the border section.
Looking through the manual, i found this code:
page.20 = TEXT
page.20.value = Open an image in a lightbox
page.20.typolink {
title = This is my caption
parameter.cObject = IMG_RESOURCE
parameter.cObject = fileadmin/image2.jpg
parameter.cObject.file.maxW = 600
parameter.cObject.file.maxH = 600
ATagParams = rel="lightbox[mySet]"
}
which is working fine. But I don't want the path to be hard set, but the content to be loaded from the border section, as I said. But if I try the following:
page.20 = TEXT
page.20.value = Open an image in a lightbox
page.20.typolink {
title = This is my caption
parameter.cObject = IMG_RESOURCE
parameter.cObject < styles.content.getBorder
parameter.cObject.file.maxW = 600
parameter.cObject.file.maxH = 600
ATagParams = rel="lightbox[mySet]"
}
the link is gone.
So I GUESS I'm assigning the content wrong. Somebody knows the answer?
Thanks!
(If of any help, I use automaketemplate..)
Assigning styles.content.getBorder will just assign the full content elements from the border column. This will not get you anywhere.
You will need to manually load the content elements from the border column, of course this can be done with TypoScript. It should be something like this:
page.20 = TEXT
page.20 {
value = Open an image in a lightbox
typolink {
ATagParams = rel="lightbox[mySet]"
title = This will be the title attribute
parameter.cObject = CONTENT
parameter.cObject {
table = tt_content
select {
pidInList = this
where = colPos = 3
}
renderObj = IMG_RESOURCE
renderObj.file {
import = uploads/pics
import.field = image
import.listNum = 0
width = 600
height = 600
}
}
}
}
Basically this will load all content elements on the border position from the current page. Render the first image in the list of images and return you the resource.

How do I Print a dynamically created Flex component/chart that is not being displayed on the screen?

I have a several chart components that I have created in Flex. Basically I have set up a special UI that allows the user to select which of these charts they want to print. When they press the print button each of the selected charts is created dynamically then added to a container. Then I send this container off to FlexPrintJob.
i.e.
private function prePrint():void
{
var printSelection:Box = new Box();
printSelection.percentHeight = 100;
printSelection.percentWidth = 100;
printSelection.visible = true;
if (this.chkMyChart1.selected)
{
var rptMyChart1:Chart1Panel = new Chart1Panel();
rptMyChart1.percentHeight = 100;
rptMyChart1.percentWidth = 100;
rptMyChart1.visible = true;
printSelection.addChild(rptMyChart1);
}
print(printSelection);
}
private function print(container:Box):void
{
var job:FlexPrintJob;
job = new FlexPrintJob();
if (job.start()) {
job.addObject(container, FlexPrintJobScaleType.MATCH_WIDTH);
job.send();
}
}
This code works fine if the chart is actually displayed somewhere on the page but adding it dynamically as shown above does not. The print dialog will appear but nothing happens when I press OK.
So I really have two questions:
Is it possible to print flex components/charts when they are not visible on the screen?
If so, how do I do it / what am I doing wrong?
UPDATE:
Well, at least one thing wrong is my use of the percentages in the width and height. Using percentages doesn't really make sense when the Box is not contained in another object. Changing the height and width to fixed values actually allows the printing to progress and solves my initial problem.
printSelection.height = 100;
printSelection.width = 100;
But a new problem arises in that instead of seeing my chart, I see a black box instead. I have previously resolved this issue by setting the background colour of the chart to #FFFFFF but this doesn't seem to be working this time.
UPDATE 2:
I have seen some examples on the adobe site that add the container to the application but don't include it in the layout. This looks like the way to go.
i.e.
printSelection.includeInLayout = false;
addChild(printSelection);
Your component has to be on the stage in order to draw its contents, so you should try something like this:
printSelection.visible = false;
application.addChild(printSelection);
printSelection.width = ..;
printSelection.height = ...;
...
then do the printing
i'm not completely sure, but in one of my application I have to print out a complete Tab Navigator and the only method i have found to print it is to automatically scroll the tabnavigator tab in order to show the component on screen when i add them to the printjob.
In this way they are all printed. Before i created the tabnaviagotr scrolling the print (to PDF) result was a file with all the pages of the tab but only the one visible on screen really printed.

How do I enable a Text class to accept html text and will I be able to calculate height and width?

When showing the html I would need to know the height of the text box in order to align things below it properly.
In order to pass it html and have it rendered as such you would set the htmlText property instead of the text property. Once the text box has been added to the display list you can get it's height just like normal.
If you are trying to get the value of the height and width immediately after setting insance.htmlText, you are not going to get the calculated size of the container. You can add an event listener for FlexEvent.UPDATE_COMPLETE or force validation to do it synchronously and use getExplicitOrMeasuredHeight(). Be careful when forcing validation, it is expensive and does not necessarily need to be done in most cases. I've included a right and wrong way of making it synchronous that was not entirely obvious to me at first.
Wrong:
var container : Box = new Box;
var text : Text = new Text;
container.addChild(text);
text.htmlText = "<b>THIS IS A TEST</b>";
trace( text.getExplicitOrMeasuredHeight() > 0 ) // False
Right:
var container : Box = new Box;
var text : Text = new Text;
container.addChild(text);
text.htmlText = "<b>THIS IS A TEST</b>";
text.validateNow(); // Forces the validation methods to run and update the component
trace( text.getExplicitOrMeasuredHeight() > 0 ) // True

Resources