PDA

View Full Version : [CLOSED] DropDownField and TextField can not align ?



hdsoso
Sep 24, 2013, 1:12 PM
69296930



<%@ 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.col name);"></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>

Daniil
Sep 24, 2013, 4:21 PM
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.