如何在运行时更改组合框的样式属性 - textInputStyleName?

发布于 2024-10-23 23:52:54 字数 1358 浏览 1 评论 0原文

我的组合框中要显示一个提示字符串 - 需要以斜体显示。当用户从列表中进行任何选择时 - 我需要更改显示内容的样式。

我的 css 文件:

.promptStyle
{
    fontStyle: italic;
}
ComboBox.withPrompt
{
    color: #FF0000;
    fontWeight: normal;
    textInputStyleName: promptStyle;
}
.regularStyle
{
    fontStyle: normal;
}
ComboBox.withoutPrompt
{
    color: black;
    fontWeight: normal;
    textInputStyleName: regularStyle;
}

我的 MXML 文件:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
            minWidth="955" minHeight="600" initialize="init()">

<mx:Script>
    <![CDATA[
        [Bindable]
        private var content:Array=new Array("Red", "Blue", "Green");

        private function init():void {
            StyleManager.loadStyleDeclarations("combos/combo_style.swf");
        }

        private function changeStyle():void {
            var index:int = promptBox.selectedIndex;
            if(index != -1)
                promptBox.setStyle("styleName","withoutPrompt");
        }
    ]]>
</mx:Script>

<mx:ComboBox id="promptBox" prompt="Select a color" dataProvider="{content}"
        styleName="withPrompt" change="changeStyle()"/>
</mx:Application>

我能够看到样式发生变化,因为颜色发生了变化;但特定于 textInputStyleName 的更改不会应用。任何帮助将不胜感激。

I have a prompt string to be displayed in my combobox - this needs to be displayed in italics. When user makes any selection from the list - i need to change the style of the displayed content.

My css file:

.promptStyle
{
    fontStyle: italic;
}
ComboBox.withPrompt
{
    color: #FF0000;
    fontWeight: normal;
    textInputStyleName: promptStyle;
}
.regularStyle
{
    fontStyle: normal;
}
ComboBox.withoutPrompt
{
    color: black;
    fontWeight: normal;
    textInputStyleName: regularStyle;
}

My MXML file:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
            minWidth="955" minHeight="600" initialize="init()">

<mx:Script>
    <![CDATA[
        [Bindable]
        private var content:Array=new Array("Red", "Blue", "Green");

        private function init():void {
            StyleManager.loadStyleDeclarations("combos/combo_style.swf");
        }

        private function changeStyle():void {
            var index:int = promptBox.selectedIndex;
            if(index != -1)
                promptBox.setStyle("styleName","withoutPrompt");
        }
    ]]>
</mx:Script>

<mx:ComboBox id="promptBox" prompt="Select a color" dataProvider="{content}"
        styleName="withPrompt" change="changeStyle()"/>
</mx:Application>

I am able to see the style change happening because the color changes; but the change specific to textInputStyleName does not get applied. Any help would be appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

雨后彩虹 2024-10-30 23:52:54

您应该将样式分配给内部 TextInput 子组件,但为此您必须派生自己的 PromptingComboBox 才能访问受保护的 textInput 属性。

我认为下面的课程基本上可以满足您的需求,并且应该给您一个想法:

public class PromptingComboBox extends ComboBox implements IFactory
{
    private var _dropDown: List = null;

    public function PromptingComboBox()
    {
        super.dropdownFactory = this;
    }

    public function newInstance(): *
    {
        _dropDown = new List();
        _dropDown.addEventListener(ListEvent.CHANGE, onChangeDropDownList);
        return _dropDown;
    }

    override protected function createChildren():void
    {
        super.createChildren();
        this.textInput.setStyle("fontStyle", "italic");
    }

    private function onChangeDropDownList(event: Event): void
    {
        this.textInput.setStyle("fontStyle", "");
    }
}

You should assign the style to the internal TextInput subcomponent, but for this you have to derive your own PromptingComboBox to access the protected textInput property.

I think the following class does basically what you want and should give you an idea:

public class PromptingComboBox extends ComboBox implements IFactory
{
    private var _dropDown: List = null;

    public function PromptingComboBox()
    {
        super.dropdownFactory = this;
    }

    public function newInstance(): *
    {
        _dropDown = new List();
        _dropDown.addEventListener(ListEvent.CHANGE, onChangeDropDownList);
        return _dropDown;
    }

    override protected function createChildren():void
    {
        super.createChildren();
        this.textInput.setStyle("fontStyle", "italic");
    }

    private function onChangeDropDownList(event: Event): void
    {
        this.textInput.setStyle("fontStyle", "");
    }
}
寒冷纷飞旳雪 2024-10-30 23:52:54

谢谢:)我可以按照您的建议通过对 ComboBox 进行子类化来使其工作。在我的 css 中更新 textInputStyleName 对我来说是一个更干净的解决方案,因为这是一个巨大的现有应用程序,现在我必须进入几个 MXML 并更改控件以使用自定义控件 - 我猜这是 Flex 中的一个错误?

无论如何,感谢您的帮助!

Thank you :) I was able to get it to work by sub-classing ComboBox as you suggested. Updating textInputStyleName in my css would have been a much cleaner solution for me since this is a huge existing application and now i have to get into several MXMLs and change the control to use the custom control instead - im guessing this is a bug in flex?

Anyways, thanks for your help!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文