[CLOSED] Css Problem with DataView Example

[LeeTheGreek]

Hi,

I have added the dataview "with paging" (https://examples1.ext.net/Examples/D...c/With_Paging/) example to a website. Everything works fine but i noticed that when changing the width of the browser the dataview (not the panel) remained in the same position as if the css had been set to "position:absolute". After investigating i noticed that this would only occur if i added "margin: auto;" to the body class eg

body { 
    width: 892px;
    height: 100%;
    margin: auto;
    padding: 0;
    font: 11px/200% verdana, sans-serif, "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode";  
    color: #000000;
    text-align: left;
    }

This is obviously a problem for me since the website must sit in the center of the browser. I also noticed that when i created some table classes it also affected the paging elements of the dataview eg

table {
    width: 100%;
    text-align: left;
}

tr, td {
    padding: 10px;
}*/

Any help in resolving these issues would greatly be appreciated :)

Lee

[Vladimir]

Hi Lee,

You can try repaint after window resize

        <ext:ScriptManager ID="ScriptManager1" runat="server">
            <Listeners>
                <WindowResize Handler="#{ImagePanel}.getEl().repaint();" />
            </Listeners>
        </ext:ScriptManager>

About table css rules. It is not good idea to define css rules for table, tr and td tag because you can break other controls which have this tag. It is better to define css rules with class selectors

table.mytable {
    width: 100%;
    text-align: left;
}

.mytable tr, .mytable td {
    padding: 10px;
}

[LeeTheGreek]

Thanks Vladimir,

You are a star!!! :)

[LeeTheGreek]

Hi,

I have just added the listener to the scriptmanager but its not working. Everytime i resize the window, a javascript error occurs: 'firefn' is null or not an object

here is the code im using:

    <ext:ScriptManager ID="ScriptManager1" runat="server"> 
        <Listeners>
            <WindowResize Handler="#{GridPanel1}.getEl().repaint();" />
        </Listeners>
    </ext:ScriptManager>

    <script type="text/javascript">
        var details = function () {
            return '<img class="imgEdit" ext:qtip="Click to view additional details" style="cursor:pointer;" src="images/vcard_edit.png" />';
        }


        var name = function(value) {
            return '' + value + '';
        };


        var cellClick = function (grid, rowIndex, columnIndex, e) {
            var t = e.getTarget();
            var record = grid.getStore().getAt(rowIndex);  // Get the Record
            var columnId = grid.getColumnModel().getColumnId(columnIndex); // Get column id


            if (t.className == 'imgEdit' &amp;&amp; columnId == 'Details') {
                //the ajax event allowed
                return true;
            }
            
            //forbidden
            return false;
        }
    </script>

    <ext:GridPanel ID="GridPanel1" runat="server" Frame="true" StoreID="Store1" Height="400" Width="510">
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ColumnID="Name" DataIndex="Name" Header="Name" Width="120">
                    <Renderer Fn="name" />
                </ext:Column>
                <ext:Column ColumnID="DateCreated" DataIndex="DateCreated" Header="Date Created" Width="90" >
                    <Renderer Fn="Ext.util.Format.dateRenderer('d/m/Y')" />
                </ext:Column>
                <ext:Column ColumnID="Gender" DataIndex="Gender" Header="Gender" Width="60" />
                <ext:Column ColumnID="EyeColour" DataIndex="EyeColour" Header="Eye Colour" Width="75" />
                <ext:Column ColumnID="HairColour" DataIndex="HairColour" Header="Hair Colour" Width="75" />
                <ext:Column ColumnID="View" Header="View Details" Width="74" Align="Center" Fixed="true" MenuDisabled="true" Resizable="false" DataIndex="Id">
                    <Renderer Fn="details" />                    
                </ext:Column>
            </Columns>
        </ColumnModel>
        <View>
            <ext:GridView ID="GridView1" runat="server" ForceFit="false" />
        </View>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
        </SelectionModel>
        <BottomBar>
            <ext:PagingToolBar ID="PagingToolBar2" runat="server" PageSize="10" StoreID="Store1" DisplayInfo="true" DisplayMsg="Displaying page {0} - {1} of {2}" EmptyMsg="No records found" Visible="true" />
        </BottomBar>
        <LoadMask ShowMask="true" />
        <Listeners>
            <CellClick Fn="cellClick" />
        </Listeners> 
        <AjaxEvents>
            <CellClick OnEvent="ShowDetails">
                <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{GridPanel1}.body}" />
                <UserParams>
                    <ext:Parameter Name="id" Value="params[0].getStore().getAt(params[1]).id" Mode="Raw" />
                </UserParams>
            </CellClick>
        </AjaxEvents>
    </ext:GridPanel>

[Vladimir]

Hi,

I can't reproduce the error (I can't use your example because data which you are binding to grid is absent). I created similar example but no issues I found

Can you provide simple example that I could test to resolve the error?