[CLOSED] DropDownField and TextField can not align ?

  1. #1

    [CLOSED] DropDownField and TextField can not align ?

    Click image for larger version. 

Name:	QQ截图20130924211030.jpg 
Views:	9 
Size:	37.6 KB 
ID:	6929Click image for larger version. 

Name:	QQ截图20130924211136.jpg 
Views:	8 
Size:	14.5 KB 
ID:	6930

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="column.aspx.cs" Inherits="extdemo.admin.pages.column" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script>
            var nodeLoad = function (store, operation, options) {
                var node = operation.node;
    
                App.direct.NodeLoad(node.getId(), {
                    success: function (result) {
                        node.set('loading', false);
                        node.set('loaded', true);
                        var data = Ext.decode(result);
                        node.appendChild(data, undefined, true);
                        node.expand();
                    },
    
                    failure: function (errorMsg) {
                        Ext.Msg.alert('Failure', errorMsg);
                    }
                });
    
                return false;
            };
            var rm_selected_node = function () {
                var tree = App.TreePanel1;
                var selection = tree.getSelectionModel().getSelection();
                var i;
                var len;
    
                for (i = 0, len = selection.length; i < len; i++) {
                    selection[i].remove();
                }
            };
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" SourceFormatting="True"></ext:ResourceManager>
            <ext:Window runat="server" ID="w_addcol" Hidden="True" Title="新增栏目" Layout="HBoxLayout" Width="400">
    
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Pack="Center" />
                </LayoutConfig>
                <Items>
                    <ext:FormPanel runat="server" Layout="AnchorLayout" Padding="4" ID="fp1">
                         
                        <Items> 
                            <ext:DropDownField AnchorHorizontal="100%" runat="server" ID="ddf_pid" Editable="false" FieldLabel="父级栏目" TriggerIcon="SimpleArrowDown" Mode="ValueText">
                                <Component>
                                    <ext:TreePanel runat="server"  >
                                        <Root>
                                            <ext:Node NodeID="0" Text="根节点">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="id" Value="0" />
                                                    <ext:ConfigItem Name="colname" Value="根栏目" />
                                                </CustomAttributes>
                                            </ext:Node>
                                        </Root>
                                        <Listeners>
                                            <BeforeLoad Fn="nodeLoad" />
                                        </Listeners>
                                        <Store>
                                            <ext:TreeStore runat="server" ID="TreeStore1">
                                                <Model>
                                                    <ext:Model ID="Model1" runat="server">
                                                        <Fields>
                                                            <ext:ModelField Name="id"></ext:ModelField>
                                                            <ext:ModelField Name="colname"></ext:ModelField>
                                                            <ext:ModelField Name="pid"></ext:ModelField>
                                                        </Fields>
                                                    </ext:Model>
                                                </Model>
                                            </ext:TreeStore>
                                        </Store>
                                        <ColumnModel>
                                            <Columns> 
                                                <ext:TreeColumn ID="TreeColumn1" runat="server" DataIndex="colname" Text="栏目" Flex="1" Width="300">
                                                </ext:TreeColumn> 
                                            </Columns>
                                        </ColumnModel>
                                        <Listeners>
                                            <ItemClick Handler="#{ddf_pid}.setValue(record.data.id,record.data.colname);"></ItemClick>
                                        </Listeners>
                                    </ext:TreePanel>
                                </Component>
                            </ext:DropDownField>
                            <ext:TextField AnchorHorizontal="100%" ID="tf_colname" Margin="4" runat="server" FieldLabel="栏目名称"></ext:TextField>
                        </Items>
                        <Buttons>
                            <ext:Button ID="Button1" runat="server" Text="确认">
                                <DirectEvents>
                                    <Click OnEvent="AddColumn">
                                        <EventMask ShowMask="True"></EventMask>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                            <ext:Button ID="Button2" runat="server" Text="取消">
                                <Listeners>
                                    <Click Handler="#{fp1}.reset();"></Click>
                                </Listeners>
                            </ext:Button>
                        </Buttons>
                    </ext:FormPanel>
    
                </Items>
    
            </ext:Window>
            <ext:TreePanel
                ID="TreePanel1"
                runat="server"
                Title="栏目管理"
                ColumnLines="True">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="新增" Icon="ApplicationFormAdd">
                                <Listeners>
                                    <Click Handler="#{w_addcol}.show();"></Click>
                                </Listeners>
                            </ext:Button>
                            <ext:Button runat="server" Text="删除" Icon="Delete">
                                <Listeners>
                                    <Click Fn="rm_selected_node" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button runat="server" Text="确定" Icon="Disk">
                                <DirectEvents>
                                    <Click OnEvent="BatchUpdate">
                                        <ExtraParams>
                                            <ext:Parameter Name="data" Value="App.TreePanel1.store.getChangedData()" Mode="Raw" Encode="true" />
                                        </ExtraParams>
                                        <EventMask ShowMask="True"></EventMask>
                                        <Confirmation Title="提示" ConfirmRequest="True" BeforeConfirm="this.message = '确实要这样做吗?';"></Confirmation>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                            <ext:Button ID="bt_fresh" runat="server" Text="刷新" Icon="PageRefresh">
                                <Listeners>
                                    <Click Handler="window.location='column.aspx';"></Click>
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Root>
                    <ext:Node NodeID="0" Text="根节点">
                        <CustomAttributes>
                            <ext:ConfigItem Name="id" Value="0" />
                            <ext:ConfigItem Name="colname" Value="根栏目" />
                        </CustomAttributes>
                    </ext:Node>
                </Root>
                <Listeners>
                    <BeforeLoad Fn="nodeLoad" />
                </Listeners>
                <Store>
                    <ext:TreeStore runat="server" ID="s_column">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="id"></ext:ModelField>
                                    <ext:ModelField Name="colname"></ext:ModelField>
                                    <ext:ModelField Name="pid"></ext:ModelField>
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:TreeStore>
                </Store>
                <ColumnModel>
                    <Columns>
                        <ext:Column runat="server" DataIndex="id" Text="编号"></ext:Column>
                        <ext:TreeColumn runat="server" DataIndex="colname" Text="栏目" Flex="1">
                            <Editor>
                                <ext:TextField runat="server"></ext:TextField>
                            </Editor>
                        </ext:TreeColumn>
                        <ext:Column runat="server" DataIndex="pid" Text="父id">
                            <Editor>
                                <ext:NumberField runat="server"></ext:NumberField>
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing runat="server"></ext:CellEditing>
                </Plugins>
                <SelectionModel>
                    <ext:TreeSelectionModel ID="TreeSelectionModel1" runat="server" Mode="Multi" />
                </SelectionModel>
            </ext:TreePanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Oct 04, 2013 at 5:48 AM. Reason: [CLOSED]
  2. #2
    Hi @hdsoso,

    1. First image. You can set up MatchFieldWidth="false" for the DropDownField and any Width in pixels for the TreePanel.

    2. Second image. The reason of misalignment is the Margin="4" setting of the TextField. Please remove it or add the same for the DropDownField.

Similar Threads

  1. Replies: 1
    Last Post: Jun 29, 2012, 11:51 AM
  2. [CLOSED] TextField align with StyleSpec
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 24, 2012, 2:56 PM
  3. Replies: 7
    Last Post: Nov 25, 2010, 4:18 PM
  4. [CLOSED] [1.0] TextField align?
    By edigital in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 05, 2010, 11:38 AM
  5. Align TextField
    By flaviodamaia in forum 1.x Help
    Replies: 0
    Last Post: Nov 18, 2008, 9:31 AM

Posting Permissions